Edited at

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で遊んでみたいと思います。