WSL Ubuntu20.04 で Vue.js のテンプレートを起動したが、Windows側からアクセスできなかった

Webアプリ開発

前提

  • WSL2 on Windows 10 Pro
  • ディストリビューション: Ubuntu 20.04
  • 環境:nodejs や npm、Vue-CLIはインストール済み

やったこと

$ vue create hoge
# vue-CLI に色々聞かれますが、ここは[Vue 3]を選択しました

$ cd hoge
$ npm run serve

> hoge@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 4327ms                                          9:32:22 AM

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.30.250.126:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

問題

この状況で、ホスト側(Windows)のブラウザから http://localhost:8080/ にアクセスすると、

というようになり、アクセスできませんでした。

原因

色々調べてみると、どうやら自分の環境では何らかの理由でポート8080が使えない状況になっているのが原因のようでした。(なぜ8080が使えないのかは不明。他のアプリが使っているのかも?)

解決策

Vue CLIで作成したプロジェクトで起動する開発サーバーのポート番号を変更する | DevelopersIO
Vue CLIで作成したプロジェクトはコマンドで簡単に開発サーバーが起動できます。このときポート番号はデフォルトで8080となっています。今回この起動時のポート番号を変更する機会があったので設定方法を共有します。

↑を参考にさせて頂きました。

vue create hoge を実行すると、hogeディレクトリ内に vue.config.js が自動生成されています。
これを下記のように修正します。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer: {
+    port: 8888,    # ポートはとりあえず適当
+  },
})

これを保存して、再度 vue を立ち上げてみました。

$ npm run serve

> hoge@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 4327ms                                          9:32:22 AM

  App running at:
  - Local:   http://localhost:8888/ 
  - Network: http://172.30.250.126:8888/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

とりあえずポートが8888で起動しているっぽいです。

http://localhost:8888/ にアクセスすると、アクセスできました!

とりあえず備忘録として残しておきます。

コメント

タイトルとURLをコピーしました