チラシ裏日記上等!!新館

Webアプリケーションエンジニアの雑記帳。映画とかアニメとかの記事も書きます。

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のアカウントへのアクセスを許可するだけです。

f:id:Tomato-360:20181111023337p:plain

f:id:Tomato-360:20181111023343p:plain

f:id:Tomato-360:20181111023349p:plain

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

Waiting for authentication...

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

トークンの文字列

Example: firebase deploy --token "$FIREBASE_TOKEN"

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

f:id:Tomato-360:20181111024227p:plain

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

jobsbuilddeploy を作り、 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_cachesave_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でしか動かしたくないので workflowsfilters でmasterに限定する

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

参考書籍

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

WEB+DB PRESS Vol.107

WEB+DB PRESS Vol.107

  • 作者: 大竹智也,浦井誠人,平野朋也,村田紘司,上野学,末永恭正,久保田祐史,吉川竜太,上野博司,牧大輔,西郡卓矢,桑原仁雄,小林謙太,竹馬光太郎,池田拓司,はまちや2,竹原,長谷川智希,北村壮大,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/10/24
  • メディア: 単行本
  • この商品を含むブログ (1件) を見る

関連URL

www.chirashiura.com