きり丸の技術日記

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

GitHub ActionsでFirebaseにデプロイする

先週参加した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)

作業手順

  1. npmで静的ファイルを出力できるようにする。
    • 自分はvue-cliで作っちゃいます。
      vue uiで作るの分かりすくて好き。
  2. Firebaseのコンソールでデプロイするプロジェクトを作成しておく。

    • コンソールからプロジェクトを追加をクリックして、プロジェクトを作成する。
      f:id:nainaistar:20200525234026p:plain f:id:nainaistar:20200525234046p:plain
  3. firebase-toolsをローカル環境にダウンロードする。

    • やり方は公式サイト参照。
    • 前回と時間が空いてしまったら、念のためアップデートしておいた方がいい。
  4. (初回は不要)前回ログイントークンが残っている可能性があるので、ログアウトする。
firebase logout
  1. ログインする 1.firebase-toolsを使ってログインコマンドを打つ
firebase login

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

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

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

  1. ローカルからFirebaseへデプロイする
firebase deploy

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

  1. ローカルで確認出来たら、package.jsonにfirebase-toolsを追加する
yarn add -D firebase-tools
  1. npm scriptにdeployスクリプトを追加する
"scripts": {
    "deploy": "firebase deploy"
},
  1. .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 }}
  1. Github actions用に以下のコマンドを実行して、Firebaseにデプロイできるようにする。

    firebase login:ci

    loginと同じようにポチポチ画面を進めると、最後にcli側にトークンが発行されている。
    f:id:nainaistar:20200526000145p:plain

  2. GithubのsecretsにFirebaseのトークンを保存する。 f:id:nainaistar:20200525235838p:plain

  3. あとはGithubのpushを契機にFirebaseのデプロイが走るようになります

おわりに

今のホスティングサイトにはNetlifyとかVercel(旧:Now)とかあるので、とりあえずデプロイするならFirebaseとは言えない状況だと思います。

ただ、認証まわりを簡単に実装したいとか、google analyticsを使いたい、等の目的があればFirebase一択だと思います。
一応、AWSに載せるならAmplifyとかで認証を簡単にする、等々はありますが…。

幅広く無料で使うのであれば、いまだに強いとは思います。

参考

nainaistar.hatenablog.com


この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。