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

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

#Github Actionsについて
####Github Actionsとは
Githubが提供する機能の一部で[CI(継続的インテグレーション）](https://cloudbees.techmatrix.jp/devops/ci/)/ [CD(継続的デリバリー)](https://cloudbees.techmatrix.jp/devops/cd/)が実行できます。

####CI/CDとは
テストや本番環境へのデプロイを自動化する仕組みのこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/fb460607-9110-1ee0-dde6-3a5fe5e45bba.png)

####個人的に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に入れて設定する
![スクリーンショット 2020-09-22 22.55.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/d481d398-8a58-9b46-af93-cba7a0bdfc75.png)


####01.Github Actionsにて非公開にしたい変数を登録して使用する
APIkeyや環境変数など晒したくない情報はGithubのSecretsに変数を登録することで公開されることなく利用することができます。
手順①SettingsからSecretsをクリック
![スクリーンショット 2020-09-22 22.13.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/31e2fe89-abe7-6e4a-6352-f95632b5ea65.png)
手順②Secretsに変数としてenvファイルのAPIkeyなどを追加していく
![スクリーンショット 2020-09-22 22.20.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/5d1f4478-5960-0c47-55eb-a8b3c454e0a1.png)


####02.YAMLファイルの作成とワークフローの実行
※Githubアカウントにログインしてレポジトリを作成できている上での説明になります
手順①作成したレポジトリのActionsにいき、New workflowをクリック
![スクリーンショット 2020-09-22 15.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/355d8907-9dd1-b64e-ce39-65fd7b969349.png)
手順②Set up this workflowからワークフローを作成！！
基本的にsuggestされているけどこのページの下にもさまざまなワークフローが用意されている。
![スクリーンショット 2020-09-22 18.02.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/72a8bece-2a18-31ed-f755-8c934ff67c1c.png)
手順③レポジトリの```.github/workflows/```配下にYAMLファイルが作成されるのでカスタマイズ
ここでは、masterにpushされたら、 ubuntu-latest のdockerイメージをもちいて、 steps: 以降の処理を順次実行していってます。
steps: の中の uses: で使用するライブラリを指定、run: で実行するコマンドを記述していきます。

```yaml:.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ファイルを書く場所がわからなくてエラーから抜け出せなかった件について(´ﾟдﾟ｀)

```yaml:.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を環境変数に入れる

```js: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にプッシュしてデプロイされるのを確認してみる
![スクリーンショット 2020-09-22 23.17.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619648/96ee52bd-d1bd-e6e2-d918-f240d5bbf1a0.png)
デプロイが成功できたのが確認できたら、プロジェクト名.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/