先週参加したweb1weekで、Github Actionsを使用したFirebaseへのデプロイの構築に2-3時間くらいかかってしまったので、自分が忘れないようにするためのメモ。

公開するのが決まっているのなら、CI/CDは後に回すメリットはないと考えてます。
アジャイル開発らしく、薄く作って厚くしていくのが楽しいですし。

この記事のゴール

Github Actionsを使用してFirebaseにホスティングする。

ターゲット

書くこと

デプロイする手順

書かないこと

効率的なGithub Actionsの書き方
vue.jsでの環境構築
cloud functionsとかhosting以外の機能の使い方

技術

Firebase
Github
Github Actions
(yarn)
(vue.js)

作業手順

npmで静的ファイルを出力できるようにする。
- 自分はvue-cliで作っちゃいます。
  vue uiで作るの分かりすくて好き。
Firebaseのコンソールでデプロイするプロジェクトを作成しておく。
- コンソールからプロジェクトを追加をクリックして、プロジェクトを作成する。
firebase-toolsをローカル環境にダウンロードする。
- やり方は公式サイト参照。
- 前回と時間が空いてしまったら、念のためアップデートしておいた方がいい。
(初回は不要）前回ログイントークンが残っている可能性があるので、ログアウトする。

firebase logout

ログインする 1.firebase-toolsを使ってログインコマンドを打つ

firebase login

f:id:nainaistar:20200525234113p:plain f:id:nainaistar:20200525234207p:plain

以下のコマンドでFirebaseの設定ファイルを初期化する。

firebase init

f:id:nainaistar:20200525234303p:plain f:id:nainaistar:20200525234322p:plain

ローカルからFirebaseへデプロイする

firebase deploy

正常終了すると、こんな感じのコンソールが出力される。 f:id:nainaistar:20200525234341p:plain

ローカルで確認出来たら、package.jsonにfirebase-toolsを追加する

yarn add -D firebase-tools

npm scriptにdeployスクリプトを追加する

"scripts": {
    "deploy": "firebase deploy"
},

.github/workflow/main.ymlに以下のスクリプトを記載する。

※ マーケットプレイスのworkflowを使いたい場合は、参考記事を見てください。

name: CI

on: [push]

jobs:
  FrontDeploy:
    name: FrontDeploy
    runs-on: ubuntu-latest
    steps:
    - name: Checkout Repo
      uses: actions/checkout@master
    - name: setup Node
      uses: actions/setup-node@v1
      with: 
        node-version: 10.x
        registry-url: 'https://registry.npmjs.org'
    - name: Install Dependencies
      run: npm install
    - name: Build
      run: npm run build
      # ↑ buildが違うコマンドなら、適宜変更して下さい
    - name: deploy to Firebase Hosting
      run: |
        yarn deploy --token=${{ secrets.FIREBASE_TOKEN }}

Github actions用に以下のコマンドを実行して、Firebaseにデプロイできるようにする。

firebase login:ci

loginと同じようにポチポチ画面を進めると、最後にcli側にトークンが発行されている。
GithubのsecretsにFirebaseのトークンを保存する。
あとはGithubのpushを契機にFirebaseのデプロイが走るようになります