Flask + Vue.jsの備忘録
フロントエンドをVue、バックエンドをFlaskとした場合のアプリ作成に躓いたので備忘として残します。
ディレクトリ構成
今回は以下のようにフロントとバックを分けて作成しました。
mainDir
-backend
--venv
--app.py
-frontend
--dist
--src
フロントエンド側(Vue.js)作成
createコマンドでVue環境を作成する。その際に名前をfrontendとして作成。
今回はオプションの類を全てNoにして作成を進める。
npm create vue@latest
Vue.js - The Progressive JavaScript Framework
√ Project name: ... frontend
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes
Scaffolding project in C:\gitDir\flask1\frontend...
Done. Now run:
cd frontend
npm install
npm run dev
コンソールログに出ている通り、runコマンドを実行すると作成したvueのプロジェクトが起動するため画面が表示されることを確認する。画面が表示されていれば確認はOKなのでCtrl+Cで一度サーバを落とす。
cd .\frontend\
npm install
npm run dev
> frontend@0.0.0 dev
> vite
VITE v5.2.7 ready in 455 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
frontedディレクトリ内でvueプロジェクトをビルドする。初期設定のままであればdistディレクトリが作成され、そのディレクトリ内にビルドされたファイルが格納されるため、フロント側はこれで一旦準備完了。
npm run build
> frontend@0.0.0 build
> vite build
vite v5.2.7 building for production...
✓ 23 modules transformed.
dist/index.html 0.43 kB │ gzip: 0.28 kB
dist/assets/index-BaMTLMsk.css 3.71 kB │ gzip: 1.19 kB
dist/assets/index-pkPZQdrn.js 63.51 kB │ gzip: 25.10 kB
✓ built in 723ms
バックエンド側(Flask)作成
バックエンド用にディレクトリを作成し、venvで仮想環境を構築+Flaskをインストールする。
mkdir backend
cd .\backend\
python -m venv backend
.\backend\Scripts\activate
pip install Flask
backendディレクトリ内に以下のようなapp.pyファイルを作成する。Vueのビルド結果のファイルを初期ディレクトリとして扱うため、static_folderとtemplate_folderはvueのビルドディレクトリに合わせている。
1つ目の関数はindex.html用で2つ目の関数はjsやcssファイル用。
from flask import Flask, render_template, send_from_directory
app = Flask(__name__, static_folder='../frontend/dist', template_folder='../frontend/dist')
@app.route('/')
def index():
return render_template('index.html')
@app.route("/<path:path>")
def sendModuleFile(path):
return send_from_directory(app.static_folder, path)
if __name__ == '__main__':
app.run()
上記の状態でbackendディレクトリからFlaskプロジェクトを起動。
flask run
Vueで作成したindex.html自体は参照出来ているようだが、jsやcssファイルの参照が上手くいっておらずエラーとなっているためvite.config.jsにbaseを設定した。
export default defineConfig({
base:"./",
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
上記修正後、vueのファイルを再度buildしなおしてflaskを起動したところ問題なくindex.htmlが確認できた。
詰まったところまとめ
Flaskからvueのファイルを参照する際にあらかじめstatic_folderやtemplate_folderに参照ディレクトリを設定すること
相対パスで参照するためにvite.config.jsにbaseを追加する必要があった
jsやcssを返すのにもflaskを経由する必要があるので専用の関数を作る必要があった
この記事が気に入ったらサポートをしてみませんか?