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

[はじめてのCircleCI2.0](https://qiita.com/sawadashota/items/09b37b303e63f3b897a9)の続編です。

今回はCircleCIで[Nuxt](https://nuxtjs.org/)のビルドをやってみます。

# Nuxtをセットアップする
Nuxtでミニマムなサイトを作ります。

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

```json: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!」と表示するだけの簡素なページを作ります。

```vue:./pages/index.vue
<template>
    <h1>Hello {{ name }}!</h1>
</template>

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/83325/662abb31-6810-0200-2953-751480564c86.png)

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

```bash
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:.gitignore
.nuxt/
dist/
node_modules/
yarn-debug.log*
yarn-error.log*
```

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

# ビルドの設定をする

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

```yaml:.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`を見てみると、ビルドしたことを確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/83325/2e382312-8d0d-8ee9-93e2-4f73860bbce0.png)

# キャッシュを設定する

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

```yaml:.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`と出ます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/83325/d7bfaff7-a3ea-75ed-598b-b686aefb2f97.png)

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

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

## キャッシュが効く前

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/83325/d20c96f8-15b9-40c6-90d9-53820096e9af.png)

## キャッシュ設定後

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/83325/0d2efc3d-82ff-163a-250e-8d5a49e2bfb2.png)

# まとめ

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

[次の記事](https://qiita.com/sawadashota/items/ba89382d563bc90bb5cd)では2.0の特徴のひとつであるWorkflowで遊んでみたいと思います。