Zenn
📝

Cloud9 で Vue.js のプレビューができなかった話

2025/03/10に公開
AWS
Vue.js
Cloud 9
tech

以下の方法でプレビューできました。

  • vue.config.js を以下のように定義
vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: 'all'
  }
})
  • セキュリティグループで 8080 ポートへのアクセスを許可する
  • http://<Cloud9 のパブリック IP アドレス>:8080 の形式でアクセスする

背景

AWS Cloud9 で Vue.js を使う #cloud9 - Qiita
Vue.jsを使って管理画面を作る

上記サイトなどでは Cloud9 で Vue.js のプレビューをする場合、vue.config.js に以下の定義が必要である旨の報告がありました。

vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

しかし、上記を定義した場合には以下のエラーが発生してローカルサーバーを起動できませんでした。

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'disableHostCheck'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

上記エラーについては webpack-dev-server の仕様変更が原因でした。
webpack-dev-server/migration-v4.md at 0002ebfbc8f36e92f91013372c9e2bca97022825 · webpack/webpack-dev-server

The disableHostCheck option was removed in favor allowedHosts: 'all':

V3 までは disableHostCheck が使用できたようですが、V4 からは allowedHosts に変わったようです。
vue.config.js を以下のように定義することで npm run serve でサーバーを起動することはできました。

vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: 'all'
  }
})

しかしながら、Cloud9 の「Preview Running Application」をクリックしても以下のメッセージが表示されるのみで、Vue.js のプレビューができませんでした。

Oops
VFS connection does not exist
There was an error proxying the request.

同時に、Cloud9 IDE には以下のメッセージも表示されていたため、8080 ポートへのアクセスが被疑箇所であると推測しました。

You may be using the wrong PORT & IP for your server application.Try passing port 8080 to properly launch your application.」

そこで、Cloud9 環境の EC2 インスタンスのセキュリティグループを確認したところ、インバウンドルールが定義されていなかったため、マイ IP から 8080 ポートでアクセスできるようにルールを追加しました。
そのうえで、以下の URL にアクセスしたところ、Vue.js のアプリが表示されることを確認できました。

  • http://<Cloud9 のパブリック IP アドレス>:8080

手順

Cloud9 で Vue.js アプリをプレビューするまでの手順です。

Vue.js アプリの作成

$ mkdir -p ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc
$ npm install -g @vue/cli
$ vue create sample

vue.config.js の編集

以下の内容を定義します。

vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: 'all'
  }
})

ローカルサーバー起動

$ cd sample
$ npm run serve

Cloud9 のパブリック IP アドレスへアクセス

Cloud9 環境の EC2 インスタンスのセキュリティグループのインバウンドルールで 8080 ポートを解放します。

以下のコマンドで Cloud9 のパブリック IP アドレスを確認します。

$ echo $C9_HOSTNAME
13.231.26.150

http://<Cloud9 のパブリック IP アドレス>:8080 の <Cloud9 のパブリック IP アドレス> を上記コマンドで出力された IP アドレスに置換してアクセスすることで Vue.js のアプリが表示されます。

まとめ

今回は Cloud9 で Vue.js のプレビューができなかった話を紹介しました。
どなたかの参考になれば幸いです。

参考資料

Discussion