【Next.js + Cloudflare Workers】Cloudflare WorkersでNext.jsプロジェクトのCI/CDを実現する

はじめに

前回、FirebaseAppHostingを使ってNext.jsプロジェクトのCI/CDに挑戦しました。
コミュニティ内で「Cloudflareが熱いよ！」と教えてもらい、Cloudflareを使ったCI/CD環境の構築に挑戦してみました。備忘録として調べたことをまとめます。

前提

本記事では以下の設定が完了していることを前提としています。

• Next.jsプロジェクトが作成済み
• Cloudflare、GitHubアカウント作成済み
• Next.jsのプロジェクトをCloudflareを使ってCLIでデプロイできる状態
• Jestによるテスト環境が構築済み

設定方法は下記のドキュメントを参考にしました。

1.Cloudflareでの自動デプロイ設定（CD）

Cloudflareコンソールにログイン後、Account Home画面で対象のプロジェクトを選択

Settingsを選択

画面を下へスクロールすると、Build項目があります。
GitHub連携を行い、リポジトリを指定します。

Build configurationの編集ボタンを押下し、コマンドを登録します。
Deploy commandにpackage.jsonにて指定したdeployコマンドからnpm run deployを指定、Updateで登録

Deploymentsタブでビルド時のログを確認できます。

2.テスト自動実行の設定（CI）

デプロイ前にテストを実行するため、package.jsonにpre実行コマンドを追加しました。

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
    "cf-typegen": "wrangler types --env-interface CloudflareEnv ./cloudflare-env.d.ts",
    "db:generate": "npx drizzle-kit generate",
    "db:push": "npx drizzle-kit migrate",
-   "test": "jest",
+   "test": "jest --runInBand --detectOpenHandles --forceExit",
+   "predeploy": "npm run test",
+   "prepreview": "npm run test"
  },
}

testコマンドについて
jestに --runInBand --detectOpenHandles --forceExitオプションをつけない場合、テストが正常に完了しても、プロセスが完了せず、buildコマンドが実行されません。

おわりに

GitHubActionsで苦労したからか、GUIで簡単にデプロイができることにありがたみを感じます。

参考