cloud9でvue-cli 3 環境構築

手元にChromebookしか無くなってしまったので、何か開発したいときはcloud9を活用しています。
今回、vue-cli@3環境をcloud9に構築した際に少し設定が必要だったのでメモ書いて置きます。

ちなみに、vue-cli@2の環境構築はこちらの記事が参考になりました。

Node.jsのversion up

公式ドキュメントによると、とりあえず version 8.11.0+ が推奨のようです。

Node Version Requirement

Vue CLI requires Node.js version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with nvm or nvm-windows.

2018/11/22現在、cloud9におけるNode.jsワークスペースのnodeのversionはnvm含め以下となります。条件を満たしているものがありませんね

$ node -v
v6.11.2
$ nvm ls
        v0.8.28
       v0.10.48
       v0.12.18
         v4.8.4
->      v6.11.2
         v8.4.0
         system
default -> 6 (-> v6.11.2)
node -> stable (-> v8.4.0) (default)
stable -> 8.4 (-> v8.4.0) (default)
iojs -> N/A (default)

stableがv11.2.0のようですので、こちらをインストールします。

$ nvm version-remote stable
v11.2.0
$ nvm install stable
$ nvm current
v11.2.0
$ nvm alias default v11.2.0

yarnをinstallする

これは完全に趣味ですが、yarnをinstallします。

$ npm install -g yarn
$ yarn -v
1.12.3

vue-cli@3をinstallする

$ yarn global add @vue/cli
$ vue --version
bash: vue: command not found

パスが通っていないようなので、~/.bashrcに以下の内容を追記します。

~/.bashrc

export PATH="$PATH:`yarn global bin`"

$ source ~/.bashrc
$ vue -V
3.1.3

準備ができました。

プロジェクトを作成する

プロジェクトの初期設定については今回触れないので、とりあえずvue createします。適当に選んでEnterを押して下さい。

$ vue create vue-cloud9
$ cd vue-cloud9
$ yarn serve

さて、cloud9あるあるですが、このままではhttp://<プロジェクト名>-<アカウント名>.c9users.io:8080/でアプリケーションにアクセスできません。私の場合はInvalid Host headerと表示されました。
そのため、vue.config.jsをvueプロジェクトディレクトリ直下に作成します。

vue.config.js

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

再び$ yarn serveすることで、アプリケーションにアクセスすることが出来ます