2021/05/10

firebase で開発する際に，ステージング環境がよくわからず，ぶっつけ本番でデプロイするという綱渡りのようなことをこれまでしてきた．

特に誰が見てるわけでもなさそうなので構わないのだが，あまりクールじゃないので，ステージング環境(staging env)と本番環境(production env)をそれぞれ別の firebase プロジェクトにし，コマンドによってステージングとデプロイを使い分けられる設定をした．

これでだいぶ QoL 上がりそう．

少なくとも，心がひんやりすることは無くなりそうだ．

実行環境

Ubuntu 20.04 LTS
npm
firebase

今回は，create-react-appで作ったままの状態の react アプリを使うことにする．

アイデア

firebase はプロジェクトをいくつも作ることができるので，一つの作りたいアプリに対して複数のプロジェクトを作って，それぞれを本番環境およびステージング環境として運用しようと思う．

ここでは，ステージング環境にデプロイ(?)することをステージングと，本番環境へデプロイすることを単にデプロイと呼ぶことにする．

作ったプロジェクト

今回は，以下２つのプロジェクトを Firebase コンソール上で作成した．

firenv-stage: ステージング環境

firenv-prod : 本番環境

準備

1. react プロジェクト作成

$ npx create-react-app firebase-switch-prod-stage --template typescript

2. firebase の初期設定

まずは，firebase の初期設定をする．ここで，project を選択するが，安全のためステージング環境を選択してほしい．

$ firebase init

# 1. "Hosting: ..."のところでスペースを押してEnter!
# 2. "What do you ...?" にはbuildと答える
# 3. "Configure as a single-page app?" にはyと答える
# 4. "Set up ...?" にはとりあえずNと答える(そのままEnter押してもいい)
# 5. "File ... Overwrite?" はNと答える(そのままEnter押してもいい)
# 6. ステージング環境を指定してEnter(私の場合は"firenv-stage")

3. 設定・選択されている Projects を確認

以下のコマンドの結果を確認する．

$ firebase use


Active Project: firebase-switch-prod-stage

Project aliases for /home/<username>/path/to/firebase-switch-prod-stage:

* default (firenv-stage)

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

これは，現在のディレクトリ(?)で設定されている Project 名および，現在選択されているプロジェクトを教えてくれている．

4. 別の Project を追加する

firebase が他の Project を使えるように追加する．ここで，alias をつけることをおすすめする(間違えちゃうからね)．

$ firebase use --add
# 選択 : "firenv-prod"(自分でつけた本番環境Project名)
# alias: "production"

$ firebase use --add
# 選択 : "firenv-stage"(自分でつけたステージング環境Project名)
# alias: "staging"

後者のステージング環境の追加について，本当は無くても問題ないが，defaultとは別に alias がついている方が見分けやすいので追加した．

5. Projects を確認

firebase が使える Projects を確認する

$ firebase use

Active Project: staging (firenv-stage)

Project aliases for /home/<username>/path/to/firebase-switch-prod-stage:

* default (firenv-stage)
  production (firenv-prod)
* staging (firenv-stage)

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

6. Project の切替・確認

以下のコマンドで Project を切替・確認することができる．

$ firebase use default
$ firebase use
$ firebase use production
$ firebase use
$ firebase use staging
$ firebase use

ここで，最後のコマンドでdefaultおよびstagingが選択されていることを確認しておく．

7. ステージング

以下のコマンドで，ステージングできる．ここでは省略するがデプロイも同様の構文でエイリアスを書き換えると良い．

$ firebase deploy -P staging

ちなみに，コマンドからアプリをブラウザで起動するためには以下のコマンドが用意されている．

$ firebase hosting:channel:open live -P staging

8. デプロイ確認するためのツールをインストール(optional)

間違えてデプロイ用コマンドを実行した時にキャンセルするチャンスを作るために以下のコマンドを使う．

$ npm install --save-dev cli-confirm

9. npm scripts の設定

package.jsonに該当部を追加する．

  ... // 省略
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",

    "prestage": "npm run build",                                                        // 追加
    "stage": "firebase deploy -P staging",                                              // 追加
    "poststage": "firebase hosting:channel:open live -P staging",                       // 追加

    "predeploy": "npm run build",                                                       // 追加
    "deploy": "cli-confirm \"Do you really deploy?\" && firebase deploy -P production", // 追加
    "postdeploy": "firebase hosting:channel:open live -P production"                    // 追加
  },
  ... // 省略
  "devDependencies": {
    "cli-confirm": "^1.0.1", // 自動追加
  }
}

デプロイ時に(y/N)したくない人は"deploy":...を"deploy": "firebase deploy -P production"にする．

最後に，.firebasercが以下のようになっていることを確認．

{
  "projects": {
    "default": "firenv-stage",
    "production": "firenv-prod",
    "staging": "firenv-stage"
  }
}

10. 設定完了確認

$ npm run stage
# ここでステージング環境のページが開かれる
$ npm run deploy
# デプロイしてよければ(y)，だめなら(Enter/n)と入力．
# ここで本番環境のページが開かれる

おわりに

最後まで読んでくれてありがとうございます．

Projects はすべて削除するので見られませんが，リポジトリはこちらに置いておくので，困ったら参考にしてみてください．

確認はしてますが，バグがあったらごめんなさい(リポジトリに Issue や PRs 出してもらえると幸いです！)．

firebaseで本番環境とステージング環境を使い分けるnpm-scripts