【Nuxt.js, microCMS】Github Actions を使って Firebase Hosting に自動デプロイする
microCMS の更新がされたら、Github Actions で Firebase hosting へ自動デプロイさせる方法です。
環境
- node v18.15.0
- npm 9.5.0
- Nuxt.js v2 / ssg
- MicroCMS
- Firebase Hosting
- Github Actions
動作の流れ
- microCMS を更新する
- microCMS から GitHub Actions に Webhook 通知が飛ぶ
- GitHub Actions が立ち上がり、ビルドが走る
- Firebase Hosting へデプロイする
手順
- GitHub 個人用アクセストークンの取得
- Firebase の認証トークンの取得
- microCMS のコンテンツの Webhook を設定
- GitHub Actions の設定
GitHub 個人用アクセストークンの取得
ユーザー管理画面（Settings）の「Developer settings」＞「Personal access token」で「Generate new token」を押下し、トークンを発行します。
一度しか表示されないので、メモしておきます。
Firebase の認証トークンの取得
下記コマンドで、認証トークンの取得をすることができます。
ブラウザが立ち上がり、Googleアカウントの Firebase CI へのアクセス認証をします。
$ firebase login:ci
結果はこちら。
$ firebase login:ci
⚠ Authenticating with a `login:ci` token is deprecated and will be removed in a future major version of `firebase-tools`. Instead, use a service account key with `GOOGLE_APPLICATION_CREDENTIALS`: https://cloud.google.com/docs/authentication/getting-started
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=......
Waiting for authentication...
✔ Success! Use this token to login on a CI server:
1//xxxxxxxxxxxxxxxxxx
Example: firebase deploy --token "$FIREBASE_TOKEN"
取得した認証トークンを使うことで、ログインしていない環境からでも Firebase CLI を使うことができるようになります。
注意
気を付てほしいことがあります。ここで発行した認証トークンは、Googleアカウントに紐付いたトークンです。認証したGoogleアカウントが他のFirebaseプロジェクトにもアクセス可能な場合、そのプロジェクトにも利用可能です。
たとえば開発環境（ステージング）の認証トークンでは本番環境にデプロイさせたくない、というケースがあるとします。その場合、開発環境のFirebaseプロジェクトだけアクセスできるGoogleアカウントからトークンを発行しないといけません。また、該当するGoogleアカウントが削除された場合、当然発行された認証トークンは使えなくなります。
https://zenn.dev/t2421/articles/60bceb71788bd3
microCMS のコンテンツの Webhook を設定
microCMS の管理画面から、設定したいブログ記事のAPI を選択し、
「API設定」→「Webhook」を選択し、「追加」で「GitHub Actions」を選択します。
必要な設定を記入します。
ここで、どの Github リポジトリに Webhook を飛ばすのかを設定します。
のちに設定する yml ファイル内のジョブは、ここで設定する Github リポジトリに対して実行されます。
GitHub Actions の設定
ymlファイルの準備
ymlファイルを作成し、GitHub Actions の設定をしていきます。
をベースに作成するといいです。
下記では、実行タイミングの設定をしています。
以下では、masterブランチにプッシュされたら実行する設定になっています。
on:
push:
branches:
- master
下記では、実行するジョブ（一連の操作）の設定をしています。
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@master
- ...
ymlファイルへの設定の為に、以下2つの登録を行います。
Github にFirebase トークンを環境変数として登録
Github リポジトリ の Settings の「Secrets and variables」＞「Actions」で、「New repository secret」を押下し、
先ほど取得した firebase のトークンをFIREBASE_TOKEN として格納します。
Github に Firebase プロジェクトIDを環境変数として登録
Github リポジトリ の Settings の「Secrets and variables」＞「Actions」で、「New repository secret」を押下し、
ホスティングしたいプロジェクトIDをFIREBASE_PROJECT_IDとして格納します。
Tips
下記コマンドで、アクセス権のある Firebase プロジェクトの一覧を表示することができます。
$ firebase projects:list
以下、結果
ymlファイルサンプルコード全量
今回は、「microCMS の更新がされたら、Github Actions で Firebase hosting にデプロイする」ので、以下のように記述します。
name: Build and Deploy
on:
# mainブランチへプッシュされたタイミングで実行
push:
branches: [main]
# microCMS から GitHub Actions に Webhook 通知が飛んできたタイミングで実行
repository_dispatch:
# []の中は、microCMS の Webhook 設定で設定したトリガーイベント名
types: [update-posts]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
steps:
# リポジトリをチェックアウト
- name: Checkout Repo
# uses: actions/checkout@master
uses: actions/checkout@v2
# Node.js のセット
- name: Use Node.js
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
# 依存パッケージのインストール
- name: Install Dependencies
run: npm install
# プロジェクトごとの npm のビルドコマンド
- name: Build
run: npm run generate
# 以下、ssgの場合: ssg ビルド
- name: Generate static page
env:
MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_SERVICE_DOMAIN }}
MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
run: npm run generate
# Firebase にデプロイ
- name: Deploy to Firebase
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting --project=${{ secrets.FIREBASE_PROJECT_ID }}
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
これで microCMS で記事を追加、削除、公開記事を下書き状態に変更したタイミングでサイトが更新されているのを確認できました。わーい。
動作確認
Github リポジトリの「Actions」で動作確認用ログが表示されます。
参考
Discussion