WindowsでFirebaseプロジェクトを作成してホスティングする

Firebaseプロジェクトを作成します。ログインしてからinitコマンドを実行します。

C:\test>firebase login
~省略~
C:\test>firebase init

initコマンドでインタラクティブにプロジェクトを作成することが出来ます。

※ホスティングだけ使用する場合はfirebase init hostingコマンドで良いです

ここではサービスは以下1つを選択しました。

Firebase Hosting

ディレクトリ構成

Firebase Hosting1つだけにしたのでディレクトリ構成は上記の通りになります。

コンソール画面から確認

プロジェクトが作成されたかをコンソールから確認します。

プロジェクト名：projectx、プロジェクトID：takahashipj、でプロジェクト作成できていることが確認できます。

CLIから確認

firebase projects:listコマンドでプロジェクトのリストを確認することが出来ます。

C:\test>firebase projects:list
√ Preparing the list of your Firebase projects
┌──────────────────────┬───────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID            │ Project Number │ Resource Location ID │
├──────────────────────┼───────────────────────┼────────────────┼──────────────────────┤
│ test                 │ test                  │ 1065478106842  │ [Not specified]      │
├──────────────────────┼───────────────────────┼────────────────┼──────────────────────┤
│ Sample               │ sample                │ 987079349754   │ [Not specified]      │
├──────────────────────┼───────────────────────┼────────────────┼──────────────────────┤
│ projectx             │ takahashipj (current) │ 392913569890   │ [Not specified]      │
└──────────────────────┴───────────────────────┴────────────────┴──────────────────────┘

3 project(s) total.

（current）となっているのが現在アクティブなプロジェクトになります。

firebase useコマンドでもアクティブなプロジェクトを表示する事ができます。

C:\test>firebase use
Active Project: takahashipj

Project aliases for C:\test:

* default (takahashipj)

Run firebase use --add to define a new project alias.

C:\test>

ローカルテスト

デプロイする前にローカルで起動して動作確認します。以下コマンドを実行します。

C:\test>firebase serve

または以下コマンドを実行します。

C:\test>firebase emulators:start

http://localhost:5000/でアクセスして確認することが出来ます。

どちらのコマンドでも起動しますが、serveコマンドは非推奨となっています。

Firebase ホスティングのデフォルトポートは5000ですが、firebase.jsonでポートは変更することが出来ます。

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "emulators": {
    "hosting": {
      "port": 5001 // これでhttp://localhost:5001/に変更される
    }
  }
}

プレビュー

デプロイする前にプレビューして開発者で画面を共有して評価します。

C:\test>firebase hosting:channel:deploy <チャンネルID>

チャンネルIDを指定して上記コマンドを実行します。今回はチャンネルIDをtestとしました。

プレビューチャンネルのURL体系は以下になります。

https://<

プロジェクトID>--<チャンネルID>-<ランダム値>.web.app/

このプレビューチャンネルはデフォルト7日で有効期限が切れます。

--expires 1mなどをオプション指定すれば1分で有効期限が切れます。

オプション	有効期限
1m	1分
2d	2日
3h	3時間

全てのチャンネルのリストはfirebase hosting:channel:listコマンドで確認できます。

C:\test>firebase hosting:channel:list

Channels for site takahashipj

┌────────────┬─────────────────────┬────────────────────────────────────────────┬─────────────────────┐
│ Channel ID │ Last Release Time │ URL │ Expire Time │
├────────────┼─────────────────────┼────────────────────────────────────────────┼─────────────────────┤
│ test       │ 2021-06-18 09:21:57 │ https://takahashipj--test-2ryhte3b.web.app │ 2021-06-25 09:21:51 │
├────────────┼─────────────────────┼────────────────────────────────────────────┼─────────────────────┤
│ live       │ 2021-06-17 17:25:43 │ https://takahashipj.web.app                │ never               │
└────────────┴─────────────────────┴────────────────────────────────────────────┴─────────────────────┘

Firebaseコンソールからも確認することが出来ます。

ローカルからデプロイ

ローカルに存在するプロジェクトのpublic配下をデプロイします。

C:\test>firebase deploy --only hosting

デプロイURLは以下形式のURLにデプロイされます。（無料）

https://<

プロジェクトID>.web.app

https://<

プロジェクトID>.firebaseapp.com

プレビューからデプロイ

ローカルからデプロイするのではなく、プレビューチャンネルからクローンしてデプロイします。

C:\test>firebase hosting:clone <プロジェクトID>:test <プロジェクトID>:live
√ Cloning site content...
+ Site takahashipj channel test has been cloned to site takahashipj channel live.
+ Channel URL (live): https://takahashipj.web.app

これでtest環境をlive環境へデプロイすることが出来ます。