Firebase HostingでAstroをSSRモードにして動かす時の設定
こんにちは！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は以下の通り。
はい、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を選択します。日本語版のドキュメントには書いてないですが原本にあります↓
あと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年になります。
さいごに
...ややこしい！とりあえずこれでデプロイまではいけるでしょう。修正あったら追記します。以上。