Vue CLIで作成したプロジェクトで起動する開発サーバーのポート番号を変更する

こんにちは。サービスグループの武田です。

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

環境

今回の検証環境は以下となります。

$ node -v
v10.15.3

$ vue -V
3.5.3

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.3
BuildVersion:	18D109

Vueのバージョンは2.6.10です。また、vueコマンドがインストールされていない場合は、npm install -g @vue/cliでインストールします。

プロジェクトを作成して開発サーバーを起動してみる

まずはVue CLIを利用してプロジェクトを作成します。

$ vue create change-devserver-port

presetはManualにして、すべてデフォルトを選択します。

最後の項目を選択するとインストールが始まります。インストールが終わったら開発サーバーを起動してみます。

$ cd change-devserver-port
$ npm run serve

次のメッセージが表示されました。リンクから8080番ポートで立ち上がっているのがわかります。

 DONE  Compiled successfully in 3671ms                                  00:00:00

Type checking and linting in progress...

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

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

No type errors found
No lint errors found
Version: typescript 3.3.4000, tslint 5.14.0
Time: 4064ms

設定変更はvue.config.js

それではこの開発サーバーのポート番号を変更しましょう。一応起動時のオプションでもポート番号の指定はできますが、今回は設定ファイルを用意する方法を採用します。

Vue CLIで作成したプロジェクトは、プロジェクトルートにvue.config.jsを用意すると自動的にロードするしくみになっています。詳細は公式ドキュメントを参照してください。

Configuration Reference | Vue CLI

このvue.config.jsファイルに開発サーバーが使用するポート番号を指定できます。それではさっそく、次のように設定ファイルを作成します。

cat > vue.config.js <<EOF
module.exports = {
    devServer: {
        port: 8888,
        disableHostCheck: true,
    },
};
EOF

この設定により開発サーバーが8888番ポートで立ち上がります。またdisableHostCheckのパラメーターを追加していますが、必須ではありません。ただし、プロキシサーバーのバックエンドに開発サーバーを置いて開発するような場合、このパラメーターを入れないとWebsocketでエラーが発生します。実際に詰まった部分ですので、ついでに入れておきました。

それでは再び開発サーバーを起動してみます。

$ npm run serve

先ほど8080だったポート番号が8888に変わっているのが確認できました。

 DONE  Compiled successfully in 3971ms                                  11:11:11

Type checking and linting in progress...

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

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

No type errors found
No lint errors found
Version: typescript 3.3.4000, tslint 5.14.0
Time: 4979ms

まとめ

Vue CLIで作成したプロジェクトは、内部でwebpackを使用しており、開発サーバーもwebpackのモジュールであるwebpack-dev-serverを使っています。vue.config.jsでそれらのオプションを集約できるため、設定が散らばらず管理しやすいように構成できます。いろいろなオプションを指定できるので、ドキュメントはぜひ一度目を通してみてください。