フロントエンドを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を経由する必要があるので専用の関数を作る必要があった