LoginSignup
18

More than 3 years have passed since last update.

github Actionsで pushされたらfirebase hostingにdeployする

Last updated at Posted at 2019-12-17

概要

githubのActionsという機能を利用すると、ci/cdができるみたいなので使ってみました。

image.png

やりたいこと

  1. master pushされたらfirebase hostingにサイト(react)をdeployしたい
  2. デプロイしたいサイトが別リポジトリにあるので git pullで最新をダウンロードしたい
  3. デプロイしたいサイトにbasic認証をかけたいので firebase functions経由でデプロイしたい

3 は最初に設定しておけばいいので、この記事には実はあんまり関係ないです。

前提

ビルド環境はmac使ってます。
firebase hostingへのdeploy設定はあらかじめしておくこと。(.firebasercfirebase.jsonの作成など)

1.リポジトリにymlを追加する

githubのWebUI上からも追加できますが、コードエディタでファイル追加すればできます。
リポジトリ直下に .github というディレクトリを作成、さらにその下に workflows というディレクトリを作成し、ymlファイルをおきます。拡張子が .ymlであればファイル名なんでも大丈夫です。

nodejs.yml
name: Node CI

on: 
  push:
    branches: 
      - master

jobs:
  build:

    runs-on: macos-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - uses: actions/checkout@master
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@master
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, build, and test
      run: |
        cd ./functions
        git clone https://userid:$GIT_PASS@github.com/xxx/yyyyy.git
        cd yyyyy
        npm install
        npm run build
      env:
        GIT_PASS: ${{ secrets.GIT_PASS }}

  deploy:

    runs-on: macos-latest

    strategy:
      matrix:
        node-version: [12.x]

    name: Deploy
    needs: build
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Build each site
        run: |
          cd ./functions
          git clone https://userid:$GIT_PASS@github.com/xxx/yyyyy.git
          cd yyyyy
          npm install
          npm run build
        env:
          GIT_PASS: ${{ secrets.GIT_PASS }}
      - name: Ready to deploy
        run: |
          npm install -g firebase-tools
          cd functions
          npm install
      - name: Deploy to Firebase
        run: |
          firebase deploy --token $FIREBASE_TOKEN
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

buildとdeployでほぼ同じことやってますが、buildしたファイルがartifact使わずそのまま引き継がれるかわからなかったので繰り返してるだけです。

Build でやっていることは
1. functionsに移動
2. git clone で別リポジトリにあるreactプロジェクトをコピー
3. プロジェクトに移動
4. npm installで必要モジュール
5. npm run build でhostingにdeployする用のビルドファイルを生成

Deployでやっていることは
1. Buildと同じこと繰り返す
2. firebase-toolsをインストール
3. functionsに移動
4. npm install で必要モジュールをインストール
5. firebase deploy でトークンを指定してhostingにサイトを展開

という感じです。
デプロイするサイトの情報は .firebasrcfirebase.json に設定していることを前提としています。

ちなみに env: で設定している GIT_PASS はgithubアカウントのパスワード、FIREBASE_TOKEN は firebaseのトークンを環境変数として設定したものを参照しています。

あとテストは入れてないです。テスト入れたい人はpackage.jsonとかにJest追加してみて、npm test をJobに設定してください。

2.環境変数を設定する

次は環境変数を設定します。
Github repogitory の Settings - Secrets を開きます。
下記画面は既に設定されてますが、Add a new secret から、FIREBASE_TOKENとGIT_PASSを追加します。

スクリーンショット 2019-12-17 17.56.45.png

GIT_PASSは自分のパスワードを設定します。
FIREBASE_TOKENはターミナルから次のコマンドを入力します。

  • firebase-toolsが入っていることが前提です。入ってない人はインストールしてください。
firebase login:ci

これでGoogleアカウントの認証が起動するのでログインして進むと、ターミナルにトークンが発行されます。
それを環境変数のValueにペーストすればOKです。

3.動かしてみる

適当にreadmeとか追加してgit pushしてください。
Actionsがこうなってたら成功です。

スクリーンショット 2019-12-17 18.07.34.png

最後に

非常にベタな書き方で書いてます。npm scriptとか使えばもっときれいに書けるんでしょうか...
こうすればもっとエレガントになるよ、という方はどうぞコメントお願いします。
おかしなところのご指摘も是非お願いします。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18