はじめに
最近CI/CDとか自動デプロイって流行ってますよね。一体どんなもんなのかやってみたい。。。
ということで趣味で運用しているポートフォリオ（静的Webページ）のデプロイ作業を自動化してみます。
やること
①自分用のポートフォリオページを編集
↓
②GitHubにプッシュ
↓ ここを自動化したい
③Firebaseへデプロイ
まずはFirebaseのCI用の認証トークンを取得
管理したいプロジェクトに移動して
firebase login:ci
を実行します。
するとブラウザのログイン画面が表示されるので、
プロジェクトの登録されているアカウントでログインします。
画面に”Woohoo! Firebase CLI Login Successful"と表示されればokです！
firebase-toolsが入っていない人は実行できないのでnpmで入れましょう。
先ほどのコマンドラインには発行されたトークンが出てきますのでこれを控えます
+ Success! Use this token to login on a CI server:
1//xxxxxxxxxxxxxxxxxxxyyyyyyyyyyyyyyyyyyyyyzzzzzzzzzzzzzzzzzzhoge
トークンをGitHubのSecret変数に追加
プロジェクトページの”Settings”からその中の”Secrets”を開きます（ナビゲーションバーの下部にあります）
その中のNew Secretからトークンを登録できます。
Name→FIREBASE_TOKEN
Value→**（発行されたトークン）**
を追加してあげます
環境変数のようなものでActions実行時に参照します
Actionを定義
次に "Actions" → "Set up a workflow yourself" を開き、以下を貼り付けます
name: deploy_to_firebase_hosting
on:
push:
branches:
- master
jobs:
deploy_to_firebase_hosting:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@master
- name: Deploy to Firebase
uses: w9jds/firebase-action@master
with:
args: deploy
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
masterブランチにプッシュされたら Firebase deploy のコマンドを実行する、という内容ですので必要に応じて書き換えてください
ここまでくれば準備完了です。
実際に自動デプロイされるか試してみましょう
GitHubにプッシュしてみる
適当に修正後コミットしてmasterブランチにプッシュしてみましょう。
実行結果は"Actions"から確認できます。
緑のチェックがついていれば正常終了です。
デプロイの内容がFirebaseに反映されているはずです
感想
無事デプロイされていました。
ビルドやテストもできるようですね
便利だ。。。自動化ってすばらしい！
一度設定してしまえばあとはプッシュするだけでおｋです
環境気にせずに作業できます。簡単にできますのでぜひ試してみてください！