はじめに

Cloud9でデフォルト設定のlocalhostを使用するとアプリの動作確認が出来ません。¹

他にもデフォルト設定のlocalhostを使用する事で正常に起動しないものがあります。

それを解決する為の方法を記載します。

npm run dev

各パターンごとに方法を記載。基本的には記載された内容を実施した後npm run devを実行でOK。

vue init webpack でテンプレートを作った場合

<ProjectName>/build/webpack.dev.conf.jsの一部分を下記の様に変更。

- const HOST = process.env.HOST
+ const HOST = '0.0.0.0'

/build/webpack.dev.conf.jsにdisableHostCheck: true,を追加。

const devWebpackConfig = merge(baseWebpackConfig, {
  .
  .
  .
  // these devServer options should be customized in /config/index.js
  devServer: {
+   disableHostCheck: true,
    clientLogLevel: 'warning',
    historyApiFallback: {

vue init nuxt/starter でテンプレートを作った場合

<ProjectName>/package.jsonの一部分を下記の様に変更。

"scripts": {
-    "dev": "nuxt",
+    "dev": "HOST=0.0.0.0 nuxt",

vue createでテンプレートを作った場合(Vue CLI 3)

プロジェクトのルートフォルダ直下にvue.config.jsを作成して、下記内容を登録。

module.exports = {
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true
  }
}

vue init pwa でテンプレートを作った場合

localhostでアプリが正常に起動した為、設定変更は不要。理由を調査する予定は無し。

Firebase

firebase login

firebase login --no-localhost

firebase serve

firebase serve -o $IP -p $PORT

localhostはログイン中のPCの事であって、Cloud9上のマシンの事では無い為 ↩

Cloud9でlocalhostを使用しない方法まとめ(随時更新)