Remix Jokes チュートリアル for Cloudflare

以下のチュートリアルをCloudflare Pages + Cloudflare D1 + Cloudflare Accessに対応させたチュートリアルのサンプルコードです。

Remix Jokes App Tutorial

アーキテクチャ

事前準備

Cloudflareのアカウントを作成

Cloudflare からアクセスしてサインアップを行って管理画面にアクセスできるようにしておきます。

D1データベースの作成

npx wrangler d1 create remix-jokes

作成後に表示される wrangler.toml の設定情報を上書きして設定します。

データベースマイグレーション

ローカルマイグレーション

npm run migration:local

Cloudflare D1マイグレーション

npm run migration:remote

環境変数の設定

プロジェクト直下に .dev.env を作成しに以下の環境変数を設定します。

POLICY_AUD={cloudflare accessのaud}
JWKS_URL=https://{your-team-domai}/cdn-cgi/access/certs
LOGOUT_URL=https://{your-team-domain}/cdn-cgi/access/logout

ローカル起動

npm run dev

Cloudflare Pagesにデプロイ

ローカルからデプロイ

npm run build
npm run deploy

Pushによる自動デプロイ

事前にCloudflareの管理画面からPagesのプロジェクトを作成してGitHubのリポジトリと紐づけます。その後はPushすれば自動でデプロイが行われます。