GitlabのCIを使ってeslintとbuild・firebaseへのデプロイを行う

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にデプロイまでしてくれる。