Github actionsでfirebase hostingへdeployする仕組みを導入してみた

ハマさん

どうもどうも
下着の前後を2日連続間違えて着ていたZEN SELECTハマさんです
#疲れてるのか？
#マジで老いているのでは疑惑

今回はがっつり技術のお話しです
ハマさん作成のボドゲサイトは全てnuxt.jsで作成してfirebase hostingを利用してインターネットに公開しています

普段はハマさんのパソコンで開発してそのままコマンド叩いてデプロイしているんだけど、たまにパソコンのない場所で気づいた誤字を直したかったりするときにgithubで直接編集してそのまま公開したくなったので構築してみました

既にgithub で管理してるプロジェクトにCIの設定をしていきます

Firebaseのtokenを取得

CIでdeployするときに利用するtokenを取得します
ここで取得したtokenは今回CIの設定をするプロジェクト以外にもアクセスできるので取り扱いは注意です

firebase login:ci

上記コマンドをターミナルで入力すると、ブラウザが立ち上がり（立ち上がらない場合はターミナル上に表示されるURLにアクセス）googleアカウントの認証を行います
認証後ターミナルにtokenが表示されます

Githubの環境変数にtokenを登録

ブラウザでCIを設定したいプロジェクトのGithubのページにアクセスし、settings > secrets へ画面遷移し、New repository secret ボタンを押します

画像1

NameにFIREBASE_TOKENと入力し、Valueには上記で取得したtokenを入力してから Add secretで保存します

画像2

Github actions 用の設定ファイルを追加

プロジェクトのディレクトリに .github/workflows/deploy.ymlという名前でymlファイルを作成します

# https://github.com/marketplace/actions/github-action-for-firebase
name: Build and Deploy
on:
 push:
   branches:
     - master

jobs:
 build:
   name: Build
   runs-on: ubuntu-latest
   steps:
     - name: Checkout Repo
       uses: actions/checkout@master
     - name: Install Dependencies
       run: npm install
     - name: Build
       run: npm run generate
     - name: Archive Production Artifact
       uses: actions/upload-artifact@master
       with:
         name: dist
         path: dist
 deploy:
   name: Deploy
   needs: build
   runs-on: ubuntu-latest
   steps:
     - name: Checkout Repo
       uses: actions/checkout@master
     - name: Download Artifact
       uses: actions/download-artifact@master
       with:
         name: dist
         path: dist
     - name: Deploy to Firebase
       uses: w9jds/firebase-action@master
       with:
         args: deploy --only hosting
       env:
         FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

設定ファイルはこちらを参考にしています
ymlファイルを作成したらcommitしてpushします

pushするとActionsが動き出し Build と Deploy が実行されます
手元のプロジェクトだとpushしてから2分30秒くらいでdeployまで完了しました

これで簡単な誤字修正くらいはスマフォでも対応できるようになった！！

この記事が気に入ったらサポートをしてみませんか？