Open17

Firebase App Hosting 試す

nbstshnbstsh

Default Service Account

App Hosting が利用する default service account はこちら↓

firebase-app-hosting-compute@PROJECT ID.iam.gserviceaccount.com

nbstshnbstsh

Pricing

App Hosting が裏側で利用している GCP の以下サービスの利用料がかかる

  • Cloud Run
  • Cloud Build
  • Artifact Registry
  • Cloud Secret Manager
  • Cloud Logging
nbstshnbstsh

Firebase Hosting の Next.js の deploy との違いは...?

For Next.js or Angular apps deployed to Firebase Hosting using the frameworks experiment in the Firebase CLI, we recommend "graduating" to App Hosting. With App Hosting, you'll have a unified solution to manage everything from CDN to server-side rendering, along with improved GitHub integration.

Firebase Hosting が提供していた firebase cli による Next.js/Angular の deploy はもう選択肢から除外して良さそう

https://firebase.google.com/docs/app-hosting/product-comparison#development-lifecycle

nbstshnbstsh

Getting Started

公式 Doc の Get Started やってみる

sample app 作成して全体感掴みたいので、npm init @apphosting で Next.js project scaffolding してみる。

npm init @apphosting

Next.js v15 AppRouter の project が scaffold される。

ssg/ssr/isr それぞれの sample page が用意されてる。いい感じ。

ssg

http://localhost:3000/ssg

ssr

http://localhost:3000/ssr

suspense による streaming の例も用意されてる
http://localhost:3000/ssr/streaming

isr

http://localhost:3000/isr

time-based revalidation

http://localhost:3000/isr/time

on-demand revalidation

http://localhost:3000/isr/demand

nbstshnbstsh

github repo 作成

github repository 作成して push しておく。

nbstshnbstsh

firebase console から App Hosting 設定

location 選択する。現状最も tokyo に近い asia-east1 を選択しとく。

"GitHub リポジトリをインポートする" に進む。

GitHub account の接続作業行う。GCP に飛ばされるので進めていく。

GitHub にログインした状態で "I understand and continue" クリック。Authorize する。

GitHub 側で Firebase App Hoting の GitHub App を install し repository 等設定。

これで Google Developer Connect の準備完了したはず。
ちゃんと GitHub アカウントに接続した organization 出てきた。

ただ、repository が選択肢に出てこない...

Google Developer Connect 用に認証した GitHub robot account の repository 内の role を admin に変えたら解決した

デプロイ設定。

ID を指定する。

"新しい Firebae ウェブアプリを作成する" を選択して "終了してデプロイ" をクリック。

エラー起きた

Permission "devconnect.gitRepositoryLinks" denied on "codebase.repository"

何もしていないが、再度 "終了してデプロイする" をクリックしたらエラー起きずに次に進めた.... bug か...?

deploy が始まっているっぽい↓

nbstshnbstsh
nbstshnbstsh

CD 確認

コードに変更を加えて push する。

firebase console から確認すると新しい build が実行されていることがわかる↓

数分で deploy 完了。変更が反映されていること確認。

nbstshnbstsh

static site にするとどうなる?

app 全体を SSG にして push してみる。

next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
};

export default nextConfig;

rollout 完了したのでサイト確認

Service Unavialable になった

Cloud Run の log 確認するとエラー出てた。

Dockerfile 確認できないけど、おそらく standalone 前提なので static export では App Hosting は
利用できない。(普通に Firebase Hosting を使えばいいし、わざわざ Cloud Run に乗っける必要性もないとは思う)

nbstshnbstsh

revert しても Cloud Run で同様のエラーが出続ける

static export を取り消して元の状態に revert した状態のものを push したところ Firebase App Hosting の rollout が失敗した。

Cloud Build 自体は成功しているものの、Cloud Run 実行時に先ほどと同様の "Error: Cannot find module '/workspace/.next/standalone/server.js..." が発生している。

なぜ? cache ...?

nbstshnbstsh

Cloud Run console から確認すると、revert commit に紐づく Cloud Run revision は問題なく deploy できてそう。エラーが発生した revision に request が飛んでるみたいなので traffic を Latest Healty Revision に変更してみる。

再度アクセスする。
だめだ。Service Unavailable のまま。

log 見た感じまだエラーが起きていた revision にアクセスしている感じがするぞ...?

nbstshnbstsh

エラー解決

再度 rollout したらエラー解消した。問題なくサイトにアクセスできた。

対処法まとめると、Cloud Run console から revision を手動で変更してから Firebase App Hosting console から新規 rollout 作成。

nbstshnbstsh

だいぶブラックボックスだから何かエラーが起きた時の対応がしんどそうだな...ある程度裏側で何が起きているか把握しておかないと詰みそう

nbstshnbstsh

Deploy multiple environments from a codebase

development/staging/production のように複数環境に deploy する際の設定も可能。

https://firebase.google.com/docs/app-hosting/multiple-environments

apphosting.ENVIRONMENT_NAME.yaml を用意し各環境の設定を記述すれば良い。

ENVIRONMENT_NAME は App Hosting の dashboard から設定できる。

apphosting.yaml を用意しておけば各環境の fallback として利用される。