Skip to content

Setup

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

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行目) にペーストする
d1-copy-paste

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

  1. npx wrangler r2 bucket create imgin-data を実行してR2バケットを作成する
  2. ブラウザで Cloudflare Dashboard を開き、ログインして作成したバケットの詳細ページを開く
select-r2-detail
  1. バケットのSettingsにてPublic Accessを有効化する
select-r2-settings allow-r2-public-access
  1. Public R2.dev Bucket URL が表示されるのでこれをコピーする
copy-public-r2-url
  1. touch .env.local でenvファイルを作り、1行目にコピーしたURLを NEXT_PUBLIC_EXPORT_URL= に続けて入力する
image

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