Vueとflaskの連携のやり方【Vue&flask】

Flask

プロジェクトを用意する

まず最初に作業フォルダを作ります。今回はVuefrontendディレクトリ,flaskbackendディレクトリにして作業します。

プロジェクト名
├── 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つです。

  1. VueでSPAを実装するので全てのURLでファイルを返す必要がある。
  2. ファイルの参照先を変更する。

flaskをSPAに対応させる(全てのURLでファイルを返す)

SPAで実装する際のflaskでは全てのパスにおいて表示する必要があります。
SPAに対応させるには以下のようにルーティングをすればOKです。

@app.route('/',defaults={'path':''})
@app.route('/<path:path>')
def index(path):
    return render_template('index.html')
Single-Page Applications — Flask Documentation (1.1.x)

ファイルの参照先を変更する

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等のファイルのパスが正しくなくなってしまったかもしれませんが、そこは適宜調整してください。

タイトルとURLをコピーしました