はじめに

初心者向けシリーズ。
前回の記事で「Vue.js、チョットワカッテキタ」な感じになってきたら。

以下の通りに実行していけば、S3の静的Webサイトホスティング上でVue CLIでビルドしたVue.jsのHello Worldが動くようになる。

Vue CLIはけっこうすごくて、これを使いこなせるとJavaScriptの静的コンテンツのCI/CDを回せるようになる。楽しい。

手順

1. yumのアップデート

$ sudo yum update

2. Node.jsのインストール(npmがNode.jsに含まれる)

Vue.jsの静的解析はESLintという強力なlinterがあるので、それを動かすためにnpmを入れておく。

Node.jsについては、予め、rpm.nodesource.com でサポートバージョンを確認しておく。今回は、記事を書いたタイミングでサポートされている14をインストールする。

$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install -y nodejs

3. Vue CLIのインストール

npmを -g でインストールするときは /usr/lib を触ったりすることもあるので、sudo で実行。

$ sudo npm install -g @vue/cli @vue/cli-init

4. プロジェクトの作成

$ vue init webpack test

質問に答えていくとプロジェクトが作られる。

プロジェクト名とか説明とかAuthorは適当に設定して、ビルドはランタイムを入れよう。

今回はVue-Routerは使わないのでNo、ESLintはStandardなチェックをするように入れておく。

単体テストはしておけるように、テストランナーでJestを入れておく。

NPMかYarnか選択できるが、今回はNPMを使う。

これでしばらく待つと、コマンドが終了し、以下のディレクトリ構造のプロジェクトが作成される。

test
├── .babelrc
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── .postcssrc.js
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── static
│   └── .gitkeep
└── test
    └── unit
        ├── .eslintrc
        ├── jest.conf.js
        ├── setup.js
        └── specs
            └── HelloWorld.spec.js

5. おためしコンテンツの作成

ディレクトリ構造の内、src部分が実際にコンテンツを作っていく部分になる。
今回は、以下のようにsrcを修正してみよう。

assets/logo.png を削除(使わない)
App.vueを修正
HelloWorld.vueを修正

App.vue

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: "Hello World!!"
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>

6. 構文チェック

スクリプトを書いたら構文チェックをしておこう。

$ npm run lint

↑の例ではあえてESLintに引っかかるエラーを入れてある。
実行すると、

というエラーが出るはずなので、

HelloWorld.vue

(前略)
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'Hello World!!'  // ★ダブルクォートをシングルクォートに修正
    }
  }
}
</script>
(以下略)

と修正すればエラーが解消するはずだ。

7. テストコードの作成

ディレクトリ構造の内、test部分がテストコードを記述する部分だ。
Vue.jsのテスト自体は色々やり方があるので、以下のコンテンツを見てもらうと分かりやすい。

以下で、Vue Test Utilsのモジュールをインストールする

$ npm install --save-dev @vue/test-utils

今回のテストだと、使用しない機能の部分でエラーが出てしまうので、それを修正しておく。
詳細な説明はこちらを参照。

jest.config.js

module.exports = {
  (中略)
  testURL: 'http://localhost/',
  (中略)
}

さて、これができたらテストコードを書く。
といっても、今回はおためし程度なので、デフォルトをちょっといじる程度にしておこう。

HelloWorld.spec.js

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const wrapper = shallowMount(HelloWorld)
    expect(wrapper.vm.$el.querySelector('.hello h1').textContent).toEqual('Hello World!!')
  })
})

これで、テストを実行する。

$ npm run unit

↓こんな感じで、テストの成否とカバレッジを表示してくれる。
今回の例では、App.vueのテストを作っていないのでカバレッジが0%になっている。

8. ビルド

コンテンツをビルドする。

$ npm run build

すると、distディレクトリが作られ、アップロード用のファイルが以下のように出力される。

dist
├── index.html
└── static
    ├── css
    │   ├── app.3e445f0fd3565060e18da48a5a8354c0.css
    │   └── app.3e445f0fd3565060e18da48a5a8354c0.css.map
    └── js
        ├── app.19b1235d26d10f952294.js
        ├── app.19b1235d26d10f952294.js.map
        ├── manifest.2ae2e69a05c33dfc65f8.js
        ├── manifest.2ae2e69a05c33dfc65f8.js.map
        ├── vendor.3bf08807642cffd4f854.js
        └── vendor.3bf08807642cffd4f854.js.map

9. S3バケットを作成

…の前にコンフィグ設定

$ aws configure
AWS Access Key ID [None]: xxxxxxxxxxxxxxxxxxxx
AWS Secret Access Key [None]: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Default region name [None]: ap-northeast-1
Default output format [None]: json

今度こそバケットを作成

$ aws s3 mb s3://neruneruo-vuejs-test-bucket
$ aws s3 ls

静的Webサイトホスティングの設定

$ aws s3 website s3://neruneruo-vuejs-test-bucket --index-document index.html

ファイルをアップロード

$ aws s3 cp dist s3://neruneruo-vuejs-test-bucket --acl public-read --recursive

これで、静的WebサイトホスティングのURLにアクセスしたら「Hello World!!」が表示されたはずだ。

あとは、package.json に

package.json

  "scripts": {
    (中略)
    "deploy": "npm run lint && npm run test && aws s3 cp dist s3://neruneruo-vuejs-test-bucket --acl public-read --recursive",
    (中略)
  }

を書いておけば、

$ npm run deploy

で良い感じに構文解析しつつテストコードを走らせてからデプロイができる！

EC2作成直後の状態から最速でVue.js(Vue CLI版)のWebサイトを立ち上げて簡易的にCI/CDする