GitHub Actionsで create-react-appをFirebaseへ自動デプロイする🔥 #React

[OS:windows]　結果を先に。ポエムは最後。

ブラウザでGitHubの該当レポジトリのアクションタブをクリックし、"New workflow"をクリックし.ymlファイルを作成します。

以下.ymlのコード

masterDeploy.yml

name: masterDeploy CI

on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [15.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: Install yarn Packages
        run: yarn install
      - name: Build page
        run: yarn build
        env:
          CI: false
      - name: use release
        run: yarn firebase use release --token xxxxx
      - name: deploy to Firebase Hosting
        run: yarn firebase deploy --token xxxxx

上から説明します。

jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [15.x]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

masterbranchがpushされたら実行。
OSはubuntu-latest
Node.jsはver15.xを使用する。
(Node.jsにyarnも入っているみたいので、指定後普通に使用できます)
下記のテンプレをコピペして使った感じなので、まだ完全に理解していません
https://docs.github.com/ja/actions/guides/building-and-testing-nodejs

      - name: Install yarn Packages
        run: yarn install
      - name: Build page
        run: yarn build
        env:
          CI: false

yarn installしてビルドします。

現在のプロジェクトは大漁warningなので
CI:falseしないとビルドエラーが発生します。
(CI:trueで通るプロジェクトにはしたいと思っているよ。いつやるかは分からんけど。)

      - name: use release
        run: yarn firebase use release --token xxxxx
      - name: deploy to Firebase Hosting
        run: yarn firebase deploy --token xxxx

yarn でfirebaseを呼び出し実行します。
実行する時、トークンが必要なので
自分のPCのcmd等でfirebase login:ciを実行してトークンを入手。
xxxxに記入します。
(GitHubActionにシークレット定数入力する設定あるみたいなので、本当はそれ使う方が良いんだと思う)

ブラウザ上のGitHubでActionの動作確認した後、vscode等でプロジェクトをpullします。
このままだとpushする時workflowの権限がないというエラーが出るのでworkflowの権限等を有効にしたtokenを取得します。方法は下記リンク参照
https://docs.github.com/ja/github/authenticating-to-github/creating-a-personal-access-token

windowsだと、タスクバーの検索から資格情報マネージャーを起git:https://github.comを現在のユーザー名とパスワードをtokenにすればOK。
これで、ローカルからmastarにプッシュすればアクションが自動で実行されるはず。

現在、物語構築支援WEBツールなるものをReact & firebase で開発中です。
開発進捗等twitter：https://twitter.com/dicebook_dev

生活の事情で母艦PCをノートでリモートして開発していたのですが、母艦の電源が突然落ちたりして前々から気になっていたGitHubActionsを試してみました。無料枠もかなりあるので、個人で使用する分には十分。開発と本番環境の切り替えのいい方法が見つかって良かったです。（切り替えられると言ったわけではない。ブランチとAction(具体的にはコピー)を組み合わせた運用で試してみたい）
怪我の功名。ちなみにPCはUSBデバイス全部とグラボを抜いたら安定稼働してる。母艦はRyzen3900Xなので、グラボ抜いたらリモートデスクトップ使えないのかと思ってました。
普通に使えるのね。何かあったときはきついけど、RTX3060を買うまで耐えていきたい。