GitHub Actionsを利用してFirebaseに自動デプロイ

WEB関連

📅 December 03, 2020

•

⏱️ 4 min read

はじめに

本記事ではGitHubにプルリクエストがマージされた際に、GitHub ActionsがコンテンツをビルドしてFirebase Hostingにデプロイする手順です参考にすべき公式サイトのURLなども載せているので適宜補足して読むと自分用にもカスタマイズできると思います。

GitHub Actionsについて

2019年11月にGitHub社から正式にリリースされた後発のCI/CDツールです。 GitHubとの相性が良く、ビルドやデプロイ、テストといった開発者の煩雑なワークフローを自動化してくれます。詳しくは以下の日本語の公式ドキュメントをご参照ください！公式 GitHub Actionsについて

GitHub Actionsの設定内容

設定ファイルは以下なります。具体的な説明は後述します。

.github/workflows/firebase-ci.yml

name: Firebase Deploy

on:
  push:
    braches: 
      - master

jobs:
  firebase:
    name: Build and Deploy Firebase Hosting
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@v2
      - name: Install dependencies
        run: yarn
      - name: Build vue contents
        run: yarn build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Actions初期設定

GitHubのレポジトリのタブのActionsから作成できます。 ↓　初期画面 settting-image

初期画面のSet up this workflowからワークフローを作成するもしくは、自身のプロジェクトルートに.github/workflows/{{ファイル名.yml}}というワークフローファイルを作成してpushしても大丈夫です。

ワークフローファイル設定

先ほどのワークフローファイルの具体的な説明をします。

 on:
   push:
     braches: 
       - master

トリガー設定です。 masterブランチにプッシュされた時のみ、jobが動作します。

stepsでjobの動作を定義します。

    steps:
      - name: Check out code
        uses: actions/checkout@v2

GitHub Actionsを実行するコンテナ上にレポジトリをcheckoutしてきます。現在はv2の利用が推奨されています。

      - name: Install dependencies
        run: yarn
      - name: Build vue contents
        run: yarn build

runs-onで指定したubuntu-latestに導入されているLTS版のnodeを使ってyarnとyarn buildでコンテンツをビルドしています。

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Firebase HostingにコンテンツをデプロイするためにFirebaseCLIを利用します。こちらはuses: w9jds/firebase-action@masterで提供されたパブリックリポジトリのアクションを参照します。 argsで実行コマンドを指定します。今回はdeploy --only hostingですがFunctionsにデプロイしたい場合はdeploy --only functionsとすることでできます。 Firebase CLIで必要な認証情報FIREBASE_TOKENは次項のsettingsで設定します。

GitHub Action for Firebaseの詳細はこちら

環境変数の設定

環境変数はGitHubのSettingsタブから設定します。

Settingsタブ選択
Secrets選択
New SecretからKeyとValueを指定

environment-setting

実行結果

実行結果で成功すると以下のようになります。（Actionsタブで確認できます。）

GithubActions-demo

終わりに

GitHub Actionsを利用するとGitHub上でソース管理からデプロイ設定まで全部完結するのですっきりして気持ちいいですね。 FirebaseへのデプロイもGitHubで提供されたパブリックリポジトリを利用すると手間がかからずにできてとても楽でした。今後もよりGitHub Actionsが充実してくると思うので楽しみです。

参照

GitHub公式　ワークフロー構文

← Prev Next →