2019年12月版 Cloud9 + Vue でとりあえず動くまでの手順

目的

1. Cloud9上での vue app の開発環境の構築

前提

1. 利用するリージョンは ap-northeast-1
2. アプリ名は myapp

構築手順

1. Cloud9の開発環境作成

   aws consoleで作成

2. nodeのインストール

   最新、または、好みのバージョンを確認

   $ nvm ls-remote
   

   指定したバージョンでインストールを実行

   $ nvm install 指定のバージョン
   

   今回は v13.5.0 をインストール

   $ nvm install v13.5.0
   

3. vue cli のインストール

   $ npm install @vue/cli
   

4. vue project の作成

   $ vue create myapp 
   $ cd myapp
   

5. vue app を起動して確認（失敗）

   $ npm run serve 
   

   メニューの Preview -> Preview Running Application を実行
   Invalid Host header と表示されアクセスできない

6. vue config の作成

   vue.config.js を以下の内容で myapp のルートに作成する

   vue.config.js

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

7. vue app を起動して確認

   $ npm run serve 
   

   メニューの Preview -> Preview Running Application を実行
   Vueアプリが表示される