#はじめに
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: で実行するコマンドを記述していきます。
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ファイルを書く場所がわからなくてエラーから抜け出せなかった件について(´ﾟдﾟ｀)
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を環境変数に入れる
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とは？？？
Github Actionsについて