firebaseでpull request ごとにpreviewをdeployするgithub action

概要

firebaseで、spaをnetlify やvercel のようにプルリクごとにURLを変えてdeployしたい。

how to

firebaseの初期化

公式
firebase toolをグローバルにinstall
今回はdeployする directoryはdistをしていします。(firebaseのdefaultはpublic)

npm i -g firebase-tools
firebase login
firebase hosting #deloyするdirectoryをdist にする

channel deployコマンドをpackage.jsonに追加

previewようのdeployはchannel deployというコマンド使います。
そのため、以下のように scriptに追加します。

{
  "name": "firebase deploy app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style",
    "test": "jest",
    "channel-deploy": "firebase hosting:channel:deploy" ←# 追加
  },

github workflowを設定する

以下のように設定します。

firebase-deploy.yml

name: CI

on: [push]

jobs:
  FrontDeploy:
    name: FrontDeploy
    runs-on: ubuntu-latest
    steps:
    - name: Checkout Repo
      uses: actions/checkout@main
    - name: setup Node
      uses: actions/setup-node@v1
      with:
        node-version: '12'
        registry-url: 'https://registry.npmjs.org'
    - name: Install Dependencies
      run: yarn
    - name: Build
      run: yarn build
    - name: deploy to Firebase Hosting
      shell: bash
      run:  yarn channel-deploy $(echo ${GITHUB_REF#refs/heads/}) --token=${{ secrets.FIREBASE_TOKEN }}

こちらでは、branch名を取得しています。

$(echo ${GITHUB_REF#refs/heads/})

tokenを取得

以下コマンドで、tokenを取得できます

firebase login:ci

取得したtokenをFIREBASE_TOKEN にいれましょう。

以上でdeployできるはずです！

twitterもフォローよろしくおねがいします。 ！