プロジェクトを用意する
まず最初に作業フォルダを作ります。今回はVueをfrontendディレクトリ,flaskをbackendディレクトリにして作業します。
プロジェクト名
├── backend
└── frontend
プロジェクトフォルダとbackendフォルダを作成
プロジェクトフォルダとbackendフォルダを作成します。
そしたらbackendフォルダにapp.py
を追加しておきましょう。
プロジェクト名
└── backend
└── app.py
Vue CLIでfrontendを作成
プロジェクトフォルダ直下にVue CLIでfrontendのフォルダを作成します。また今回はVue Routerを使います。
vue create frontend
プロジェクト名
├── backend
│ └── app.py
└── frontend
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
flask側のコードを書く
一通りプロジェクトが作り終わったらapp.pyにバックエンド側のコードを書いていきます。
普通にflaskを書く時との違いのポイントは2つです。
- VueでSPAを実装するので全てのURLでファイルを返す必要がある。
- ファイルの参照先を変更する。
flaskをSPAに対応させる(全てのURLでファイルを返す)
SPAで実装する際のflaskでは全てのパスにおいて表示する必要があります。
SPAに対応させるには以下のようにルーティングをすればOKです。
@app.route('/',defaults={'path':''})
@app.route('/<path:path>')
def index(path):
return render_template('index.html')
ファイルの参照先を変更する
flaskではrender_template
でファイルを返すのが一般的かと思いますが、デフォルトではtemplatesフォルダを参照してファイルを返しています。
つまりtemplatesフォルダにないファイルはrender_template
ができないということになります。
この参照先は変更することができます。
今回はfrontend側のVueでbuildした結果生成されるファイルを参照するべきなので、frontend/dist
を参照します。
(Vueではbuildされるとdistフォルダを生成する)
render_template
で返すファイルの参照先はtemplate_folder
static系ファイルの参照先はstatic_folder
(dist/staticの作り方は下で解説)
で変更できます。
app = Flask(__name__, static_folder='../frontend/dist/static', template_folder='../frontend/dist')
flaskのコードまとめ
from flask import Flask, render_template
app = Flask(__name__, static_folder='../frontend/dist/static', template_folder='../frontend/dist')
@app.route('/',defaults={'path':''})
@app.route('/<path:path>')
def index(path):
return render_template('index.html')
if __name__=='__main__':
app.run(debug=True)
Vue側のコード
先ほどflaskでstatic系のファイルはstaticフォルダに参照するように変更しました。
しかしデフォルトではstaticフォルダは生成されないので、staticフォルダを作って、その配下にstatic系のファイルを生成するように設定します。
具体的にはfrontendフォルダ直下にvue.config.js
を作ります。vue.config.js
はデフォルトではないのでtouchコマンド等でファイルを作ってください。
vue.config.js
には以下の内容を記述します。
module.exports = {
assetsDir: "static",
}
プロジェクト名
├── backend
│ └── app.py
└── frontend
├── README.md
├── babel.config.js
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vue.config.js
あとはflask側が参照するファイルを生成するために、Vueをビルドしましょう。
以下のコマンドをfrontendフォルダ下で実行します。
npm run build
flaskでサーバーを立てる
あとはバックエンド側(flask)のプログラムを実行しサーバーを立てましょう。
python3 app.py

アクセスしてみる

これでVueとflaskの連携が完了しました。
favicon等のファイルのパスが正しくなくなってしまったかもしれませんが、そこは適宜調整してください。