CircleCIでNuxt.jsでgenerateした成果物をfirebase hostingにデプロイする

最近Nuxt.jsでWebアプリケーションを作っています。バックエンドはFirebaseをつかっていて、Firebase Hostingにgenerateした静的なファイルをデプロイしてサービスを更新しています。

今までは普通にnuxt generate したものを firebase deploy をしていたのですが、手動でデプロイするのが何とも面倒になってきたのでCircleCIを使ってビルドとデプロイを自動化することにしました。今回はその成果を書いていきたいと思います。

環境

開発環境としては以下のような感じ。

名前	バージョン
Node	9.11.2
Nuxt.js	2.2.0
firebase-tools	6.0.1

nodeはもうバージョンが11まで出ていましたね。でも多分大丈夫だと思います。

事前準備

事前準備でCIrcleCI上でfirebaseコマンドを動かすためにトークンを入手する必要があります。トークンの入手の仕方は簡単で firebase login:ci を実行するだけです。

$ firebase login:ci

実行するとブラウザに飛ばされるのでGoogleアカウントのログインを行ってfirebaseのアカウントへのアクセスを許可するだけです。

これが実行し終わるとターミナルに次のように表示されるはずです。

Waiting for authentication...

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

トークンの文字列

Example: firebase deploy --token "$FIREBASE_TOKEN"

ここで出力されたトークンをCIrcleCIの環境変数に設定します。

CIrcleCIの設定

設定したCircleCIの設定は次の通りです。

version: 2.1
executors:
  default:
    docker:
      - image: circleci/node:10.13
    working_directory: ~/repo
jobs:
  build:
    executor: default
    steps:
      - checkout
      - restore_cache:
          key: dependencies-{{ checksum "package.json" }}
      - run:
          name: Install Dependency
          command: |
            yarn install
      - save_cache:
          key: dependencies-{{ checksum "package.json" }}
          paths:
            - ~/repo/node_modules
      - run:
          name: deploy
          command: |
            yarn run generate
      - persist_to_workspace:
          root: dist
          paths: ./*
  deploy:
    executor: default
    steps:
      - checkout
      - restore_cache:
          key: dependencies-{{ checksum "package.json" }}
      - attach_workspace:
          at: dist
      - run:
          name: deploy
          command: yarn run deploy
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          filters:
            branches:
              only:
                - master
          requires:
            - build

jobs に build と deploy を作り、 workflows で実行しています。それぞれ細かく見ていきます。

build

build の部分だけ抜き出します。

jobs:
  build:
    executor: default
    steps:
      - checkout
      - restore_cache:
          key: dependencies-{{ checksum "package.json" }}
      - run:
          name: Install Dependency
          command: |
            yarn install
      - save_cache:
          key: dependencies-{{ checksum "package.json" }}
          paths:
            - ~/repo/node_modules
      - run:
          name: deploy
          command: |
            yarn run generate
      - persist_to_workspace:
          root: dist
          paths: ./*

executor は以前の記事で書いたように、ジョブで共通して使うビルド環境を executors で定義し、その名前を設定します。

checkout でチェックアウトし、restore_cache でsave_cacheでキャッシュしたコードをリストアし、runでビルドに必要なコマンドを実行します。

ここで注目したいのは persist_to_workspace です。このキーはジョブ間で共通して使いたい成果物を永続化しておくキーです。root キーで成果物が保存されているルートディレクトリを指定し、paths で共有したいファイルのパスを設定します。今回は nuxt generate でビルドした成果物を dist に保存するので root キーに dist を設定し、全てのファイルをデプロイ対象にしたいので paths に ./* を設定しています。

deploy

jobs:
  省略:
  deploy:
    executor: default
    steps:
      - checkout
      - restore_cache:
          key: dependencies-{{ checksum "package.json" }}
      - attach_workspace:
          at: dist
      - run:
          name: deploy
          command: yarn run deploy

ここで注目したいのは attach_workspace です。このキーはpersist_to_workspace で保存した成果物をアタッチします。at はアタッチするディレクトリを指定します。

最後に成果物を run で設定したコマンドでデプロイします。

workflows

workflows の部分を抜き出します。

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          filters:
            branches:
              only:
                - master
          requires:
            - build

workflows にジョブの実行の依存等を書いて生きます。今回デプロイはmasterブランチでしかして欲しくなかったので filters branches only でmasterを設定しています。こう設定することでmaster以外ではdeployジョブを動かさないように出来ます。

まとめ

以上のことをまとめると、

• ビルド結果をCircleCI上でデプロイしたい
  • ビルドジョブで persist_to_workspace を使い成果物を永続化する
  • デプロイジョブで attach_workspace を使い成果物をアタッチしデプロイする
  • デプロイジョブはmasterでしか動かしたくないので workflows の filters でmasterに限定する

のようになります。 persist_to_workspace と attach_workspace は成果物に依存のあるジョブなどで活躍しそうですね。

参考書籍

persiste_to_workspace や attach_workspace もWEB+DB PRESSのCircleCI特集で紹介されていました。勉強になります。

WEB+DB PRESS Vol.107

関連URL

www.chirashiura.com