AWS Cloud9 で Vue.js を使う

1. Environmentを作成

いつも通り、AWS Cloud9上でCreate environmentをクリックして作成する

2. node.jsをインストール

Vue.js では node.js が必要になるが、AWS Cloud9 では既にインストールされている。以下のコマンドで確認。

node --version

3. Vue CLIをインストール

npm install -g @vue/cli
npm install -g @vue/cli-service-global

4. プロジェクトを作成

vue create <project_name>

5. 設定ファイルを追加

プロジェクト直下に、下記のファイルを作成する。

vue.config.js

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

これをしておかないと、npm run serve しても invalid hedder error が出て動かせない。

6. プロジェクトを実行

cd <project_name>
npm run serve

あとは、AWS Cloud9 上で「Preview」をクリックすれば表示される。