🪶

dockerでフロントとバックを統合した際の備忘録

に公開
Docker
React
FastAPI
tech

ReactとPython環境を統合した際の備忘録

🔗 成果物

GitHub リポジトリ：

https://github.com/torikara-code/vite-react-fastapi-postgres

以下2記事で作ったフロントとバックを統合

🧩 使用技術・ライブラリ

フロント

  • Vite
  • React
  • TypeScript
  • Tailwind CSS
  • Docker

バック

  • FastAPI
  • PostgreSQL
  • Docker
  • Alembic
  • SQLAlchemy

📁 プロジェクト構成

─── project
    ├── docker-compose.yml
    ├── .env
    ├── Frontend #フロント側のリポジトリの中身を入れる
    └── Backend #バック側のリポジトリの中身を入れる

フロントとバックのリポジトリからpullして、
新規プロジェクト直下に配置、
docker-compose.yml と .env をプロジェクト直下に書き直した。

docker-composeは中身を統合して、ファイルのパスの指定を少し変えただけ。
.envには
VITEから参照するFASTAPIのURLを入れとくとよいとあったため、追加。

API_URI=http://localhost:8080  # サンプル値

cd fronendの後にnpm intallでnode modulesを忘れずに入れる。

その後、以下コマンドで起動：

docker-compose up --build

🔗 React と FastAPI を連携させて CRUD 実装

簡単なUserテーブルと CRUD の API は FastAPI 側に事前に用意していたので、
React で画面を作り、CRUD のリクエスト・レスポンスを処理させた。

動作イメージ

Read

Delete

Add


Edit


🛠 実装時に詰まった点

React から Axios でリクエストを送るとネットワークエラーが表示され動作しなかった。
調査の結果、CORS（クロスオリジン設定）ができていなかったことが原因だと判明。
FastAPI のmain.pyに CORS 設定の記述を追加することで解決。

app = FastAPI...以下にCORS設定の記述を追加

# -----------------------------
# CORS設定
# -----------------------------
origins = [
    "http://localhost:5173",  # React開発サーバー
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # 許可するオリジン
    allow_credentials=True,
    allow_methods=["*"],  # GET, POST, PUT, DELETEなど全て許可
    allow_headers=["*"],  # ヘッダー全て許可
)

参考記事：
React × FastAPI の疎通方法

💭 感想

フロントの CRUD 操作が DB に反映されて連携しているのを実感できると、とても感慨深い。

次はタスク管理アプリを作る予定。
現在 Notion でタスク管理しているが味気ないので、自分なりにカスタマイズした使いやすいものを作りたいと模索中。

おおまかな Todo

  • ツール選定
  • 機能作成
  • デザイン作成
  • テスト実装
  • 設計書作成

Discussion