きり丸の技術日記

技術検証したり、資格等をここに残していきます。

【GitHub Actions】マーケットプレイスのworkflowでfirebaseにhostingする【w9jds/firebase-action】

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

nainaistar.hatenablog.com


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

github.com

Workflowを使うメリット

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

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

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

事前準備

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

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

nainaistar.hatenablog.com

ディレクトリ構造

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

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

作ったワークフロー

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

相違点としては、my-appというディレクトリを掘っているのでworking-directry:./my-apppath: my-app/buildPROJECT_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

ソースコード

github.com

終わりに

下準備が楽になるのではないかと考え、使ってみました。

ただ、ログイン用のトークンを発行したり、Firebaseのページを用意したりする手間は変わりませんでした。

firebaseのトークンで簡単にセットアップした後、ロールを制限したGCPに切り替えていくのが今どきのやり方なんですかね?

私は個人でしか使っていないので、firebase login:ciで発行されるトークンで充分だと思いますが…。
GCPのロールでもホスティングしたいのであれば、ぜひ使ってみてください。


もしこの記事が役に立ったのであれば、はてぶ、Twitterでの記事の拡散、twitterのフォローもよろしくお願いします。

私の励みになります。