GatsbyJSで制作したブログのFirebase HostingへのデプロイをCircleCIで自動化する方法

想定読者

CircleCIは知っている
Firebase Hostingはよく知らない

firebaseのtokenを生成

1
firebase login:ci

CircleCIの環境変数にtokenを設定

FIREBASE_DEPLOY_TOKENにfirebase login:ciで生成したtokenを設定

.circleci/config.ymlを書く

前提条件

firebase-toolsをdevDependenciesに追加している
deploy-production scriptの中身はnpm run build && firebase deploy --project ${projectId}（projectIdは適宜実際に使っているもの）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
version: 2.1
commands:
  deploy_to_firebase:
    parameters:
      firebase_token:
        type: env_var_name
        default: FIREBASE_DEPLOY_TOKEN
    steps:
      - run: |
          npm i
          npm run deploy-production --  --token=${<<parameters.firebase_token>>}          
jobs:
  deploy_production:
    docker:
      - image: circleci/node:10
    steps:
      - checkout

      - restore_cache:
          keys:
            - node_modules-cache-{{ .Branch }}-{{ checksum "package-lock.json" }}
            - node_modules-cache-{{ .Branch }}
            - node_modules-cache

      - run:
          name: npm install
          command: npm install

      - save_cache:
          key: node_modules-cache-{{ .Branch }}-{{ checksum "package-lock.json" }}
          paths:
           - ./node_modules

      - deploy_to_firebase

workflows:
  version: 2
  main:
    jobs:
      - deploy_production:
          filters:
            branches:
              only: master

「CircleCI2.1の新機能使ってブログのCI設定をDRYに書いた」は続編的なものです。