hsano.jp

Note from daily life.

HugoプロジェクトをCircleCIでFirebase Hostingにデプロイする

Posted at — Aug 3, 2019

前提

設定

CIサービスがFirebaseに接続するためのトークンを生成

以下のコマンドを実行する。

firebase login:ci

指示に従う（URLが表示されるか、ページに誘導されるので、トークンに権限を付けるための承認をする） その後トークンがコンソールに表示される。

トークンをCircleCIに保存

トークンを、CircleCIの環境変数として使えるようにするので、以下のいずれかの方法でトークンを FIREBASE_TOKEN の名前で保存する。

  1. プロジェクトのページ → Settings → BUILD SETTINGS の下の Environment Variables
  2. アカウントのホーム → SETTINGS → Contexts

CircleCIの設定ファイルを設置する

以下のYAMLを .circleci/config.yml として保存する。

version: 2
jobs:
  build:
    docker:
      - image: cibuilds/hugo:latest
    steps:
      - checkout
      - run: mkdir public
      - run: hugo
      - persist_to_workspace:
          root: .
          paths:
            - .
  deploy:
    docker:
      - image: circleci/node:latest
    steps:
      - attach_workspace:
          at: .
      - run: npm install firebase-tools
      - run: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN
workflows:
  version: 2
  build-deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master

この設定でやっていることは…

  1. Build: cibuilds/hugo:latest イメージを使ってHugo環境を立ち上げ、 hugo コマンドで静的ファイルを ./public に生成、ワークスペースを永続化する
  2. Deploy: circleci/node:latest イメージを使ってNodeJS環境を立ち上げ、 firebase-tools コマンドをインストールした後、デプロイを実行する

workflows 部分ではステップの依存関係と、CIを発動させるブランチのフィルターを設定している。

以上。