Firebase App Hosting試してみた

はじめに

修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。

Firebase App Hostingとは

記事執筆現在、パブリックプレビューで提供されている機能です。
GitHubと連携することで、プッシュするだけでFirebase App Hostingにデプロイされます。
Cloud Buildでビルドされ、Cloud Runにデプロイされ、Cloud CDNでキャッシュされる構成が自動で行われます。
私のようなGCP初心者でも簡単にWebアプリケーションをデプロイできるので、試してみました。
対応フレームワークはAngularとNext.jsですが、今回はAngular勉強用に作ったいい感じのアプリがあったのでAngularで試してみました。

https://github.com/riya-amemiya/angular-study

やり方

初回のアプリはFirebaseのコンソールから行えます。
2つ目以降はFirebase CLIを使います。

GitHubとの連携

まずはGitHubとの連携して、取り込むリポジトリを選択します。

対象のブランチを選択

自動ロールアウトを有効にしておくと、対象のブランチにプッシュされたら自動でデプロイされます。

バックエンドの設定

バックエンドのidを設定します。
これがCloud Runのサービス名になるので、わかりやすい名前を設定しておきましょう。

デプロイ

最後に「終了してデプロイ」をクリックするとデプロイが始まります。

Cloud Buildでビルドされ、Cloud Runにデプロイされます。

注意点

Bunには対応していないので、Bunをやめるかyarn.lockを出力するようにしてください。

設定ファイルに以下を追加します。

bunfig.toml

[install.lockfile]
print = "yarn"

もしくは、以下のコマンドでyarn.lockを出力できます。

bun install -y

Angularを使っている場合、application builder以外はサポートされていません。

Only the Angular application builder is supported. Please refer to https://angular.dev/tools/cli/esbuild#for-existing-applications guide to upgrade your builder to the Angular application builder.

マイグレーションは以下のコマンドで行います。

ng update @angular/cli --name use-application-builder

https://angular.dev/tools/cli/esbuild#for-existing-applications

デプロイ後

デプロイ後、こんな感じでダッシュボードに表示されます。

右上の縦3点をクリックすると、それぞれのサービスへのリンクが表示されます。

不便な点

Firebase側の管理画面からは設定をいじれないのはちょっと不便ですね。
Firebase側からできることはカスタムドメインの設定と手動でのデプロイ(ロールアウト)のみです。
多くの操作はCLIで行う必要があります。

  apphosting:backends:list [options]                             list Firebase App Hosting backends
  apphosting:backends:create [options]                           create a Firebase App Hosting backend
  apphosting:backends:get [options] <backend>                    print info about a Firebase App Hosting backend
  apphosting:backends:delete [options] <backend>                 delete a Firebase App Hosting backend
  apphosting:secrets:set [options] <secretName>                  create or update a secret for use in Firebase App Hosting
  apphosting:secrets:grantaccess [options] <secretName>          grant service accounts permissions to the provided secret
  apphosting:secrets:describe <secretName>                       Get metadata for secret and its versions.
  apphosting:secrets:access <secretName[@version]>               Access secret value given secret and its version. Defaults to accessing the latest version.

まとめ

AngularのアプリをFirebase App Hostingにデプロイしてみました。
管理画面からボタンをぽちぽちするだけでデプロイできるので、とても簡単でした。
構成もブラックボックスではなく、普通のGCPのサービスで構成されているので、自由度も高いです。
Next.jsやAngularの新しいデプロイ先として全然ありだと思います。