vagrant上でVue.js(vue-cli)+Flaskを使用した際に発生した接続エラーを回避する

#vagrant上でVue.js+Flaskを使ってみる。
こんにちは。
新卒マイナス１年目エンジニアの和尚です。

今日はvagrantでVue.js(vue-cli)を使って、ブラウザにアクセスしたところ接続エラーになってしまったので、その時の回避策を紹介したいと思います(大した内容じゃないですw)

開発環境

• vagrant
• centOS 6.8
• vue 2.9.6
• node 8.11.2

Vue.js+Flaskの導入参考資料

• Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する【前半 - フロントエンド編】

問題発生

上記の参考資料でVue.jsでの開発勉強しようと思って進めていたところ、下記の部分で躓きました。

ここですでに http://localhost:8080/ でブラウザで確認することができますが、ページの追加方法を見ていきます。

npm runは成功しているのに、ブラウザでエラーが発生します...

解決策

hostの部分をvagrantfileで設定しているipアドレスにします。
私の場合は192.168.33.10です。

/frontend/config/index.js

'use strict'

const path = require('path')
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},


    host: '192.168.33.10', // '←をlocalhostからipに変更する'
    port: 8080, process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
~

##アクセスしてみる
http://192.168.33.10:8080にアクセスしてみます。

成功ですね。

##後半編のFlaskのエラー回避
後半編[「Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する【後半 - サーバーサイド編】」] (https://qiita.com/mitch0807/items/c2e84beee6c9a61e86cd)ではFlask(python)を利用してサーバサイドの構築をしていますが、ここでも記述通りに行うとエラーが発生します。

以下を実行してあげると、Flaskサーバーが立ち上がります。
$ (venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run

ここでhostを指定していないので、接続エラーが発生します。

ここも簡単で、hostを指定してあげましょう。

$ (venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run --host=192.168.33.10

これでhttp://192.168.33.10:5000/にアクセスしてエラーが起きなければ成功です。