Github ActionsでNuxtjsをfirebase hostingにデプロイする

2 min read読了の目安(約2400字

GithubActionsとは

https://github.co.jp/features/actions

試すこと

masterブランチにプッシュすると、firebase hostingにデプロイする

https://github.com/t2421/github-actions

前提

  • Firebaseのプロジェクトを作成していること
  • yarn create nuxt-app でnuxtのプロジェクトができていること
  • githubのrepository作成済みであること

やること

  • CIに必要なFirebaseのtoken取得
  • Githubに環境変数の登録
  • ymlの編集

CIに必要なFirebaseのtoken取得

firebaseのtokenについてはこちらを参照

https://qiita.com/yamacraft/items/d8b623cceb5c91692b65
firebase login:ci
でCIなどで使うためのtokenが取得できる。

発行した認証トークンは、Googleアカウントに紐付いたトークンです。認証したGoogleアカウントが他のFirebaseプロジェクトにもアクセス可能な場合、そのプロジェクトにも利用可能です。

とのことなので、取り扱いの注意が必要

Githubに環境変数の登録

githubのrepositoryのsettingsから、secretを選択し、firebaseのtokenをFIREBASE_TOKENとして入れておく

ymlの編集

.github/workflows/deploy.yml

# https://github.com/marketplace/actions/github-action-for-firebase
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
      - name: Build
        run: npm run generate
      - name: Archive Production Artifact
        # generateしたdistフォルダを永続化する
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
        # build job で永続化したdistフォルダを取得する
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

これは、以下のリンクのものをほぼそのまま利用

https://github.com/marketplace/actions/github-action-for-firebase
firebase-toolsのコマンドをgithub Actionsで簡単に使えるようにしてくれるものかと思います。

artifact

https://docs.github.com/ja/actions/guides/storing-workflow-data-as-artifacts

成果物を使えば、ジョブの完了後にデータを永続化でき、そのデータを同じワークフロー中の他のジョブと共有できます。

upload-artifactで指定したディレクトリがgithubのActionsの詳細で見ることができる。

このファイルをダウンロードできたりする。

needs

https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions

このジョブの実行前に正常に完了する必要があるジョブを示します。 文字列型または文字列の配列です。 1つのジョブが失敗した場合、失敗したジョブを続行するような条件式を使用していない限り、そのジョブを必要としている他のジョブはすべてスキップされます