Remix + Cloudflare Pages (Functions) + Cloudflare D1 + Cloudflare R2 のブログシステムの例

これは何？

Remix + Cloudflare Pages (Functions) + Cloudflare D1 + Cloudflare R2 のブログシステムの例です。
ここで動かしています。

既知の問題

• リンクカードに使うOGP情報が取得されるまでレスポンスがブロックされるため、リンクカードがあるとリンク先からレスポンスが返ってくるまでの時間が純粋にかかるため、ファーストビューの表示が遅くなる

How to run

Cloudflareのアカウントが必要です。

$ npm install
$ npx wrangler login

D1 と R2 の作成（既存のものを使う場合は不要）

$ npx wrangler d1 create [your-database-name]
$ npx wrangler r2 bucket create [your-bucket-name]

開発用にローカルで動かす場合

$ npx wrangler d1 migrations apply [your-database-name] --local

作成したD1のデータベースの名前・IDやR2のバケットの名前を、wrangler.tomlに設定してください。

$ npx wrangler d1 execute [your-database-name] --local --command="INSERT INTO articles (key, title, abstract, body) VALUES ('example0', 'Hello World', 'Example abstract', '## Example heading' || char(10) || '### Example sub heading' || char(10) || 'This is example.' || char(10))"
$ npm run dev

GAのトラッキングIDを設定する場合は、.dev.varsに環境変数GA_TRACKING_IDに設定してください。

静的ファイルもローカルのR2に追加することで、記事から参照可能です。
以下のコマンドは、ローカルのR2への画像の追加の例です。

$ npx wrangler r2 object put [your-bucket-name]/[your-article-key]/00.jpg --file=/path/to/00.jpg --local

Cloudflare 上で動かす場合

プロジェクトの設定から D1 や R2 のバインディングを設定してください。
Settings > Functions > R2 bucket bindings と Settings > Functions > D1 database bindings で設定できます。
npm run deployの後にバインディングを設定しても、デプロイ済みのものには反映されないことを確認しています。
バインディングの設定を変更した場合は、再度デプロイしてください。

$ npx wrangler d1 migrations apply [your-database-name]
$ npm run deploy

GAのトラッキングIDを設定する場合は、プロジェクトの設定から環境変数GA_TRACKING_IDに設定してください。

example以下に、記事・画像などの追加のためのスクリプトと記事の例があります。
上で作成したD1とR2の名前や、Cloudflareにアクセスするためのトークンなどをスクリプトのグローバル変数に設定してください。
以下のコマンドで、記事の例をD1とR2にアップロードできます。

$ python3 example/scripts/insert.py example/article/