はじめに

超・初心者向けシリーズ。
とりあえずVue.js始めてみたいけどどんな感じでやってみたらいいの？な人向け。

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

手順

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. ESLintのインストール

なんか色々インストールしているが、「とりあえずこれを静的解析に入れておけばかなり良い感じにチェックしてくれる」なものを入れている。

$ npm init -y
$ npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue

4. ESLintの設定ファイル(.eslintrc.yml)の作成

rulesの no-undef: warnは今回の記事では不要だが、CDN版でaxiosを動かそうとするとエラーが出てしまうので……

.eslintrc.yml

extends:
  - 'plugin:vue/recommended'
  - 'plugin:vue/essential'
  - 'standard'
env:
  browser: true
rules:
  no-undef: warn
globals:
  Vue: true

5. ESLint実行の設定

ESLintの実行はそのままだと面倒なので、npm run lint で実行できるようにしておく。
npm init -y した時に作成される package.json の以下の部分を書き加える

package.json

(前略)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"  ★この行を消して
    "lint": "eslint contents/*.js contents/*.html"         ★この行を書き加える
  },
(以下略)

6. おためしコンテンツを作成

contents/index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue TEST</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="/app.js"></script>
  </body>
</html>

contents/app.js

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!!'
  }
})

app.$mount('#app')

7. 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 contents/index.html s3://neruneruo-vuejs-test-bucket/index.html --acl public-read
$ aws s3 cp contents/app.js s3://neruneruo-vuejs-test-bucket/app.js --acl public-read

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

あとは、ガンガン npm run lint しながら Vue.js の世界を堪能しよう！