【GitHub Actions】GitHub Actionsを使ってFirebase HostingへNext.jsアプリを簡単デプロイ

はじめに

こんにちは、がんがんです。
最近はNext.jsを用いた開発をよく行っています。Next.jsで何か作るときは無料で使えるということもあり、Hosting先やFunctionsとしてFirebaseを用いることが多々あります。

しかし、クラウドサービスを使用するときのあるあるとして、「デプロイがめんどくさい」ということがあるかと思います。

実際、とてもめんどくさいなと思いながらデプロイコマンドを打っています。そこで以前から気になっていたGitHub Actionsを用いた自動デプロイ環境を整えることにしました。

今回はGitHub Actionsを用いたFirebase HostingへのCI / CD環境の設定に関する備忘録を残しておきます。

目次

目的

• GitHub Actionsを使ってみる
• Firebase Hostingへのデプロイを自動化する

参考記事

公式サイト
ワークフローを設定する - GitHub Docs

GitHub Actionsのワークフロー構文 - GitHub Docs

GitHub Action for Firebase · Actions · GitHub Marketplace · GitHub

参考サイト
Github ActionsでFirebaseをデプロイする - きり丸の日記

React Next アプリを GitHub Actions で GitHub Pages にデプロイ - Qiita

Firebaseサイドの準備

まずはHosting先のプロジェクトを用意する必要があります。プロジェクトの準備やHostingに関しては下記を参照ください。
gangannikki.hatenadiary.jp

gangannikki.hatenadiary.jp

上記サイトと異なる点はFirebaseへのログイン方法です。今回はciシステムで生成されるトークンが必要になるため、ciシステムでログインします。

$  firebase login:ci

ログイン時に生成したトークンはリモートリポジトリ→Setting→Secretsよりシークレットキーの設定を行ってください。

ワークフローの設定

GitHub Actionsでワークフローの作成を行っていきます。下記コードはNode.jsとFirebaseにおけるExampleを参照して作成しています。

今回のケースでは/my-app直下にpackage.jsonが存在するため、RUNのたびに移動している感じです。こちらは各アプリごとに変更ください。

/.github/workflow/firebase.yml

name: Deploy Firebase Hosting

on:
  push:
    branches:
      - dev

jobs:
  build-and-deploy:
    name: Firebase Deploy
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      
      - name: install package
        run: |
          cd my-app
          yarn install --frozen-lockfile
      
      - name: build Next.js
        run: |
          cd my-app
          yarn build

      - name: export Next.js
        run: |
          cd my-app
          yarn export

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

おわりに

今回はGitHub Actionsを用いてFirebase Hostingへのデプロイを自動化していきました。テストやデプロイ関係はなにかと面倒なので今後もどんどん自動化を検討していきたいと思います。