概要
githubのActionsという機能を利用すると、ci/cdができるみたいなので使ってみました。
やりたいこと
- master pushされたらfirebase hostingにサイト(react)をdeployしたい
- デプロイしたいサイトが別リポジトリにあるので git pullで最新をダウンロードしたい
- デプロイしたいサイトにbasic認証をかけたいので firebase functions経由でデプロイしたい
3 は最初に設定しておけばいいので、この記事には実はあんまり関係ないです。
前提
ビルド環境はmac使ってます。
firebase hostingへのdeploy設定はあらかじめしておくこと。(.firebaserc
やfirebase.json
の作成など)
1.リポジトリにymlを追加する
githubのWebUI上からも追加できますが、コードエディタでファイル追加すればできます。
リポジトリ直下に .github
というディレクトリを作成、さらにその下に workflows
というディレクトリを作成し、ymlファイルをおきます。拡張子が .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にサイトを展開
という感じです。
デプロイするサイトの情報は .firebasrc
、firebase.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を追加します。
GIT_PASSは自分のパスワードを設定します。
FIREBASE_TOKENはターミナルから次のコマンドを入力します。
- firebase-toolsが入っていることが前提です。入ってない人はインストールしてください。
firebase login:ci
これでGoogleアカウントの認証が起動するのでログインして進むと、ターミナルにトークンが発行されます。
それを環境変数のValueにペーストすればOKです。
3.動かしてみる
適当にreadmeとか追加してgit pushしてください。
Actionsがこうなってたら成功です。
最後に
非常にベタな書き方で書いてます。npm scriptとか使えばもっときれいに書けるんでしょうか...
こうすればもっとエレガントになるよ、という方はどうぞコメントお願いします。
おかしなところのご指摘も是非お願いします。