firebaseでホスティングしたNext.jsをGithubActionsでCI/CDする

VercelやNetlifyは使ったことありますが、
最近はGoogleCloudが提供しているfirebaseでホスティングするのが主流と聞いて、
せっかくなのでNext.jsで作ったWebアプリをホスティングしてみようと思いました。

さらにGitHub Actionsを使えば本番ブランチにプッシュされると同時にFirebaseにデプロイもされるということなので
この機会に全部やってしまおうと思った次第です。

Firebaseでプロジェクトを作成する

Firebaseのコンソールにアクセスしてプロジェクトを作成する

プロジェクト名を決める

GoogleAnalyticsの設定をする（やらなくても良い）

GAのアカウント名を決める

地域と設定、規約への同意を入力

プロビジョニングが終わるまで待つ（1分くらい）

Webアプリをホスティングする

Webアプリ名を入力する

Next.jsをFirebaseにデプロイする

ターミナルでNext.jsのプロジェクトを作成する

% npx create-next-app@latest --typescript PROJECT_NAME
...
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
...
Success! Created 〜〜〜

ターミナルでFirebase CLIをインストールする

% npm install -g firebase-tools

changed 642 packages in 24s

69 packages are looking for funding
  run `npm fund` for details
%

ターミナルでFirebaseにログインする

% firebase login

プロジェクトを開始する

% firebase init

# 「→」の先の文言が選択した選択肢です
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm
your choices. 
→Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: →Use an existing project
? Select a default Firebase project for this directory: →my-pf-site (my-pf-site)
i  Using project my-pf-site (my-pf-site)

=== Hosting Setup
? Detected an existing Next.js codebase in the current directory, should we use this? →Yes

? In which region would you like to host server-side content, if applicable? →asia-east1 (Taiwan)
# 日本から一番近い場所を選んだ方が遅延も少なくなるので台湾を選択

? Set up automatic builds and deploys with GitHub? No
# ここは後で設定する

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

FirebaseにWebフレームワークであること（=デプロイ時にビルドが必要なプロジェクト）を認識させる

firebase experiments:enable webframeworks

デプロイできるかここで確認する

% firebase deploy

Error: Your project my-pf-site must be on the Blaze (pay-as-you-go) plan to complete this command. Required API artifactregistry.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:

無料プランじゃデプロイできないみたいなのでBlaze（従量課金プラン）に変更する
続きに記載されているURLからプランを変更する

プラン変更後、再度デプロイする

% firebase deploy

✔  Deploy complete!
Project Console:〜〜〜
Hosting URL:〜〜〜

Hosting URLからデプロイ結果を確認できる

Next.jsのプロジェクトがデプロイできた

GitHub ActionsでCI/CDを設定する

GitHubでリポジトリを作成する

Firebase HostingでGithub Actionsを有効化する

% firebase init hosting:github

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) nekihcom/REPO_NAME

# デプロイされる前に毎回ビルドしますか？
? Set up the workflow to run a build script before every deploy? Yes

# ビルド前にどのようなスクリプトを実行しますか？
? What script should be run before every deploy? npm ci && npm run build

# プルリクがマージsれるときに本番環境に自動デプロイしますか？
? Set up automatic deployment to your site's live channel when a PR is merged? Yes

# 本番環境に適用するブランチは何ですか？
? What is the name of the GitHub branch associated with your site's live channel? main

✔  Firebase initialization complete!

プロジェクトに作成された.firebaseを追跡対象外にする
容量がかなり多いのでコミットに含めないようにする

.gitignore

+ /.firebase/

試しに適当にpage.tsxを編集してみる（デプロイ確認用）

src/app/page.tsx

          <li>
            Get started by editing <code>src/app/page.tsx</code>.
          </li>
          <li>Save and see your changes instantly.</li>
+          <li>デプロイテストします。</li>

ここまでできたらコミット&プッシュする

トラブルシュート

GitHubでデプロイ結果を確認する

う〜ん、、、失敗しているので結果を確認する

設定変数が足りないよって言われている

Error: Cannot deploy a web framework from source because the experiment webframeworks is not enabled. To enable add a FIREBASE_CLI_EXPERIMENTS environment variable to .github/workflows/firebase-hosting-merge.yml, like so: 
  
  - uses: FirebaseExtended/action-hosting-deploy@v0
    with:
      ...
    env:
      FIREBASE_CLI_EXPERIMENTS: webframeworks

.github/workflowsにあるCI/CDの設定ファイルを編集する

firebase-hosting-merge.yml

    with:
     ...
+   env:
+    FIREBASE_CLI_EXPERIMENTS: webframeworks

firebase-hosting-pull-request.ymlも同様に編集する

再度コミット＆プッシュ
しかしまた失敗

Cloud Billing API has not been used in project 817697110686 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/cloudbilling.googleapis.com/overview?project=817697110686 then retry. 
If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

Cloud Billing APIを有効化する必要があるらしい
記載のURLにアクセスする

APIを有効にする

保存して再度デプロイ
→デプロイ成功！

アプリの本番環境へアクセス

先ほどのpage.tsxの修正が反映されていることも確認できた！

参考