デプロイ
静的サイトとしてデプロイ
- Next.jsを
Static exportsして静的サイトとしてデプロイ。Static exportsすることで、Next.jsアプリを静的ファイルとしてビルドすることができる。
const nextConfig: NextConfig = {
output: 'export',
};Cloudflare Pagesでアプリを作成
- Gitレポジトリと連携し、セットアップ
- 入力項目参考
### フレームワークプリセット
Next.js(Static HTML Exports)
### ビルドコマンド
bun install && bun run build
### ビルド出力ディレクトリ
out
### ルートディレクトリ(アドバンスト)
パス:apps/frontend
### 環境変数(アドバンスト)
・BUN_VERSION:1.2.2
・NODE_VERSION:20.9.0APIサーバーをCloudflare Workersにデプロイ
- Honoで作成したAPIサーバーをCloudflareにデプロイ
- backendディレクトリで
bun run deploy実行- コマンドを実行するとログイン画面や確認画面が表示されるので、案内に従って進めてください。sccessfullyと表示されたときに表示されるURLを後で使うので保存
Successfully logged in.
Total Upload: 223.84 KiB / gzip: 67.94 KiB
Worker Startup Time: 19 ms
No bindings found.
Uploaded backend (3.13 sec)
Deployed backend triggers (0.34 sec)
https://..........workers.dev # 後で使用するので保存しておいてください
Current Version ID: ace1c54e-04a0-4065-a32b-30337a6b9ba1- 環境変数を設定
- Wrangler CLIを使用して環境変数を設定。
- コマンド:
bunx wrangler secret put DATABASE_URL .dev.varsファイルのDATABASE_URLの値を入力- 注意:ターミナルへのペーストが失敗している場合があるため、Shiftも押しながらペースト推奨
Success! Uploaded secret DATABASE_URLと表示されたら成功
$ bunx wrangler secret put DATABASE_URL ⛅️ wrangler 3.109.2 -------------------- √ Enter a secret value: ... **************************************************************************************** 🌀 Creating the secret for the Worker "backend" ✨ Success! Uploaded secret DATABASE_URLフロントエンド側でバックエンドのURLを環境変数に設定
- フロントエンドのプロジェクトを選択
- タブから設定を選択→変数とシークレットを選択
- 変数とシークレット欄の+追加を押す
- 変数名に
NEXT_PUBLIC_API_URLを入力し、値には先ほど表示されたURLを入力します
