アルパカログ

先日、下記の記事で Next.js のホスティング先候補として Firebase が現実味を帯びてきていることを知りました。

Next.jsのホスティング先としてFirebaseは『かなりアリ』な選択肢になっている

https://zenn.dev

このブログ（アルパカログ）は現在 Cloud Run で動かしており、Cloud Run 自体にはほぼ費用はかからないのですが、CDN を使うために設置している Cloud LoadBalancing で費用が発生しています。

円安の影響もあり、8月は¥3,000近くになってしまいました。

上記のブログで紹介されている firebase-framework-tools によると、Spark プラン（無料プラン）だと SSR は動かないものの、Blaze プラン（従量課金プラン）にすれば SSR も動作するとのことだったので、早速試してみました。

GitHub - FirebaseExtended/firebase-framework-tools: Experimental addon to the Firebase CLI to add web framework support

Experimental addon to the Firebase CLI to add web framework support - FirebaseExtended/firebase-framework-tools

https://github.com

先に結論を述べておきますと、原因不明でまだ動作させることはできていません。

firebase-framework-tools 自体がまだ Experimental なのでこれからなのかもしれません。

以下に試したことを書いておきますので、もし知見のある方がいらっしゃいましたらご教授ください。

Firebase CLI リファレンス に従って最新版の Firebase CLI をインストールします。

インストールしたバージョンは 11.8.0 でした。

% firebase --version
11.8.0

Firebase コンソール からプロジェクトを追加し、Web アプリを追加します。

料金プランはデフォルトで Spark プラン（無料プラン）になっているので、SSR を使うために Blaze プランにアップグレードしておきます。

firebase-framework-tools の README に従って Firebase プロジェクトを初期化します。

ローカルでこのブログのディレクトリに移動し下記コマンドを実行します。

firebase --open-sesame frameworkawareness
firebase login
firebase init hosting

対話形式で設定していきます。ビルドコマンドは npm run build とします。

初期化で生成された public/index.html を削除します。

rm public/index.html

ルートディレクトリに firebase.json が生成されるので、下記の内容に書き換えます。

{
  "hosting": {
    "source": ".",
    "cleanUrls": true
  }
}

.firebase/[PROJECT_ID]/functions/ ディレクトリに .env ファイルを作成し NOTION_API_SECRET など必要な環境変数を記載します。

NOTION_API_SECRET=abcde
DATABASE_ID=abcde
...

ローカルで動作確認します。

firebase serve

ローカルでは正常に動作することを確認できました。

Firebase にデプロイします。

firebase deploy

デプロイ中、下記のようなエラーが出ますが、デプロイは成功します。

Error occurred prerendering page "/blog". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Error for page /blog: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export

デプロイ後、ホスティングURLにアクセスすると 500 エラーになります。

Functions のエラーが見つからず、原因はわかりません。

以上です。

この記事では SSR を含む Next.js を Firebase にデプロイしたがまだ動作しないことについて書きました。

今後また試して動くようになったら別の記事で取り上げたいと思います。