CircleCIからFirebaseへデプロイ

CircleCIを回してFirebaseへデプロイをしてみたかったので調べてやってみました。

CircleCI上での設定

Environment Variables

まずはCircleCI側に、Firebaseの情報を設定していきます。 CircleCIの設定画面のEnvironment Variablesに

FIREBASE_PROJECT_NAME
FIREBASE_TOKEN

を設定します。Environment VariablesからAdd Variableをクリックすれば、各値を設定することができます。

f:id:yoshitaku_jp:20181210215307p:plain

FIREBASE_PROJECT_NAME は、今現在取り組んでいるプロジェクトの名前を設定すればOKです。

FIREBASE_TOKEN はfirebase login:ciコマンドをローカル環境で実行すると、ブラウザでの認証が終わったあとにコンソールるに表示されます。

一部内容を変えて、実行結果を載せておきます。

yoshitaku$ firebase login:ci

Visit this URL on any device to log in:
URLが

Waiting for authentication...

✔  Success! Use this token to login on a CI server:

＜FIREBASE_TOKENの内容＞

Example: firebase deploy --token "$FIREBASE_TOKEN"

config.ymlの設定

画面上の設定が終わったら、config.ymlの設定です。下はビルドして、デプロイをしている内容です。

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8

    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run:
          name: 'Build Client Code'
          command: npx webpack
      - persist_to_workspace:
          root: .
          paths:
            - .
  deploy:
    docker:
      - image: circleci/node:8
    working_directory: ~/repo
    steps:
      - attach_workspace: 
            at: .
      - run:
          name: 'Install Dependecies'
          command: npm install -save firebase-tools
      - run:
            name: 'Deploy to Hosting'
            command: npm run deploy
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build

package.jsonのscripts 部分

config.ymlで、command: npm run deployを使いました。package.jsonのscript部分では"deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\""と記述しています。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot",
    "build": "webpack -p",
    "deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\""
  },