Firebase deploy via Github Actions

Overview

Firebase 上で動作している Nuxt で書かれたアプリをGithub Actions 経由で Deploy する機構を作った話です。

手順

前提

以下の前提が必要です。

• デプロイ権限を持っているFirebase アカウントがあること。
• デプロイするための Firebase Token を取得していること。

Firebase deploy with Github Actions

めちゃくちゃ簡単で以下の公式のサンプルの通りにやったらデプロイまで完了しました。

github.com

1. firease login:ci を実行して権限を要求する画面が出るので、許可してトークンを発行します。

$ firebase login:ci
 
 Visit this URL on this device to log in:
 https://accounts.google.com/o/oauth2/auth?client_id=xxxxx.....
 
 Waiting for authentication...
 
 ✔  Success! Use this token to login on a CI server:

 
 Example: firebase deploy --token "$FIREBASE_TOKEN"

以下のような認証認可プロセスに入るので権限を許可します。

1. 取得したトークンを Github のリポジトリの設定から secrets に追加します。今回は FIREBASE_TOKEN という secrets 名で保存します。(この secrets 名を workflow の設定ファイルから参照します）

1. Github Actions のワークフローの設定をします。

これは一番最初に記載したドキュメントに書いてあるサンプロをそのまま転用しました。

name: Build and Deploy
on:
  push:
    branches:
      - main // master から main に変更したので

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [14]

    steps:
      - name: Checkout Repo
        uses: actions/checkout@master

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node }}

      - name: Install Dependencies
        run: npm install

      - name: Generate
        run: npm run generate

      - name: Archive Production Artifact
        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

      - 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 }} // ここで secrets に設定した FIREBASE_TOKEN を使う

npm run generate すると dist ディレクトリ配下に成果物が作られます。これを Firebase Hosting でデプロイして参照するようにしているので nuxt のコンパイルは標準のまま使用します。

ここまでやったらあとは main ブランチに push(or merge) するだけでビルドされた成果物が自分の Firebase アカウントの権限で Firebase Hosting にデプロイされます。

めちゃくちゃ簡単でしたね。