Vue.jsとFlaskでSPA(Single Page Application)

普段はフロント側を書く機会がほとんど無いのですが、プロジェクトをモダンなフレームワークに順次対応していきたいと思い、勉強を兼ねてVue.jsとFlaskでSPAに初挑戦しました。ネット上にある記事はVue2で書かれていることが多く、router周りの設定でエラーが発生してそのままでは起動できなかったので、Vue3に対応したコードで書き換えています。

開発環境

PC: MacBook Pro (14, 2021)
OS: macOS Monterey 12.0.1
Python: 3.9.1
Flask: 2.2.3
Vue: 3.2.47

完成時のディレクトリ構造

※vue createコマンドで生成されるnode_modulesと仮想環境のvenvは非表示にしています。

.
├── backend
│   └── app.py
└── frontend
    ├── README.md
    ├── babel.config.js
    ├── config
    │   └── index.js
    ├── dist
    │   ├── favicon.ico
    │   ├── index.html
    │   └── static
    │       ├── css
    │       │   └── app.c5557091.css
    │       └── js
    │           ├── app.81ccbf27.js
    │           ├── app.81ccbf27.js.map
    │           ├── chunk-vendors.4f456998.js
    │           └── chunk-vendors.4f456998.js.map
    ├── jsconfig.json
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── AvoutView.vue
    │   │   └── HomeView.vue
    │   ├── main.js
    │   └── router
    │       └── index.js
    └── vue.config.js

フロントエンド（Vue）でアプリを起動

初めに@vue/cliをインストールします。既にインストールされていれば飛ばします。

npm install -g @vue/cli

vue -Vで以下のように表示されればインストールできています。

@vue/cli 5.0.8

vueのアプリケーションを作成します。（frontendの部分は任意の名前でOKです）

vue create frontend

Vue3で開発していくのでVue 3を選択してエンターを押して実行します。（デフォルトで選択されているので、そのままエンターでOK）コマンドを実行するとfrontendディレクトリが追加されます。

以下の画像のようにそれぞれコマンドを実行して開発サーバーを起動します。

cd frontend

npm run serve

画像のように表示されたら、http://localhost:8080/にアクセスして開発サーバーが起動できているか確認します。起動に成功すると以下の画像のように表示されます。

表示するページ（コンポーネント）の追加

別タブなどで新規のターミナルを開いて.vueファイルの追加を行います。.vueファイルがあるcomponentsディレクトリに移動して編集を行います。

cd frontend/src/components

最初からあるHelloWorld.vueは使わないので削除します。続けてHomeView.vueとAboutView.vueを作成します。

rm -r HelloWorld.vue

touch HomeView.vue AboutView.vue

src/components/HomeView.vue

<template>
  <div>
    <p>Home</p>
  </div>
</template>

src/components/AboutView.vue

<template>
  <div>
    <p>About</p>
  </div>
</template>

src/App.vue

src内にあるApp.vueを以下のように差し替えます。

<template>
  <div id="app">
    <h1>Vue with Flask</h1>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  text-align: center;
}
</style>

http://localhost:8080/にアクセスして以下のように表示されていれば成功です。

Vue Routeを使用してSPAのルーティング

各URLに合わせて表示するページを切り替える設定を行います。srcディレクトリに戻り、vue-routerのインストールとrouterディレクトリを作成します。routerディレクトリを作成したらルーティング用のindex.jsを作成します。

cd ../

npm install vue-router

mkdir router

touch router/index.js

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../components/HomeView';
import AboutView from '../components/AboutView.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {name: 'Home',  path: '/',  component: HomeView},
    {name: 'About', path: '/about', component: AboutView},
  ],
});

export default router;

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App)
    .use(router)
    .mount('#app')

http://localhost:8080/とhttp://localhost:8080/aboutにアクセスしてそれぞれ表示されているか確認します。

バックエンド（Flask）でアプリを起動

次はFlaskの設定を行ないます。ターミナル等の別タブで新規ディレクトリとpyファイルを追加します。

mkdir backend

touch backend/app.py

pipでFlaskをインストールします。

pip install flask

backend/app.py

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 catch_all(path):
    return render_template("index.html")

Vue.jsとFlaskの接続

Flaskはapp.pyのstatic_folderとtemplate_folderに指定したdist/staticからファイルを読み込みますが、そのままnpm run buildコマンドでビルドするとstaticが生成されないので、以下のようにビルドしたファイルを保存するディレクトリ（dist/static）を指定します。assetsDir: “static”を追記することでビルドしたファイルがdist/staticに保存されます。

frontend/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: "static",
})

ビルドコマンドを実行します。ビルドが完了するとfrontendディレクトリにdistディレクトリが追加されます。このディレクトリにVue側で作成したファイルが生成されています。

npm run build

Flaskサーバーの起動

flask runコマンドでFlaskサーバーを起動します。

FLASK_APP=backend/app.py flask run

http://127.0.0.1:5000/とhttp://127.0.0.1:5000/aboutでそれぞれ表示が変わっている確認します。npm run serveで起動していたフロント側の開発サーバーはCtrl＋Cで停止します。

Vue.jsはコンポーネントと呼ばれる要素を他のページから呼びせる仕組みがとても便利です。例えばヘッダーやフッターなどの共通の要素をコンポーネント化しておけば必要なところで読み込むことができます。変更が必要なときも元のファイルを変更すれば、使用している全てのページにも反映されるので保守性にも優れています。

---

株式会社ファントムへのお問い合わせ

群馬県でPythonを使ったAIやソフトウェアを開発している株式会社ファントムが運営しています。