はじめに

---

今まで，気になりつつもずっと扱っていなかった Github Actions をついに触ることが出来た．

触れていなかった理由としては，「一人で開発していたため，ツールによる自動化よりも学習・設定のコストが高く，コマンドなどの簡易的な自動化で満足していた」という点が大きい．

しかし，複数人開発を進めていく上では，やはり必要になっていくだろうと考え，ついにやってみた．

方法

---

firebaseコマンドによる自動設定に頼ろう．

$ firebase init hosting:github
# プロジェクトを選択
# リポジトリを入力 (ユーザ名/リポジトリ名)

途中，Firebase の認証や Github の認証が入ると思うが，ここは承認しないと次に進めない．

一応，リポジトリの Settings（ユーザの Settings ではない点に注意）に移動し，左のバーからSecretsをクリックし，FIREBASE_...の環境変数が配置されていることを確認する．

方法(ダメな場合)

---

私の場合，上記のコマンドで，謎のエラーが出て，どうもうまく行かなかったので，以下のコマンドで対応し，無事自動生成された．

$ firebase init
# Hosting (Github)みたいな方を選択
# プロジェクトを選択
# リポジトリを入力
# urlのリライト Yes
# デプロイするディレクトリ build

もう一度，repository > Settings > Secretsを確認し，環境変数がセットされているかを確認する．

./.github/workflows/にファイルが生成されていることを確認する．

$ git add --all
$ git commit -m "setup github actions"
$ git push

バグフィックス

---

git コマンド

---

 ! [remote rejected] main -> main (refusing to allow a Personal Access Token to create or update workflow `.github/workflows/firebase-hosting-merge.yml` without `workflow` scope)

git コマンドに workflow の権限が与えられていない．

Github のアクセス方法の改定から，トークンによるアクセスを設定してあると思うが，それを再設定する必要がある．

Github の Settings からトークン生成（再生成ではない点に注意）画面に行き，ここでは workflow をチェックし，トークンを生成する．そして，生成されたトークンを，Workflow をプッシュするための Cli に設定する．

workflow #1

---

firebase github Specified \"public\" directory \"build\" does not exist, can't deploy hosting to site

./build/が無いのが原因．普段 Deploy する際はローカルでnpm run buildし，./buildをfirebase deployでデプロイする．

しかし，./build/は当然.gitignoreに入れており，リモートには存在しない．そこで，workflow にビルドコマンドを入れる必要がある．

.github/workflows/にある，firebase により自動生成された.yml２つを修正する必要がある．

name: Deploy to Firebase Hosting on merge
...
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          ...

name: Deploy to Firebase Hosting on PR
...
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          ...

workflow #2

---

Actions タブを見ると，エラー終了しており，エラータブを開くと以下のようなエラーがあった．

Run npm ci && npm run build
npm ERR! fsevents not accessible from jest-haste-map

jest-haste-mapを明示的にインストールすることが出来た．

$ npm i jest-haste-map

この事から，内部的にインストールされたパッケージが古くて使えなかったのではないかと原因を予想した（解明はしていない）．

ちなみに

---

npm ciコマンドはpackage-lock.jsonを必要とするので，プッシュする．

おわりに

---

設定した結果のレポジトリはこちら．

自動デプロイだけでなく，プルリクのプレビューを表示してくれるのが，非常に便利．

今後は，様々な自動化を駆使して，開発を効率化していきたい．

参考

---

• https://firebase.google.com/docs/hostinggithub-integration
• https://github.com/marketplace/actionsdeploy-to-firebase-hosting