GitlabCIを使ってbuildやデプロイをしたので、ちょっとメモ。
トークンを取得する
$ firebase login:ci
Googleアカウントの認証をしろとブラウザの画面に表示されるので、認証させましょう。
ターミナルでは、トークンが表示されるので、これをメモしておきます。
Gitlabに登録
さっき取得したトークンをGitlabに登録します。SettingsからVariablesの項目を開きます。
ここにKEY名をFIREBASE_TOKENとでもしてさっきのトークンを入力して保存しましょう。
.gitlab-ci.ymlを記述する
プッシュしたらlintとbuild、deployが走るようにします。
image: node:8
stages:
- lint
- build
- deploy
eslint:
stage: lint
script:
node node_modules/eslint/bin/eslint .
build:
stage: build
only:
- master
script:
- npm rebuild node-sass --force
- ./node_modules/.bin/webpack
artifacts:
paths:
- public/
image: rambabusaravanan/firebase
deploy-prod:
stage: deploy
only:
- master
script:
- firebase deploy --token $FIREBASE_TOKEN
npm rebuild node-sass --forceは以下のようなエラーが出たでの書いています。
Node Sass could not find a binding for your current environment: Linux/musl 64-bit with Node.js 9.x
stages: - lint - build - deploy
stagesを書くことによって、どんなことを行うかを明確にすることができる。また、ここに記載した順番で実行されるためlinterかけてbuildして・・・などの順番を指定する時にはいいね。こう書くことによって、どれかが失敗したらそれ以降は実行されないようになる。
stages: - lint - build - deploy
この順番だとlintで失敗したらbuildは行われないということ。Gitlabを見るとこんな感じに綺麗に表示される。
artifactsを使うことによって、buildしたものをダウンロードすることができるようになる。
artifacts:
paths:
- public/
Artifactsという項目が追加されますね。ダウンロードするとbuildされたものが取得できます。
更新するとnot foundになる
firebaseにデプロイしてうまくいったかと思いきや、ページをリロードするとnot foundになってしまいます。firebase.jsonに以下の記述を追加しましょう。
{
"source": "**",
"destination": "/index.html"
}
],
こんな感じで設定していけば、git pushした時にeslintやbuildが走ってfirebaseにデプロイまでしてくれる。