GitHubでFirebase Hostingを自動デプロイした

2 min読了の目安(約1800字TECH技術記事

GitHub Actionsを使って、masterブランチにpushされたら、自動的にFirebase Hostingのデプロイコマンドが発火させる手順について記載します。

Firebase tokenの発行

まず、事前にデプロイ用のFirebaseトークンを発行します。

$ firebase login:ci
...
Example: firebase deploy --token 1//...

作成したトークンを控えておきます。

GitHub Actionsのworkflow作成

続いて、GitHubのActionsにworkflowを作成します。

初めて作成する場合は以下のような画面になっているので、「set up a workflow yourself→」をクリックして新規作成画面に遷移します。
Image from Gyazo

開かれたエディタ内に以下の内容を貼り付けてください。

name: deploy_firebase_hosting
on:
  push:
    branches:
      - master
jobs:
  deploy_firebase_hosting:
    runs-on: macos-latest
    steps:
      - name: Checkout the repository
        uses: actions/checkout@master
	# ポイント1
	# ↓↓↓ node_modulesはgit管理していないと思いますので、ここで、nodeモジュールを取得するコマンドをjobとして設定します。
      - name: Install Dependencies # ← コマンド識別名
        run: yarn install # ← 実際のコマンド
	# ポイント2
	# ↓↓↓ ビルドファイルを作成するためのコマンド
      - name: Build
        run: yarn run build
	# ポイント3
	# ↓↓↓ Firebaseのデプロイコマンドここに先ほど控えたトークンを貼り付けます
      - name: Deploy to Firebase
        run: yarn deploy --token=${{先ほど控えたトークン}}

ポイントは3つです。
git管理されていない、node_modulesファイル、buildファイル関連はgit上には上がっていないので、ここで生成してあげる必要があります。

ymlファイル内でjobとしてコマンドを設定してあげます。
firebaseデプロイコマンドに先程生成したトークンを貼るのを忘れないように!

Firebase Deployコマンドの追加

最後に設定したyarn deploy --token=...package.jsonにエイリアスコマンドの設定として追加してあげましょう。

...
},
"scripts": {
	...
	"deploy": "firebase deploy"
	},
	...

以上です!
これらの変更をmasterブランチに反映すると、自動的にGitHub上のActionsにてジョブが稼働していきます!

さいごに

今回初めてGitHubでデプロイなどの自動化を行いました。
機械的に実行できるところはなるべく自動化して、他に時間を使っていきたいものですね。

これで、ymlファイルの用法なんかもついでに学べたので、今度じっくり公式のワークフローのドキュメント読んでみようかなぁと思います。

https://docs.github.com/ja/free-pro-team@latest/actions/reference#ワークフロー構文