Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめてのCircleCI2.0の続編です。

今回は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/で以下のようなページが表示されます。

image.png

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

image.png

キャッシュを設定する

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と出ます。

image.png

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

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

キャッシュが効く前

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

image.png

キャッシュ設定後

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

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

image.png

まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away