概要
vue-cliで作成したプロジェクトをPythonのwebサーバライブラリのflaskでデプロイしてみる。
flaskを使うメリット
webサーバはApacheやnginx、express（Node.js）などたくさんあり、どれでもVueプロジェクトをデプロイすることはできる（はず）。FlaskはPython上で動くのでPythonのライブラリが使えるというメリットがある。すなわちNumPyやTensorflow*1やScikit-learnをネイティブに使える。
Vueの設定
Flaskはcssやjsをstatic_folderに格納しなければうまく動かない。そのため、Vueがbuildするときにstatic下にcssとjsを生成するように設定する。
まずpublicディレクトリの下にstaticというディレクトリを作る。Vueのプロジェクトのルートにvue.config.jsというファイルを作成して下記の通り書き込む。
module.exports={assetsDir: 'static'}
この設定を行ったうえでbuildする。するとプロジェクトのルートの下にdistというディレクトリができ、中にbuildされたプロジェクトが生成される。
Flaskの設定
Flaskコンストラクタでtemplate_folderとstatic_folderを指定する。template_folderにはdistディレクトリを、static_folderにはdist/staticを指定する。
以上の設定の上でサーバを起動する。するとnpm run serveで実行したときと同様の画面が表示される。
Flaskがlocalhost以外からアクセスできない場合
Flaskを立ち上げているPC以外からFlaskで立ち上げたhttpサーバにアクセスできないことがある。これにはいくつかの原因が考えられる。
1つめに、app.runにhost=0.0.0.0と指定する。
app.run(host=0.0.0.0)
2つめに、OSやセキュリティソフトのファイアウォールによってポートがふさがっている場合がある。Windowsの場合、ポートが開いているかどうかはPowershellからTest-NetConnectionコマンドで確認することができる。
Test-NetConnection -ComputerName (IPアドレス) -Port (ポート番号)
*1:NodeでもTensorflow.jsを使えば実装できる。だがTensorflow.js用にモデルを変換する必要がある。
