1つのFirebase Hostingに2つ目のサイトをデプロイしたいときに読む記事
Firebaseにはマルチサイト機能というのがあり、1つのFirebaseプロジェクトで複数サイトをデプロイすることができます。
別々のサイトとして扱いたいが、Firebase Authなどのリソースは同じものを使いたいという場合に非常に便利です。
例えば社内向けのツールを開発していて、サイトとしては分けたいがログインできるユーザーは同じにしたい時などに使えます。
マルチサイト機能では、Firebase プロジェクトごとに最大 36 個のサイトがサポートされます。
最大36サイトまで1つのプロジェクトで管理できるようです。
今回は以下の状況を想定して解説します
・すでに1つ目のサイトがデプロイされている
・1つ目のサイトとはコードベース（リポジトリ）が別々
・Next.js 13.5.2
Firebase側の作業
Firebaseプロジェクトを開いてHostingページに移動してください。
「別のサイトを追加」というボタンがあるのでクリックします。
お好きなサイトIDを入力してサイトの追加をクリックしてください。
これがサイトのURLになります。
以下のように2つ目が追加されていればOKです。
Firebase側の作業は以上になります！
ソースコード側の作業
コマンドで操作するのでFirebase CLIが入っていない場合はインストールしましょう。
すでにデプロイされている1つ目のサイトのソースコードは変更する必要がないので2つ目のサイトで作業を進めてください。
以下のコマンドでFirebase Hostingのセットアップを開始します。
$ firebase init hosting
いくつかプロジェクトについて質問されるので答えていきましょう。
こちらを参考にするといいです。
# Next.jsなのでoutディレクトリにしておきます
? What do you want to use as your public directory? out
? Configure as a single-page app (rewrite all urls to /index.html)? No
# 自動デプロイを設定する場合はYesにしてください
? Set up automatic builds and deploys with GitHub? No
完了すると firebase.json, .firebasercが作成されます。
作成された時点ではそれぞれ以下のような内容になっていると思います。
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
}
{
"projects": {
"default": "project-id"
}
}
続いて、以下のコマンドを実行してください。
TARGET_NAMEはなんでもよくてサイトIDはFirebase側の作業で指定したIDを入力します。
TARGET_NAMEをつけることで1つ目のサイトと2つ目のサイトのどちらにデプロイするのかを区別できるようになるというわけです。
$ firebase target:apply hosting [TARGET_NAME] [サイトID]
例
$ firebase target:apply hosting secondary-site my-secondary-site
すると、.firebasercがこのように変わります。
{
"projects": {
"default": "project-id"
},
"targets": {
"project-id": {
"hosting": {
"secondary-site": [
"my-secondary-site"
]
}
}
},
"etags": {}
}
続いてfirebase.jsonを編集します。
targetにTARGET_NAMEを、publicはNext.jsなのでoutに変えてください。
{
"hosting": {
"target": "secondary-site",
"public": "out",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
}
next.config.jsを編集します。
trailingSlash: trueを記述しないとトップページ以外にアクセスしても404ページになります。
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export", ← 追加
trailingSlash: true, ← 追加
}
module.exports = nextConfig
package.jsonに以下を追加してください。
.
.
.
"lint": "next lint",
"export": "next export" ← 追加
実際にデプロイ
実際にコードをビルドしてデプロイしてみます。
yarn build && yarn exportを実行してビルドしましょう。
その後、以下のコマンドで2つ目のサイトをデプロイ。
TARGET_NAMEを明示することで2つ目のサイトにデプロイしてくれます。
firebase deploy --only hosting:TARGET_NAME
例
firebase deploy --only hosting:secondary-site
Deploy complete!が表示されれば成功です！
2つ目のサイトでもFirebase Authenticationを使う場合
新しいドメインなので認証済みドメインに追加しておきましょう。
これがないと認証ができません。
おわりに
複数サイトのデプロイもFirebaseなら簡単にできることがお分かりいただけたかと思います。
ぜひお試しあれ！
Discussion