はじめに
Next.jsアプリでCI/CDを構築しようとしたところ、Firebaseへのデプロイする方法がわからず、数時間格闘しました。今後のために備忘録としてまとめました。
結論
公式ドキュメントの通りに行えば可能でした。
試してみる
前提条件
Next.jsアプリを作成、GitHubに登録済で実施しています。
1.firebaseにアクセス
ログイン後、画面右上のGo to consoleでコンソールに移動します
Firebase プロジェクトを作成するをクリック
プロジェクト名を入力します
ここからは、任意で有効にし、続行ボタンを押下
プロジェクト作成ボタンを押下
プロジェクト作成完了
2.Blazeプランにアップグレード
Next.js をFirebaseにてデプロイする（Firebase App Hosting を利用する）には有料のBlazeプランへの登録が必要です。
公式ドキュメントより引用
Firebase App Hosting を設定する前に、Firebase プロジェクトを作成（まだ作成していない場合）し、Blaze プランにアップグレードする必要があります。
プロジェクト作成後、左下のアップグレードボタンを押下
Blazeのプランを選択ボタンを押下
Firebaseのお支払いを選択を押下
（クレジットカードや住所の登録を求められます。）
予算設定額を入力
私は100円を設定しました。利用額が超えるとアラートメールを受け取れます。
Cloud 請求先アカウントをリンクを押下
登録完了
3.App Hostingの設定
プロジェクト画面下のすべての Firebase 機能を表示をクリック
App Hostingをクリック
始めるを押下
リージョンを選択
GitHubリポジトリをインポート
リポジトリを選択
デプロイしたいブランチを選択
終了してデプロイを押下
4.プロジェクト設定ファイル作成
ローカルのターミナル上でコマンドを実行
$ firebase init apphosting
Use an existing projectを選択
作成したプロジェクトを選択
Link to an existing backendを選択
Which backend would you ~ ?でリンクしたいバックエンドを聞かれるので、作成したバックエンド名を入力
FirebaseコンソールのApp Hostingを選択すると名称が載っています
firebase.jsonの配置先を入力（/を入力しました。）
設定完了
Firebase設定ファイルが作成されます
5.バックエンドの構成管理設定
インスタンスの数を設定しないと、高額請求がくる可能性があるそうです。（怖い）
ローカルで、プロジェクト直下のapphosting.yamlファイルを編集
# Settings for Backend (on Cloud Run).
# See https://firebase.google.com/docs/app-hosting/configure#cloud-run
runConfig:
minInstances: 0
maxInstances: 2
# concurrency: 80
# cpu: 1
# memoryMiB: 512
# Environment variables and secrets.
# env:
# Configure environment variables.
# See https://firebase.google.com/docs/app-hosting/configure#user-defined-environment
# - variable: MESSAGE
# value: Hello world!
# availability:
# - BUILD
# - RUNTIME
# Grant access to secrets in Cloud Secret Manager.
# See https://firebase.google.com/docs/app-hosting/configure#secret-parameters
# - variable: MY_SECRET
# secret: mySecretRef
6.CI/CDパイプラインの構築
package.jsonにprebuildスクリプトを追加する
{
"name": "tech-blog",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest",
+ "prebuild": "npm run test"
},
Firebase App Hostingの仕組みより、これまでの設定でGitHubにpushすると自動でデプロイできるようになります。
デプロイ前に、テストを実行、テストが成功した場合をトリガーにデプロイをしたかったのですが、なかなかうまくできませんでした。
Firebase App HostingはNext.jsを検出すると、独自のビルドパイプラインを使用しているそうです。
prebuildは、npmがbuildスクリプトを実行する前に自動的に実行されます。
（preXXXXの形式でスクリプトを作成するとXXXXスクリプト前に自動で実行してくれる）
Firebase App Hostingがnpm run buildを実行する場合も同様で、prebuild時にnpm run testを指定することでビルド前のテスト実行を実現できました。
わざとテストを失敗させたときのFirebaseコンソール
おわりに
GitHubActions以外でもCI/CDができることを知りました。ここまでに相当時間がかかってしまいましたが、良い学びになりました。
npmのスクリプト公式ドキュメントを調べると色々あって、少し知識の幅が広がったと感じています。
preのほかにもpostもあるそうです。今後何かに使えるかもと思いました。
参考