fireball

AngularとFirebaseでマルチホスティングする方法

Firebase HostingでAngularなどのSPAを公開する場合、エンドユーザーのページと、管理者の画面とを分けたいという要求があるかと思います。それが同じプロジェクト内で実現できれば便利ですよね。

そこで今回は、AngularとFirebase Hostingでマルチホスティングを実現する方法をご紹介します。

Firebaseのコンソールからマルチサイトの設定をする

まず最初にFirebaseのコンソールからサイトを追加します。

今回はthis-is-multisiteという名前にします。

Angularプロジェクト内でマルチホスティングの設定をする

firebase initによる初期化

コンソール側で設定が出来たら、ローカル側の設定に移ります。

まずはお決まりの初期化コマンドでプロジェクトをFirebase対応にします。

firebase init

今回はHostingだけ利用しますので、Hostingのみを選択します。

使用するプロジェクトを選択します。今回はFirebaseTestProjectを選択します。

次に以下のように公開フォルダを問われます。ここはデフォルトでpublicとしておけば良いでしょう。

What do you want to use as your public directory? (public)

次にSPAかどうかを聞かれます。これもYesでよいでしょう。

Configure as a single-page app (rewrite all urls to /index.html)?

最後にpublicディレクトリ内に出来たindex.htmlファイルは使わないので消去します。念のため.gitkeepファイルを置いておいても良いでしょう。

マルチホスティングの設定

次に以下のコマンドでマルチホスティングの設定を行います。

firebase target:apply hosting target-name resource-name

target-nameには任意の文字(userやadminなど)、resource-nameにはコンソール画面で決めたサイト名を入れます。今回の例だと「this-is-multisite」です。下画像のように、コンソール画面からも確認が出来ます。

今回は管理画面を公開するものとしてadminという名称にしてみます。以下のコマンドを実行することになります。

firebase target:apply hosting admin this-is-multisite

.firebasercファイルが作成されているはずです。このファイルにマルチホストの情報が含まれています。

{
  "projects": {
    "default": "fir-testproject-e3e36"
  },
  "targets": {
    "fir-testproject-e3e36": {
      "hosting": {
        "admin": [
          "this-is-multisite"
        ]
      }
    }
  }
}

firebase.jsonファイルの変更

次にfirebase.jsonファイルをAngular向けにカスタマイズします。

"hosting": [
    {
      "target": "admin",
      "public": "public",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "/**",
          "destination": "index.html"
        }
      ]
    }
  ]

複数のサイトをホスティングできるように、hostingキーに配列を持たせています。今回は配列内にtargetキーにadminを指定したオブジェクトしか挿入しませんでしたが、サイトを増やしたいのならば、配列内のオブジェクトを増やせば何個でも増やせます(前述のtarget:apply hostingコマンドでtarget-nameに指定した名前をtargetキーに指定したオブジェクトを増やせばいいだけです)。

Angularをビルドする

ここまできたらいよいよ終盤です。デフォルトのpublicディレクトリにAngularをビルドします。

npx ng build --outputPath=./public

デプロイする

ついにデプロイです。以下のコマンドを実行します。

firebase deploy --only hosting:admin

デプロイ結果にはURLも表示されますので、それを踏みます

結果は以下の通りです。無事にデプロイできました。

SPAのデプロイならFirebase一択

以上でAngularをFirebaseにマルチホスティングする方法のご紹介を終えます。AWSでもS3とCloudFrontを使ってホスティングする方法はありますが、なかなかここまで簡単にはデプロイ出来ません。現状SPAのデプロイ先としてFirebaseは最有力候補と言えます。

では良いFirebaseライフを!