Site cover image

Site icon imageastro-notion-blog-test

make blog with notion

Nextjs、SPAアプリのcloudfrareへのデプロイ

デプロイ

静的サイトとしてデプロイ
  • 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_VERSION1.2.2NODE_VERSION20.9.0
APIサーバーを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を環境変数に設定
    1. フロントエンドのプロジェクトを選択
    2. タブから設定を選択→変数とシークレットを選択
    3. 変数とシークレット欄の+追加を押す
    4. 変数名にNEXT_PUBLIC_API_URLを入力し、値には先ほど表示されたURLを入力します
Image in a image block
Image in a image block