こんにちは！SSRを刺されと読むMizutani(@sirycity)です。CSRは腐れです。

今日はFirebaseとAstroとSSRについてです。

結論

Firebase Hosting(とFunctionsとCloud Run)ではAstroをSSRモードで動かすことができます。だが設定が本当にめんどい。

はじめに

Firebase hosting(以下hosting)は静的サイトのホスティングサービスです。で、Astroは静的サイトジェネレーターです。つまりAstroで作ったWebサイトはhostingにデプロイできます。まあ当たり前ですね。

hostingのサーバーサイドレンダリング(SSR)について

hostingは一部のFWについては例外的にサーバーサイドレンダリング(以下SSR)をサポートしています。サポートしてるFWは以下の通り。

FirebaseExtended/firebase-framework-tools

はい、Astroがありましたね。AstroもhostingでSSRできます。

資料が少ない

ここで問題なんですがhostingでAstroのSSRをする方法、まじで資料が少ないです。だからこの記事書こうと思ったんですけどね。10時間も悪戦苦闘した腹いせじゃないですよ。

まあなんで少ないかって、AstroのSSRはVercelとCloudflareが人気すぎるからです。Netlifyですらそんな無いですしね。

コードで気をつけるポイント

ここからは僕が10時間、試行錯誤の末に判明した内容を綴ります。もう二度と、設定で苦しむ人がいないように。

typeはmoduleに

{
  "type": "module"
}

これしないとエラーになります。なんでかって？ほら、ESMとCJSのやつですよ。Jestでよく出るエラーです。すいません。分かりません。

firebase.jsonを書き換え

まずはhostingのpublicを消します。静的サイトのビルド後のディレクトリ名を定義するやつね。これ。

{
  "hosting": {
    "public": "out"
  }
}

これは消して、代わりに"source": "."を追加します。他は通常のhosting&Astroの設定と一緒。

{
  "hosting": {
    "source": "."
  }
}

Astroの設定ファイルを追記

以下追記します。

import node from '@astrojs/node'

export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' })
})

outputはとりあえずserverにしときましょう。ここは別に後から簡単にhybridにできます。

その後のアダプターはnodeを選択します。日本語版のドキュメントには書いてないですが原本にあります↓

Deploy your Astro Site to Google’s Firebase Hosting

あとadapterにvercelを使ってるコードを頻繁に見ますが忘れてください。いいですね。一次資料を信じましょう。

modeについてもとりあえずstandaloneでいいでしょう。ここも別にmiddlewareでもデプロイは問題ないです。

GCPで気をつけるポイント

サービスアカウントの設定

前提としてFirebaseへのログインはGCP経由でするようになりました。簡単に言うとGCPでサービスアカウントを発行してAPIキーを発行してそいつでログインすることになります。一応CLIからもログインできますが今回は割愛。

んで、そのサービスアカウントの権限の付与ですがCloud Functions 管理者が必要です。なんでかは知りません。何か起こっても自己責任でお願いします。CIがコケた時にこれ追加しろって出てきたんです。

課金を有効にする

そのまんまです。GCPの課金です。これはまあ、最初にCloud Functionsを開いた時にGCP側から聞いてきてくれるので忘れることは無いと思います。

APIを有効化する

GCPからこの4つのAPIを有効化します。

• Cloud Functions API
• Cloud Run Admin API
• Cloud Build API
• Eventarc API

下3つは無効化していてもCIがコケたタイミングで聞いてきてくれるのでまだいいでしょう。Functions APIは有効化し忘れても教えてくれません。ただCIがコケるだけです。

デプロイで気をつけるポイント

フレームワークの対応を明示する

deployの前にこのコマンドが必要です。

firebase experiments:enable webframeworks

フレームワークのサポートは実験的なのでそれをアクティベートするコマンドです。そのうち必要なくなるでしょう。と言い続けてもう2年になります。

デプロイは両方する

デプロイはhostingとfunctions両方しましょう。まあ構成次第では片方でいい場合もありますけどね。こんなかんじ。

firebase deploy --only functions,hosting:【firebase.jsonのhostingのtargetの名前】

プレビューモードについて

プレビューモードではSSRは使えません。諦めましょう。そのうち使えるようになるそうです。と言ってもう1年になります。

さいごに

…ややこしい！とりあえずこれでデプロイまではいけるでしょう。修正あったら追記します。以上。