Firebase App Hosting 試す
公式 Doc
とりあえず公式 Doc 読み進める
Locations
現状 (2024/11/20) サポートされている region は以下3つ。tokyo はない。
- us-central1 (Iowa)
- asia-east1 (Taiwan)
- europe-west4 (Netherlands)
Default Service Account
App Hosting が利用する default service account はこちら↓
firebase-app-hosting-compute@PROJECT ID.iam.gserviceaccount.com
Pricing
App Hosting が裏側で利用している GCP の以下サービスの利用料がかかる
- Cloud Run
- Cloud Build
- Artifact Registry
- Cloud Secret Manager
- Cloud Logging
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 はもう選択肢から除外して良さそう
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
github repo 作成
github repository 作成して push しておく。
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 が始まっているっぽい↓
ちゃんと deploy できていること確認
CD 確認
コードに変更を加えて push する。
firebase console から確認すると新しい build が実行されていることがわかる↓
数分で deploy 完了。変更が反映されていること確認。
static site にするとどうなる?
app 全体を SSG にして push してみる。
/** @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 に乗っける必要性もないとは思う)
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 ...?
Cloud Run console から確認すると、revert commit に紐づく Cloud Run revision は問題なく deploy できてそう。エラーが発生した revision に request が飛んでるみたいなので traffic を Latest Healty Revision に変更してみる。
再度アクセスする。
だめだ。Service Unavailable のまま。
log 見た感じまだエラーが起きていた revision にアクセスしている感じがするぞ...?
エラー解決
再度 rollout したらエラー解消した。問題なくサイトにアクセスできた。
対処法まとめると、Cloud Run console から revision を手動で変更してから Firebase App Hosting console から新規 rollout 作成。
だいぶブラックボックスだから何かエラーが起きた時の対応がしんどそうだな...ある程度裏側で何が起きているか把握しておかないと詰みそう
Deploy multiple environments from a codebase
development/staging/production のように複数環境に deploy する際の設定も可能。
apphosting.ENVIRONMENT_NAME.yaml
を用意し各環境の設定を記述すれば良い。
ENVIRONMENT_NAME は App Hosting の dashboard から設定できる。
apphosting.yaml
を用意しておけば各環境の fallback として利用される。