Cloud9でvue serveを実行する

# はじめに

Cloud9にて「vue serve」が実行できなかったので、実行する手順をまとめました。

# 情報元

情報元は以下の記事です。

[AWS Cloud9でVue.js開発、devServerを自動的に設定する。](https://qiita.com/Akio-1978/items/6a4c3f93da3799a2e607)

本記事では上記の記事の一部を初心者向けの手順にまとめました。

# フォルダ・ファイル構成

最終的には以下のようなフォルダ・ファイル構成となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/45164db6-ce9c-ccb3-c4e5-b8cfd00ed57e.png)

# まずは教科書通りにやる！

Cloud9にアクセスします。
Terminalが表示されていなければ、ツールバーの「Window」→「New Terminal」をクリックし、Terminalを表示する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/a997dd2d-80e2-f42c-5ec1-6c0fdaac855a.png)

Terminalにて以下の2個のコマンドを実行して、Vue CLIをインストールする。

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

Terminalにて以下のようなコマンドを実行し、プログラムを配置するフォルダを作成し、配置するフォルダに移動する。

```bash
mkdir -p ~/environment/vue/my-first-vue
cd ~/environment/vue/my-first-vue/
```

Vueのソースを新規作成するために、左側のツリーにて以下のように「my-first-vue」を右クリックし、「New File」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/e7c2dddd-43c6-c8b9-3191-7b6b2d9901ce.png)

「Untitled」となっているファイル名を「app.vue」に変更する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/3befa883-9a9f-0282-d8b1-0c9ab933c39e.png)

作成した「app.vue」をダブルクリックしエディタで開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/2c2581c2-f44b-b672-0f13-2579688b191f.png)

エディタにて以下のように入力し、Macならば「command+s」、Windowsならば「Ctrl+s」で保存する。

```javascript
<template>
  <div id="app">
    <h1>こんにちはVue.js</h1>
  </div>
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/80cd0420-35c4-97cf-638f-afde77b759ad.png)

Terminalにて以下のコマンドを実行する。

```bash
vue serve
```

Terminalで以下のような表示になるまで待つ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/81551cb8-70cd-eb6c-9bb7-8871c4838754.png)

ツールバーの「Preview」→「Preview Running Application」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/f5e17f3f-2ad1-715e-91f0-b807fa706685.png)

以下のような表示となる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/bd82bd7d-3853-ec29-319b-7132368da908.png)

本来は「こんにちはVue.js」と表示されるべきなのに、上記のように表示されるのは、「vue serve」で起動したVueのdevServerが、Cloud9経由のアクセス（Cloud9が自動で割り振ってくれたホスト名でのアクセス）を許可していないためである。

# Cloud9で動かすための追加手順

devServerにてCloud９経由でのアクセスを許可するために以下のような手順を実施する。

Vue CLI（Vue.jsのコマンドラインツール）の設定ファイルを追加するために、左側のツリーにて以下のように「my-first-vue」を右クリックし、「New File」をクリックする。

「Untitled」となっているファイル名を「vue.config.js」に変更する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/813c8814-794f-7489-e90d-3a96a89db3fd.png)

作成した「vue.config.js」をダブルクリックしエディタで開く。

エディタにて以下のように入力し、Macならば「command+s」、Windowsならば「Ctrl+s」で保存する。

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

Terminalを選択状態にして、Macならば「control+c」、Windowsならば「Ctrl+c」でdevServeを終了させる。
Terminalが以下の表示になれば良い。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/0d531204-14cc-b2d3-c396-a5e04231f391.png)

Terminalにて以下のコマンドを実行する。

```bash
vue serve
```

Terminalで以下のような表示になるまで待つ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/81551cb8-70cd-eb6c-9bb7-8871c4838754.png)

ツールバーの「Preview」→「Preview Running Application」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/f5e17f3f-2ad1-715e-91f0-b807fa706685.png)

以下のような表示となる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254172/d905404a-bd3f-af9b-1fac-4a53d92951de.png)

これでCloud9でVue.jsが実行できた！