GithubActionsでCircleCI置き換えてFirebaseにデプロイするのにてこずった

TL;DR

create-react-app でSPA作って、Firebase でバックエンドとホスティングその他用意して、Github でソース管理してCI/CDをGithubActions 使えばかなりコンパクトにウェブアプリ作る基盤できるでしょ。
って気軽な気持ちで挑んだら細々つまづきポイントがあった話。
FirebaseをGithubActionsからデプロイした話なのでReact要素はないです。
主にGithubActionsハンズオンとfirebaseをGithubActionsでデプロイするときのメモ

• secretsにfirebase login:ciしたトークンを設定する
• firebase-toolsをdevdependenciesに追加しておかないとCIの時の環境にfirebase-toolsが無くて詰む
• firebase deploy コマンドはhosting以外もinitしてるとエラーの原因になるので(今回はホスティングにデプロイすることが目的のためとりあえず)--only hostingする

上記3点が以下で適当に書き散らかされてる内容です。

したかったこと

create-react-appでサクッと用意したアプリをmasterへのコミットに応じて npm run build して firebase deployでhostingに公開してくれる上にバックエンド要素も全部入りなreact+firebase+CIのモノリポを用意したかった

ディレクトリ構成

create-react-appしたあとにfirebase initしてとにかく全部入れたみたいな感じ。

ハマり...そして解決へ

とりあえずGithubActionsをNode用で用意
Secretsに firebase login:ci でゲットしたトークンも設定
そしてコミットしてプッシュ！走るCI！そしてエラー！！！！！！！

エラーメッセージにはこんな内容
./node_modules/.bin/firebase: No such file or directory

なるほどdevdependenciesじゃねーの？

firebase-toolsってグローバルに入ってるものをそのまま使ってたため忘れてた。
(さらっと書いたけどこの事実に気づくまでに時間がかかった時点でnpm慣れしてないことがバレる。)

npm add --dev firebase-toolsしたら次は違うエラーだぜ！！

error-message

Run ./node_modules/.bin/firebase deploy --only hosting --token=***
  ./node_modules/.bin/firebase deploy --only hosting --token=***
  shell: /bin/bash -e {0}

Error: No project active, but project aliases are available.

Run firebase use <alias> with one of these options:

  default (this-project)
  alias-name-of-project (this-project)
## [error]Process completed with exit code 1.

と言う感じのエラーメッセージが出たのでprojectの指定もつける。

結果できたymlはこちら

nodejs.yml

name: Node CI

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install, build
        run: |
          npm install
          npm run build
      - name: deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy --only hosting --project default --token=${{ secrets.FIREBASE_TOKEN }}

もっとスマートと言うか必要最低限の記載オンリーの設定にもできると思うけど慣れてないし理解が追いついてないので、
デフォルトのyamlをちょっと変えただけ。

まとめ

そもそもci/cdが何をしてるか、コンテナが使い捨てられるようなデプロイフローの中で行われていることをきちんと把握してなかったせいでfirebase-toolsが無いエラーとかに詰まったりして時間を無駄にした。

firebaseのコマンドラインツールに慣れていないためにさらに困惑した
このリポジトリはこのままstep by stepで簡単なCRUD、ログイン、その他を実装してFireStore, Storage, Functions, authenticationなんかを使ったウェブサービスとして構築し、テストの追加とかもして一塊のプロダクト開発環境として構築するのが目標なので、この先もハマりが生まれたり、
あんまりこの辺りのツールや知識に強く無い人の参考になる情報が出せたらこのつまづきの供養になるので継続的に供養をしていきたい。

とりあえずGithubActionsいいよ！というお話