npm run dev で起動したサーバーに外部からアクセスする(webpack-dev-server)

はじめに

はじめてvueでSPA作ろうと思い npm run dev してみたはいいものの外部からのアクセスができず躓いてしまったので備忘録。

プロジェクト作成から起動まで

※vue-cliがインストールされていない方はつぎのコマンドで。

$ npm i -g @vue/cli

1. プロジェクト作成

$ vue init webpack-simple <プロジェクト名>

2. モジュールインストール

$ cd <プロジェクト名>
$ npm i

3. 起動

$ npm run dev
> vue_test_app@1.0.0 dev /home/treskot-test/vue_test_app/vue_test_app
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
Unable to open browser. If you are running in a headless environment, please do not use the open flag.
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

外部からアクセスできない

※後日追記予定