Cloud9でvue-cli環境を作る #JavaScript

最近開発はめっきりcloud9でやってます。

Cloud9便利ですよね。
環境構築する必要がないのですぐ試せるし
クラウドなのでPCさえあればどこでも同じ環境ですぐ実行できます

~~さらに現在の現場ではプロキシかまされててGitHub等にpushできないんですが、Cloud9ではそんなん関係なくpushできる~~

Cloud9でvue-cliを使う

VueJSの雛形を作成するvue-cliをCloud9で使おうとしたら少しハマったので、備忘録も兼ねて

cloud9のworkspaceは Node.js を選択しております

vue-cliインストール

まずはvue-cli自体をインストールします

npm install -g vue-cli

vue.jsプロジェクトを作る

次にカレントディレクトリにvue.jsのプロジェクトを作ります

vue init webpack .
npm install

サーバを立ち上げてみる

npm run dev

デフォルトの状態で立ち上げると以下の画面になり正常に表示されません

Cloud9でサーバを起動できるように修正

Cloud9ではポートやIPアドレスの設定を変更する必要が多々あり、今回のvue-cliもその対象でした。

build/webpack.dev.conf.jsの24行目付近を以下のように修正します

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: true,
  hot: true,
  compress: true,
- host: process.env.HOST || config.dev.host,
- port: process.env.PORT || config.dev.port,
+ host: '0.0.0.0',
+ port: '8080',
+ disableHostCheck: true,

サーバを立ち上げてみる

npm run dev

この状態でサーバを立ち上げると以下のページが表示され正常に起動することができました

以上です