Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える
はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能 Webアプリケーションのクライアントを開発する際に、本来ならばサーバ上で稼働するWebアプリケーションのバックエンドのAPIを呼び出してデータを受け取って表示するといった動作を作り込みたいけれども、まだバックエンドのAPIも開発中であったり、何らかの理由でバックエンドを稼働させる環境を用意できなかったりすることは、しばしば起こりえます。 そうしたときにサーバを立てることなく、バックエンドのAPIをモックとして簡単に設定し提供してくれるソフトウェア「Mock Service Worker」の最新版「Mock Service Worker 2.0」が正式にリリースされました。 Announcing MSW 2.0! Migratio
Cloudflare Workers を使う前に知っておきたい注意点
Cloudflare WorkersでNode.jsを動かすためのあれこれをスクラップに残していたのですが、ハマったポイントが多かったのでこちらに整理しておきます。 今回やろうとしたのは、Zennのマークダウン→HTML変換のAPIをCloudflare Workersで動かすというものです。試行錯誤の末に断念したのですが、以下でその理由をまとめておきます。 CPUやメモリ、ファイルサイズなどの制限が厳しめ 2023/07/25時点でのCloudflare Workersの制限一覧がこちら。 Limits - Cloudflare Workers CDNのエッジで動くので、パフォーマンスが良いぶん制限が厳しめです。 メモリ上限は128MB サイズ上限は無料プランだと圧縮後1MBまで 有料プランだと10MBの上限となるが、できるかぎり1MB以内に抑えたい（参考:Server Side Jav
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
JS のビルドサイズを極限まで絞るための TIPS 集
ビルドサイズ限界まで絞りたい人向け。 あらゆる環境で実践するものではないが、知ってたら簡単に避けることができるのもあるので知っておくと便利なTIPS書いていく。 基本ポリシー 未使用コードはビルド時に全部落とす。 何が未使用コードで、何が定数かわかるようなインターフェースを人間が心がける。 用語 Dead Code Ellimination(DCE) Rollup や Terser で、未使用コードを削除すること
Wiki.js + Heroku を使って、無料で高機能の情報共有 wiki を簡単に作る
背景: GitHub wiki への不満 私の所属する研究室では、メンバー全員が１つの GitHub Organization に所属しており、情報共有はその Organization 上のリポジトリの GitHub wiki で行われています。 研究室がコンピュータサイエンス系であることもあってメンバーは GitHub や Markdown に慣れており、普段 GitHub wiki を使っていて困ることはそんなになかったのですが、それでも時々不満が出ることがありました。 不満として多いのは、色々記事を書いているうちに全体構造がよくわからなくなってしまうという点にあると思います。GitHub wiki ではディレクトリ構造を持てないので、全ての情報がリンクを経由してアクセスされることになり、段々と整理がつかなくなってしまいます。 複数のリポジトリにそれぞれ wiki を書くこともできます
React+Electronアプリを作ってみよう
こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に
jQuery + BootstrapでRestful APIクライアント開発 - Qiita
やりたいこと jQuery + BootstapでインターネットのRestful Web Serviceクライアントを開発する。 参考文献 spring.io - Consuming a RESTful Web Service with jQuery Apress - Beginning jQuery Qiita - JSON関連オンラインツールまとめ 利用ウェブサービス Internet Chuck Norris Database - ジョークを返すサイト まずはChrome(JSON Formmater Extension)から確認。 http://api.icndb.com/jokes/random へ接続すると、以下のような値が返ってくるはず。 JSON Placeholder - 適当なサンプルデータを返すサイト 全体設計 jokes_simple.html + jokes_lo
Vue.jsを教えるまでの道のり - sushitecture
querySelectorを教えるべきかgetElementByIdとかでやるべきか一瞬迷う（結局querySelectorにする）
CIによる機械的なコードレビューを可能にするDangerを使ってみた - Qiita
TL;DR この記事はgithub上でのコードレビューに役立つdanger(-js)というツールの紹介です。dangerのセットアップから簡単なレビュールールを記述するところまでのチュートリアルです。 dangerはプルリクエストをトリガとしCI上で実行され、チームメンバがコードレビューを始まる前に、機械的にレビューできる様々な項目をCIがレビューしてくれるツールです。レポジトリは以下です。 オリジナルのdangerはrubyで開発されていますが今回はjavascript版のdangerを紹介します。javascript版はNode.jsで動作します。 DangerによるPull Requestの機械的レビュー Pull Requestの機械的レビューと言われてもなかなかピンとこないかもしれません。例えば ブランチ名やブランチの向き先をチェックする 「向き先間違えてるよー 」とか Pull
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
Home
Simple flat file CMS WonderCMS is the smallest flat file CMS Free, fast & easy editing, only 5 files 1-step install Simply unzip and upload 5 files anywhere on your server. WonderCMS is a flat file CMS, meaning it uses a text file as a database. It's installed without any configuration, since no relational database (like MySQL) is required. Privacy CMS, no commercial gain Free and open source sinc
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - brannondorsey/host-validation: Express.js middleware for "Host" and "Referer" header validation to protect against DNS rebinding attacks.
GitHub - paulsonnentag/swip: a library to create multi device experiments
jrGQL
GitHub - xojs/xo: ❤️ JavaScript/TypeScript linter (ESLint wrapper) with great defaults
GPU.js - GPU accelerated Javascript
GitHub - robinmoisson/staticrypt: Password protect a static HTML page, decrypted in-browser
