firebase にデプロイのために，以下の３つの機能を設定した．

1. 「deploy 前に自動ビルド」
2. 「deploy 時に確認」
3. 「deploy 後に起動」

私は個人の web 開発では，react の SPA を firebase でホスティングする事が多い．

TL;DR 　最終形

---

現状，自分にとって一番便利な設定がこちら．

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

    "predeploy": "npm run build",                                         // 自動ビルド
    "deploy": "cli-confirm \"Do you really deploy?\" && firebase deploy", // confirm
    "postdeploy": "firebase hosting:channel:open live"                    // ブラウザで起動
  },
  ... // 省略
}

経緯

---

普段は

npm start

でアプリを確認しながら開発し，機能が完成したら or バグを解消したら

npm run build

でアプリをビルドし，

firebase deploy

で Firebase にデプロイしている．

しかし，数分待っても何度リロードしてもアプリの画面が変わらないことがたまにあり，

「おかしいな〜」と思ってよく考えてみたらnpm run buildを忘れていた事が原因となっていた．

精神衛生上よろしくないので，人為的なミスを減らすためにビルドからデプロイまでを一発で実行できるようすることにした．

設定

---

npm の設定ファイルであるpackage.jsonをいじった．

npm run <XXX>は，package.jsonのscriptsという部分で設定することができる．

該当部の変更前が以下（これはcreate-react-appで自動生成されたもの）．

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

該当部の変更後が以下．

XXコマンドの前に処理したいコマンドは，preXXのように設定することができる．

ここでは，デプロイはnpm run deployとコマンド実行するとよく，デプロイ前にビルドも自動実行してくれる．

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

    "predeploy": "npm run build", // 追加
    "deploy": "firebase deploy",  // 追加
  },
  ... // 省略
}

ここまで来て，「あっ，デプロイ後に自動でリンク開いてくれたら便利じゃん！」と思ったので，ついでに以下の変更も加えた．

XXコマンドの後に処理したいコマンドは，postXXのように設定することができる．

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

    "predeploy": "npm run build",
    "deploy": "firebase deploy",
    "postdeploy": "firebase hosting:channel:open live" // 追加
  },
  ... // 省略
}

次に，「デプロイ間違えてしちゃったらきついなあ・・・」と思ったので，デプロイ時に本当にデプロイしていいのかターミナル上で(y/N)で確認することにした．

まずは，開発環境にcli 向けの確認コマンドをインストール．

$ npm install --save-dev cli-confirm

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

    "predeploy": "npm run build",
    "deploy": "cli-confirm \"Do you really deploy?\" && firebase deploy", // 修正
    "postdeploy": "firebase hosting:channel:open live"
  },
  ... // 省略
}

以上．