Firebase Hostingをローカル環境で動かす

## はじめに

ローカル環境でFirebase Hostingを利用して、Webサーバーから静的コンテンツを配信するという事ができるらしいので今回はそれを試してみた。

※以下の記事ではあえてProjectIdを見えなくしているが、本来的には公開して問題ないものになる。

ソースコード全体は以下。

https://github.com/yuta-katayama-23/firebase-trial/commit/82c093239872b30e25693baf285df2f80ca49503

## ローカル環境でFirebase Hostingのエミュレーターで静的コンテンツを配信する

まず、Firebase Hostingの初期が必要になる。初期化をしないで`firebase emulators:start`コマンドを実行しても、以下のようにwarningが出てHostingのエミュレーターの初期化に失敗する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/1a663b84-f2b1-c1d2-7ee8-7a24387e29e2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/6fe01968-0078-53a5-9472-e4df68985360.png)

`firebase init hosting`コマンドでFirebase Hostingの設定をする。今回はSPAなので全てのURLをindex.htmlにリダイレクトするように設定。また、静的コンテンツはdistディレクトリに配置するので、そのように設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/8a6586fd-297e-3e6a-4862-d8fe032e4348.png)

最終的には、firebase.jsonは以下のようになった。
```json:firebase.json
{
	...
	"hosting": {
		"public": "dist",
		"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
		"rewrites": [
			{
				"source": "**",
				"destination": "/index.html"
			}
		]
	},
	...
}
```

続いてFirebaseエミュレーターの設定を行う（Cloud FirestoreやCloud Functionsも別で試した続きなので、それらの設定も混じっているが、5000ポートがFirebase Hostingのエミュレーターのポートになる）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/6861cd3e-92d9-082c-262d-8ec1218828b4.png)

後は以下のように`firebase emulators:start`コマンドを実行して、エミュレーターを起動すればいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/9508146f-d131-84a8-f818-0b759d0d9bb7.png)

起動後は`http://localhost:5000/`にアクセスすると、以下の動画のようにSPAが開く事を確認できる。
![ezgif.com-video-to-gif (19).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/739ddc6d-8eaa-dd3d-081a-5bb86fe0af80.gif)

※ViteなどのツールのDevサーバーを使ってSPAを開発しているのであれば、Firebase Hostingのエミュレーターを利用する意味はないと思われるが、今回は試しにやってみるという意味でやってみた。

※今回試していたプロジェクトはVite＋Vue3のSPAだったので、`firebase emulators:start`の前に`vite build`を実行し、静的コンテンツを生成しておかないとHostingするものがないのでブラウザ上で確認できない。

- 参考：[ウェブアプリをローカルでテストし、変更を他のユーザーと共有して、公開サイトにデプロイする](https://firebase.google.com/docs/hosting/test-preview-deploy?hl=ja)

## プレビューで本番Deploy前の確認をしてみる

Firebase Hostingにはチャンネルという概念があり、いわゆる本番のサイトがライブチャネルで、それ以外のテンポラリーのサイトはプレビューチャネルという位置づけになる（[Hosting インフラストラクチャの概要](https://firebase.google.com/docs/hosting/manage-hosting-resources?hl=ja#hosting-infrastructure)を参照）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/2790e815-1d25-808c-3ef4-8d75a121739b.png)

今回はプレビューチャンネルを作成し、本番のサイトをDeployする前の確認をしてみたいと思う。やり方は簡単で、以下のように`firebase hosting:channel:deploy {CHANNEL_ID}`というコマンドを実行するだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/03a544ae-ecdb-a39b-822e-bed19ba5aa1f.png)

上記のコマンドでチャンネルが作成され、そのプレビューチャンネルのURLも発行されるので、以下のようにブラウザ上でサイトを確認する事ができるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/0abc2395-e105-50be-91f5-045d0fdf3bdb.png)

プレビューチャンネルはFirebaseのダッシュボード上や、CLIの`firebase hosting:channel:list`コマンドで確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/8aae629e-c9cc-8537-a5eb-c8f62740d546.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/c258c2ea-65ec-5c0f-46da-8d13eb83df08.png)

※チャンネルはCLIの`firebase hosting:channel:list`コマンドで削除できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/4d2d06d2-dcc6-008e-1e8f-396c598f9854.png)

- 参考：[ステップ 2: プレビューと共有](https://firebase.google.com/docs/hosting/test-preview-deploy?hl=ja#preview-channels)
- 参考：[サイトのライブチャネルとプレビュー チャネル、リリース、バージョンを管理する](https://firebase.google.com/docs/hosting/manage-hosting-resources?hl=ja)

## 本番のHostingにDeployする

方法は2つあり、それぞれについてみていく。

1. `firebase deploy`でDeploy
1. プレビューチャネルをライブチャネルに変更する

### `firebase deploy`でDeploy

最も単純なDeploy方式で、`firebase deploy`コマンドを実行して本番のサイトを構築する事ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/7c2adf04-a4e0-be57-98af-71dbb48b5660.png)

### プレビューチャネルをライブチャネルに変更する

この方法は上記の[プレビューで本番Deploy前の確認をしてみる](#プレビューで本番deploy前の確認をしてみる)で作成したプレビューチャネルをライブチャネル（本番のサイト）に変更するもの。

まずは、プレビューチャネルを`firebase hosting:channel:deploy {channel_id}`コマンドで作成し、次に`firebase hosting:clone {project_id}:{channel_id} {project_id}:live`コマンドでliveチャネルにクローンする。これで本番のサイトへのDeployが完了する（この方式だとプレビューチャネルとライブチャネルの2つが存在する状態になるので、プレビューチャネルが不要なのであれば削除するのがいいだろう）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/97fbe7f2-cd18-a1eb-fb80-75f31d6e23b1.png)

※本番にDeployした後、Hostingを無効にするには`firebase hosting:disable`コマンドを実行すればいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/67460859-8d93-1d5c-c379-97cfa520b12d.png)

このコマンドを実行すれば、以下のようにFirebase HostingのURLは残るが何も表示されないように設定できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/28a50061-c436-5ef8-55ea-a1ff2fb3329d.png)

- 参考：[ステップ 3: 公開サイトにデプロイする](https://firebase.google.com/docs/hosting/test-preview-deploy?hl=ja#deploy-live)

## まとめとして

今回はFirebase HostingをFirebaseエミュレーターを利用してローカル環境で動かすという事をやってみた。また、チャンネルの機能を利用してプレビューを確認したり、プレビューから本番のライブチャンネルを作成（本番環境へのDeploy）もやってみた。

プレビューチャネルの機能は個人的には初めて知ったので、今後これを活用して本番リリース前に確認するみたいなことや、MR・PRなどでプレビューのサイトURLを生成しマージ前に確認する、みたいなこともやってみたいと思った。