nakasyou's website
FastAPIでVue.jsを使う
2023/06/20
2023/06/20
Vue.jsFastAPIPyhtonVite

こんにちは。nakasyouです。この記事を読めば、(多分)FastAPIでVue.jsを使う方法がわかります。

最近(2023年6月)、YouTubeダウンローダーを作るのが流行ってるらしいです(?)。1 だから、作ってみようと思いました。

yt-dlpをFastAPIで使いたかったのです。yt-dlpはPython製で、Pythonと相性がいいからです。 またFastAPIにした理由は、Pythonでサーバーを作る私のトレンドが、FastAPIだからです。

FastAPI+yt-dlpだと、UIフレームワークが足りません。HTML+Vanilla JavaScriptでもいけますが、かなりきついです。(UIフレームワーク依存症) また、TypeScriptも欲しいです。

そこで、UIフレームワークは、Vueにしました。Vue.jsがわからない人は、この記事を読んでいないと思うので、解説はしません。

構成

構成は、以下の通りです。

作成

では、やってみましょう。

まず、Vue.jsプロジェクトを作成します。(筆者はパッケージマネージャにpnpmを用いていますが、別でも構いません。)

pnpm create vue@latest

適当な選択をして、作成されたディレクトリに移動します。ただし、この記事では、src/main.tsをエントリーポイントとします。

次に、FastAPIのバックエンドを作成します。

# backend/main.py

import FastAPI from fastapi # FastAPIの読み込み
import HTMLResponse from fastapi.response # FastAPIのHTMLレスポンスをするため
import uvicorn # uvicornの読み込み

app = FastAPI()

@app.get("/")
def dev():
  with open("backend/dev.html") as f:
    return HTMLResponse(f.read())

uvicorn.run(app) # サーバー起動

これで、開発モードの処理は完成です。HTMLを返すだけのプログラムです。 「ViteとかVue.js出てきてないじゃん」って思ったかもしれません。それは、HTMLに書くのです。

HTML

<!-- backend/dev.html -->
<!doctype HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue on FastAPI</title>
  </head>
  <body>
    <script type="module" src="http://localhost:5173/@vite/client"></script>
    <script type="module" src="http://localhost:5173/src/main.ts"></script>
    <div id="app"></div>
  </body>
</html>

解説します。

まず、localhost:5173は、Viteの開発モードが動いているパスです。

<script type="module" src="http://localhost:5173/@vite/client"></script>

上のコードで、Viteの開発モードのスクリプトを埋め込んでいます。

<script type="module" src="http://localhost:5173/src/main.ts"></script>

こちらのコードでは、プロジェクトのエントリーポイントとなる、src/main.tsをロードしています。

でも、これだけでは動きません。Viteの設定がまだです。

Vite

vite.config.tsで、ビルドの設定を変えます。

// vite.config.ts
export default defineConfig({
    manifest:  true,  // manifest.jsonの出力
    rollupOptions:{
      // デフォルトのエントリーポイントの変更
      input:  './src/main.ts',
    },
  },
})

そして、src/main.tsの先頭に、次を書き込みます。

// src/main.ts
import 'vite/modulepreload-polyfill'
...

開発モードの実行

いざ、実行してみましょう。

次の二つのコマンドを、別プロセスで動かす必要があります。

python3 backend/main.ts # バックエンドの実行
pnpm run dev # Viteの開発モードの起動

これで、localhost:8000を開くと、Vue.jsが動作しているはずです。

PythonとNode.jsの融合です！

本番環境モード

しかし、このままでは本番環境で動きません。

なので、本番環境モードを実装していきましょう。

書くのめんどい近日公開

Footnotes

  1. 要出典 ↩