CloudFlareにデプロイするためのRemixプロジェクトでCloudFlare上のD1へマイグレーションやSeedの実行を行うコマンドを用意、デプロイして確認

概要

下記で追加したローカル用のマイグレーションやseed実行のコマンドの、CloudFare内のD1に対するマイグレーションやseed実行のコマンドを用意する

前提

下記の作業作業が終わっていないと、本作業ができないというわけではないが時系列的には下記が完了している必要がある。

方法

1. execute_seeds.shを下記のように修正し、引数を受け取れるように変更

   execute_seeds.sh

   #!/bin/bash
   
   # SQLファイルのリスト
   sql_files=(
       # NOTE: seedファイルを追加したらこちらにも追加
       "./seeds/task_category_masters_seed.sql"
       "./seeds/tasks_seed.sql"
   )
   
   # 各SQLファイルを実行
   for file in "${sql_files[@]}"; do
       npx wrangler d1 execute todo-cloudflare-d1 $1 --file "$file"
   done
   

2. package.jsonのscriptの中身を下記のように記載

   package.json

   "scripts": {
     "build": "remix vite:build",
     "deploy": "npm run build && wrangler pages deploy",
     "dev": "remix vite:dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "wrangler pages dev ./build/client",
     "typecheck": "tsc",
     "typegen": "wrangler types",
     "preview": "npm run build && wrangler pages dev",
     "cf-typegen": "wrangler types",
     "local-seed": "./execute_seeds.sh --local",
     "local-migrate": "npx wrangler d1 migrations apply todo-cloudflare-d1 --local",
     "local-migrate-fresh": "npx wrangler d1 execute todo-cloudflare-d1 --local --file ./seeds/drop_tables.sql",
     "local-migrate-reset": "npm run local-migrate-fresh && npm run local-migrate",
     "local-migrate-reset-and-seed": "npm run local-migrate-reset && npm run local-seed",
     "remote-seed": "./execute_seeds.sh --remote",
     "remote-migrate": "npx wrangler d1 migrations apply todo-cloudflare-d1 --remote",
     "remote-migrate-fresh": "npx wrangler d1 execute todo-cloudflare-d1 --remote --file ./seeds/drop_tables.sql",
     "remote-migrate-reset": "npm run remote-migrate-fresh && npm run remote-migrate",
     "remote-migrate-reset-and-seed": "npm run remote-migrate-reset && npm run remote-seed"
   },
   

3. 下記の順番でマイグレーション → seed → デプロイを実行

   npm run remote-migrate
   npm run remote-seed
   npm run deploy
   

4. CloudFlare上の「サイトにアクセス」をクリックして、画面が開き、ローカルと同じように動作することを確認