Skip to content

Home

Jump to bottom
halmakey edited this page Sep 8, 2024 · 13 revisions

imgin-web セットアップ手順

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

  1. ローカル環境に 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. Cloduflare上にR2バケットを作る

  1. npx wrangler r2 bucket create を実行してR2バケットを作成する
  2. ブラウザで Cloudflare Dashboard を開き、ログインして作成したバケットの詳細ページを開く
cloudflare-r2 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 Pages側にプロジェクトを作成するか聞かれるので Create a new project を選択する。productionに使用するブランチ名を聞かれるのでそのままEnter

Clone this wiki locally