hiko1129's note

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

2019/08/13

想定読者

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

firebaseのtokenを生成

firebase login:ci

CircleCIの環境変数にtokenを設定

FIREBASE_DEPLOY_TOKENfirebase login:ciで生成したtokenを設定

.circleci/config.ymlを書く

前提条件

  • firebase-toolsをdevDependenciesに追加している
  • deploy-production scriptの中身はnpm run build && firebase deploy --project ${projectId}(projectIdは適宜実際に使っているもの)
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に書いた」は続編的なものです。


hiko1129

hiko1129
Twitter GitHub Qiita Qrunch Blog