LoginSignup
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-17

vagrant上でVue.js+Flaskを使ってみる。

こんにちは。
新卒マイナス1年目エンジニアの和尚です。

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

開発環境

  • vagrant
  • centOS 6.8
  • vue 2.9.6
  • node 8.11.2

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

問題発生

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

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

npm runは成功しているのに、ブラウザでエラーが発生します...
スクリーンショット 2018-06-17 17.04.29.png

解決策

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にアクセスしてみます。
スクリーンショット 2018-06-17 17.10.59.png

成功ですね。

後半編のFlaskのエラー回避

後半編「Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する【後半 - サーバーサイド編】」では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/にアクセスしてエラーが起きなければ成功です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6