他人に配布しやすいツール環境を作りたいため以下で環境構築した。
・フロントエンド → React
・バックエンド → FastAPI(Embeddable Python)
Pythonは環境丸ごと配布したいのでEmbeddable Pythonを採用。
１．構成
特に考えず、以下にしました。
sample ・・・ reactのプロジェクトフォルダ
┗pyf ・・・ fastapiのプロジェクトフォルダ(Pythonを丸ごと入れている) ※
┗fapp ・・・ Embeddable Pythonがごちゃごちゃしているので、枠
┗__init__.py ・・・ おまじない
┗app.py ・・・ 起動するPython
┗sparoot ・・・ Reactのビルド先
※これを丸ごと配布するイメージ
２．React環境の準備
（１）Reactインストール
Powershellを起動。適度な場所で以下を実行。
> npx create-react-app@latest sample
途中で以下のエラーが出ましたが、多分gitを入れてないためだと思い無視。
Git repo not initialized Error: Command failed: git --version
Success!が出ればOK
Success! Created sbuild at sample
（２）VScode起動
そのままPowershellで以下を実行してVScode実行。
> code ./sample
（３）build先変更
build先を変更するために、定義ファイルを出力する必要がある。VScodeで以下実行。
上を実行するとconfig/paths.jsが出現しました。このファイルの以下を修正します。
上のnpm run ejectを実行するとエラーがでるようになるので、package.jsonのeslintConfigを以下のように修正します。
"extends": [
"react-app",
"react-app/jest"
],
"parserOptions": {
"babelOptions": {
"presets": [
["babel-preset-react-app", false],
["babel-preset-react-app/prod"]
]
}
}
},
３．Pythonの準備
（１）Embeddable Pythonの準備
所定のサイトからダウンロードします。
（２）pipの設定
Embeddable Pythonでpipを使えるように設定してください。【詳細省略】
（３）fastAPI、uvicornのインストール
pyf直下で以下を実行します。
> ./python.exe -m pip install fastapi uvicorn
４．Reactのbuild
（１）build
以下コマンドをsample直下で実行。
sparoot直下にbuildされた一式が入ります。
５．fastAPI起動
（１）app.py作成
正しいかわかりませんが、mountを2個書いています。
from fastapi import FastAPI
import uvicorn
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/sparoot", StaticFiles(directory="sparoot",html=True), name="sparoot") #①
app.mount("/static", StaticFiles(directory="sparoot\\static",html=True), name="static") #②
if __name__ == "__main__":
uvicorn.run(app, host="localhost", port=8000, log_level="debug")
①はindex.htmlアクセス用です。②はindex.htmlアクセス時にindex.htmlから参照しているものを表示するための設定です。
（２）起動
pyf直下で以下で起動します。
（３）動作確認
以下にアクセスして表示されるか確認。
http://localhost:8000/sparoot/index.html