Setup

1. ローカル環境で実行できるようにする

Windows環境の場合は WSL2 を使ってください

1. WSL2環境に Node.js 20 をインストールしておく
2. 本リポジトリを git clone する
3. npm install で依存パッケージをインストールする

2. Wranglerコマンドを有効化する

1. npx wrangler login を実行する。ブラウザでログインページが開くのでCloudflareアカウントでログインする

3. Cloudflare上にD1データベースを作る

1. npx wrangler d1 create imgin-db を実行してD1データベースを作成する
2. 作成に成功すると database_id=*****... を含むwranglerの設定が出力されるのでこれをコピーする
3. wrangler.toml の同様の記述箇所 (11-14行目) にペーストする

4. npm run migrate:local でローカル環境のDBでマイグレーションを実行する ※マイグレーションを行うか確認されるのでyキーで処理を最後まで進める
5. npm run migrate:remote でリモート環境のDBでもマイグレーションを実行する ※マイグレーションを行うか確認されるのでyキーで処理を最後まで進める

4. Cloduflare上にR2バケットを作る

1. npx wrangler r2 bucket create imgin-data を実行してR2バケットを作成する
2. ブラウザで Cloudflare Dashboard を開き、ログインして作成したバケットの詳細ページを開く

3. バケットのSettingsにてPublic Accessを有効化する

4. Public R2.dev Bucket URL が表示されるのでこれをコピーする

5. touch .env.local でenvファイルを作り、1行目にコピーしたURLを NEXT_PUBLIC_EXPORT_URL= に続けてペーストする

5. Cloudflare Pagesにデプロイする

1. wrangler.toml のプロジェクト名（2行目 name = "imgin" の部分） を他者と被らない任意の名前に変更する 例） name = "imgin-hogehoge"
2. npm run deploy を実行してCloudflare Pagesにデプロイする
3. 初回のデプロイ時Cloudflare側に該当のプロジェクトを作成するか確認されるので Create a new project を選択する。productionに使用するブランチ名を聞かれるのでそのままEnter
4. 初回のデプロイ時に本番環境として扱うgitブランチを聞かれるので main と入力する
5. デプロイに成功するとページのURLが出力されるのでブラウザで開いてみる ※DNS設定が反映されるまで少し時間がかかる

6. デプロイが完了すると https://<プロジェクト名>.pages.dev で IMGin が使えるようになる