はじめてのCircleCI2.0の続編です。
今回はCircleCIでNuxtのビルドをやってみます。
Nuxtをセットアップする
Nuxtでミニマムなサイトを作ります。
package.jsonに以下を記述してyarnします。
{
"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!」と表示するだけの簡素なページを作ります。
<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も用意しておきます。
.nuxt/
dist/
node_modules/
yarn-debug.log*
yarn-error.log*
これでアプリケーションの準備ができました。
ビルドの設定をする
今度は.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は非常に重い処理なので、毎回、ゼロからインストールされると時間がかかるのでキャッシュさせてみます。
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で遊んでみたいと思います。