今回はCircleCIでNuxtのビルドをやってみます。

Nuxtをセットアップする

Nuxtでミニマムなサイトを作ります。

package.jsonに以下を記述してyarnします。

package.json

{
  "name": "circleci-hands-on",
  "license": "MIT",
  "scripts": {
    "start": "nuxt",
    "test": "exit 0",
    "build": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^1.2.1"
  }
}

testは~~面倒くさかったので、~~exit 0としました。

「Hello world!」と表示するだけの簡素なページを作ります。

./pages/index.vue

<template>
    <h1>Hello {{ name }}!</h1>
</template>

<script>
    export default {
        data: () => {
            return {name: 'world'}
        }
    }
</script>

yarn startと打つとhttp://localhost:3000/で以下のようなページが表示されます。

yarn buildと打つと`./dist/ディレクトリにビルドされていることがわかります。

dist
├── 200.html
├── _nuxt
│   ├── LICENSES
│   ├── app.cc5a91b49f55997c2d7f.js
│   ├── layouts
│   │   └── default.c605bf7c8c94c47a9469.js
│   ├── manifest.90d855d682a394c98736.js
│   ├── pages
│   │   └── index.7895feda7d3f7424e12c.js
│   └── vendor.e1fa44924e3d93a9bdd6.js
└── index.html

3 directories, 8 files

.gitignoreも用意しておきます。

.gitignore

.nuxt/
dist/
node_modules/
yarn-debug.log*
yarn-error.log*

これでアプリケーションの準備ができました。

ビルドの設定をする

今度は.circleci/config.ymlでビルドの設定をします。

.circleci/config.yml

version: 2
jobs:
  build:
    docker:
      - image: node:9.4.0
    steps:
      - checkout
      - run:
          name: Install dependencies
          command: yarn
      - run:
          name: Build
          command: yarn build
      - run:
          name: Check dist
          command: ls -la dist

Check distを見てみると、ビルドしたことを確認できます。

キャッシュを設定する

yarnは非常に重い処理なので、毎回、ゼロからインストールされると時間がかかるのでキャッシュさせてみます。

.circleci/config.yml

version: 2
jobs:
  build:
    working_directory: ~/workspace # 追加
    docker:
      - image: node:9.4.0
    steps:
      - checkout
      - restore_cache: # 追加
          key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: yarn
      - run:
          name: Build
          command: yarn build
      - run:
          name: Check dist
          command: ls -la dist
      - save_cache: # 追加
          key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
          paths:
            - ~/workspace/node_modules

`working_directory`

今回からWork Directoryを指定しました。

`save_cache`

下からいきます。

node_modulesディレクトリをまるごとキャッシュします。

キャッシュをリストアするときにyarn-{{ .Branch }}-{{ checksum "yarn.lock" }}で呼ぶように設定しました。

.Branch等、使える変数はドキュメント参照。
https://circleci.com/docs/2.0/caching/#restoring-cache

`restore_cache`

キャッシュがある場合はリストアします。

今回はブランチごとにキャッシュさせるように設定したので、一回目の実行はNo cache is found for keyと出ます。

キャッシュが効いているか確認する

CircleCIの右上にある「Rebuild」をクリックして、yarnの実行速度が改善されているか確認してみましょう。

キャッシュが効く前

Install dependenciesに14秒かかっていました。

キャッシュ設定後

キャッシュのリストアに少し時間がかかっていますが、Install dependenciesが1秒にまで縮まっています。

今回のサンプルではあまり数秒の短縮になりましたが、プロジェクトが大きくなるほど、違いが大きくなります。

まとめ

CircleCIでアプリケーションのビルドをやってみました。

次の記事では2.0の特徴のひとつであるWorkflowで遊んでみたいと思います。

CircleCI2.0でアプリケーションをビルドする