はじめに
Cloud9にて「vue serve」が実行できなかったので、実行する手順をまとめました。
情報元
情報元は以下の記事です。
AWS Cloud9でVue.js開発、devServerを自動的に設定する。
本記事では上記の記事の一部を初心者向けの手順にまとめました。
フォルダ・ファイル構成
最終的には以下のようなフォルダ・ファイル構成となります。
まずは教科書通りにやる！
Cloud9にアクセスします。
Terminalが表示されていなければ、ツールバーの「Window」→「New Terminal」をクリックし、Terminalを表示する。
Terminalにて以下の2個のコマンドを実行して、Vue CLIをインストールする。
npm install -g @vue/cli
npm install -g @vue/cli-service-global
Terminalにて以下のようなコマンドを実行し、プログラムを配置するフォルダを作成し、配置するフォルダに移動する。
mkdir -p ~/environment/vue/my-first-vue
cd ~/environment/vue/my-first-vue/
Vueのソースを新規作成するために、左側のツリーにて以下のように「my-first-vue」を右クリックし、「New File」をクリックする。
「Untitled」となっているファイル名を「app.vue」に変更する。
作成した「app.vue」をダブルクリックしエディタで開く。
エディタにて以下のように入力し、Macならば「command+s」、Windowsならば「Ctrl+s」で保存する。
<template>
<div id="app">
<h1>こんにちはVue.js</h1>
</div>
</template>
Terminalにて以下のコマンドを実行する。
vue serve
Terminalで以下のような表示になるまで待つ。
ツールバーの「Preview」→「Preview Running Application」をクリックする。
以下のような表示となる。
本来は「こんにちはVue.js」と表示されるべきなのに、上記のように表示されるのは、「vue serve」で起動したVueのdevServerが、Cloud9経由のアクセス（Cloud9が自動で割り振ってくれたホスト名でのアクセス）を許可していないためである。
Cloud9で動かすための追加手順
devServerにてCloud９経由でのアクセスを許可するために以下のような手順を実施する。
Vue CLI（Vue.jsのコマンドラインツール）の設定ファイルを追加するために、左側のツリーにて以下のように「my-first-vue」を右クリックし、「New File」をクリックする。
「Untitled」となっているファイル名を「vue.config.js」に変更する。
作成した「vue.config.js」をダブルクリックしエディタで開く。
エディタにて以下のように入力し、Macならば「command+s」、Windowsならば「Ctrl+s」で保存する。
module.exports = {
devServer: {
disableHostCheck: true
}
}
Terminalを選択状態にして、Macならば「control+c」、Windowsならば「Ctrl+c」でdevServeを終了させる。
Terminalが以下の表示になれば良い。
Terminalにて以下のコマンドを実行する。
vue serve
Terminalで以下のような表示になるまで待つ。
ツールバーの「Preview」→「Preview Running Application」をクリックする。
以下のような表示となる。
これでCloud9でVue.jsが実行できた！