私のブログで最も人気のある記事が「GitHub ActionsでFirebaseにデプロイする」です。

不勉強だったのですが、GitHub Actionsのマーケットプレイスにある【w9jds/firebase-action】というworkflowでもfirebaseにデプロイする方法があったようなので、それを使ってみました。

Workflowを使うメリット

package.jsonにfirebase-toolsを入れる必要が無いので、プロダクトで管理する必要が無い

正直、メリットとしてはこれくらいです。
GCPのロールを使って、firebaseにデプロイする方法もありましたが、私はこっちを使ってないので利便性がわかりません…。

事前準備が簡単になる等も無いので、強烈なメリットは無いと考えてます。

事前準備

私のブログの手順をほぼそのまま使ってください。

差分は下記点くらいです。

yarn add -D firebase-toolsは不要
GitHub Actionsのmain.ymlを今回のマーケットプレイスに切り替える

nainaistar.hatenablog.com

ディレクトリ構造

今回の記事では、create-react-appで作成しているので、ディレクトリ構造は以下の通りです。

/.github … GitHub Actions  
/my-app … Appディレクトリ
/my-app/build … buildしたファイルの出力先

作ったワークフロー

Exampleをほぼコピーしています。

相違点としては、my-appというディレクトリを掘っているのでworking-directry:./my-appやpath: my-app/build、PROJECT_PATH: ./my-app等でディレクトリを合わせています。

name: Build and Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
        working-directory: ./my-app
      - name: Build
        run: npm run build
        working-directory: ./my-app
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: my-app/build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: my-app/build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          PROJECT_PATH: ./my-app

マーケットプレイスのworkflowに切り替えたい場合

もし、私の記事を見てworkflowを作成し、マーケットプレイスのworkflowに切り替えたい場合は下記だけ変えれば大丈夫です。
secretsの名前も一緒なので移行は簡単ですね。

きり丸のyml

    - name: deploy to Firebase Hosting
      run: |
        yarn deploy --token=${{ secrets.FIREBASE_TOKEN }}

マーケットプレイスのyml

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          PROJECT_PATH: ./my-app