よしたく blog

ほぼ週刊で記事を書いています

CircleCIからFirebase Hostingへデプロイ

f:id:yoshitaku_jp:20181203152044p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の11日目の記事です。

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_TOKENfirebase 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\""
  },

まとめ

  • CircleCIからFirebaseへデプロイができた
  • CicleCI上でfirebase-toolsをインストールする際に、躓いた
    • グローバルにはインストールできない
    • -saveをつけた
  • builddeployでのattach_workspaceの受け渡しも学べた