Github Actionsでfirebaseに自動デプロイ（CI/CD)環境を構築する方法

13283 ワード
Firebase React GitHub GitHubActions CICD GitHub テキストリンク

はじめに

Github ActionsにてCI/CD環境を構築したのでメモ代わりにまとめてみました。
今回はGithub Actionsを用いたCI/CDが目的なのでfirebaseにデプロイするだけの場合は以下にわかりやすい記事のリンクを貼っておくので確認してみてください！！
・Firebaseで初めてのデプロイ

Github Actionsについて

Github Actionsとは

Githubが提供する機能の一部でCI(継続的インテグレーション）/ CD(継続的デリバリー)が実行できます。

CI/CDとは

テストや本番環境へのデプロイを自動化する仕組みのこと

個人的にGithub Actionsいいなって思ったところ

①レポジトリ配下にある.git/workflows/に.ymlファイルを作成して書くだけでGithub Actionsを使用できる！！
②github上のActionsからカスタマイズされたワークフローが選択でき、直接.ymlファイルを生成できる

Github Actionsの使い方

00.firebase認証トークンの設定

まずデプロイの際に必要になるfirebase認証トークンを設定していく


firebase login:ci

firebase CLIがGoogleアカウントへのアクセスをリクエストしてくるので、許可してトークンを控えておきます。
ログインすると以下のように出てくる

Waiting for authentication...

✔  Success! Use this token to login on a CI server:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

そのトークンをSecretsのFIREBASE_TOKENのvalueに入れて設定する

01.Github Actionsにて非公開にしたい変数を登録して使用する

APIkeyや環境変数など晒したくない情報はGithubのSecretsに変数を登録することで公開されることなく利用することができます。
手順①SettingsからSecretsをクリック

手順②Secretsに変数としてenvファイルのAPIkeyなどを追加していく

02.YAMLファイルの作成とワークフローの実行

※Githubアカウントにログインしてレポジトリを作成できている上での説明になります
手順①作成したレポジトリのActionsにいき、New workflowをクリック

手順②Set up this workflowからワークフローを作成！！
基本的にsuggestされているけどこのページの下にもさまざまなワークフローが用意されている。

手順③レポジトリの.github/workflows/配下にYAMLファイルが作成されるのでカスタマイズ
ここでは、masterにpushされたら、 ubuntu-latest のdockerイメージをもちいて、 steps: 以降の処理を順次実行していってます。
steps: の中の uses: で使用するライブラリを指定、run: で実行するコマンドを記述していきます。

.github/workflows/deploy.yml

name: demo-app
on:
  push:
    branches:
      - master
jobs:
  firebase-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master
      - run: yarn install
      - run: yarn build
        env:
          FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
          FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
          FIREBASE_DATABASE_URL: ${{ secrets.FIREBASE_DATABASE_URL }}
          FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
          FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
          FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
          FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
          FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
      - uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
envファイルを書く場所がわからなくてエラーから抜け出せなかった件について(´ﾟдﾟ｀)
.github/workflows/deploy.yml

name: demo-app
on:
  push:
    branches:
      - master
jobs:
  firebase-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master
      - run: yarn install
      - run: yarn build
      - uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
          FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
          FIREBASE_DATABASE_URL: ${{ secrets.FIREBASE_DATABASE_URL }}
          FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
          FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
          FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
          FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
          FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

最初は上記のようにenvを一番最後に記述していたところfirebaseのkeyがinvalidだよと怒られていました（汗）
keyとかはyarn buildした段階で設定しないといけないみたい。

03.envファイルに書いたkeyを環境変数に入れる

next.config.js
module.exports = {
  env: {
    FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
    FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
    FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL,
    FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
    FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
    FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
    FIREBASE_MEASUREMENT_ID: process.env.FIREBASE_MEASUREMENT_ID,
  },
};

process.env.NODE_ENV

envファイルの値を参照するにはprocess.env.で参照できます。

04.masterにプッシュしてデプロイされるのを確認してみる


デプロイが成功できたのが確認できたら、プロジェクト名.web.appでページを開いて確認！！！
これで自動デプロイの完成です。

感想

CI/CD構築するということに難しそうという抵抗感があってなかなか進みませんでしたが、Gihub Actionsが便利すぎ！！！
ただ.ymlファイルに記述の仕方がいまいち理解できていなかったりAPIkeyを環境変数に入れて使用することに戸惑ったりしました。
これからもこんな感じで新しく学んだことはqiitaに軽くメモ程度に書いて投稿していこうと思いました。

参考文献

CI/CDとは？？？

https://pfs.nifcloud.com/navi/words/ci_cd.htm

Github Actionsについて

https://developer.yukimonkey.com/article/20200422/