✨ 導入文
Web アプリケーションの開発を学ぶとき、
「UI・API・DB をつないで動かす」だけでは本番運用のイメージがつきにくいものです。
そこで今回は、以下の技術を組み合わせて “小さな本番環境” を構築しました。
Vite（UI）
Flask（API）
PostgreSQL（DB）
Nginx（Webサーバ / リバースプロキシ）
Terraform（IaC）
Docker（コンテナ基盤）
この構成は、実際の企業システムでもよく使われる構成の縮小版で、
開発・運用の両方を学べる教材として最適です。
この記事では、
システム構成・各コンポーネントの役割・設定の意図・通信経路
をまとめています。
自身の学習ということで拙いながら今の状況を備忘もかねて記載します。
↓前回からの続きです。
🧭 システム全体構成
┌────────────────────────┐
│ Vite Dev Server (5173) │
│ UI: HTML / JS / Bootstrap │
└────────────────────────┘
│ fetch()
▼
┌────────────────────────┐
│ Flask API (5000) │
│ Python / Flask / CORS │
└────────────────────────┘
│ psycopg2
▼
┌────────────────────────┐
│ PostgreSQL (5432) │
│ items テーブル │
└────────────────────────┘
Terraform によって以下の Docker コンテナが作成されます：
| コンテナ名 | 役割 | ポート |
|---|---|---|
| web | Nginx（UI 配信 / API リバースプロキシ） | 8000→80 |
| app | Flask API | 5000 |
| pg | PostgreSQL | 5432 |
🧱 各コンポーネントの役割と設定意図
1. Vite（UI / 5173）
-
開発用のフロントエンドサーバ
-
main.js から Flask API に fetch でアクセス
-
CORS が必要（5173 と 5000 は別オリジン）
API エンドポイント設定
const API_BASE = "http://localhost:5000/api/items";
DELETE/PUT/POST はプリフライトが必要
headers: { "Content-Type": "application/json" }
Chrome の仕様上、これを付けないとプリフライトが発生せず CORS エラーになります。
2. Flask API（5000）
-
REST API（CRUD）を提供
-
psycopg2 で PostgreSQL に接続
-
CORS を完全許可（開発用）
CORS 設定（重要）
CORS(
app,
resources={r"/api/*": {"origins": "*"}},
supports_credentials=True,
allow_headers="*",
methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"]
)
@app.after_request
def after_request(response):
response.headers.add("Access-Control-Allow-Origin", "*")
response.headers.add("Access-Control-Allow-Headers", "*")
response.headers.add("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS")
return response
API 一覧
| メソッド | パス | 内容 |
|---|---|---|
| GET | /api/status | DB 接続確認 |
| GET | /api/items | 全件取得 |
| POST | /api/items | 新規作成 |
| PUT | /api/items/ | 更新 |
| DELETE | /api/items/ | 削除 |
3. PostgreSQL（5432）
-
items テーブルを保持
-
Docker volume により永続化
-
Flask から psycopg2 で接続
接続情報
| 項目 | 値 |
|---|---|
| host | pg |
| port | 5432 |
| user | exampleuser |
| password | examplepass |
| dbname | exampledb |
user、password、dbnameはお好みで設定してください。
テーブル構造
CREATE TABLE items (
id SERIAL PRIMARY KEY,
name TEXT
);
4. Nginx（8000 → 80）
-
本番用の UI 配信
-
API のリバースプロキシ
-
開発中は Vite を使うため未使用
本番構成イメージ
Nginx (80/443)
↓ proxy_pass
Flask (5000)
↓
PostgreSQL (5432)
5. Terraform（IaC）
Terraform は Docker の構築・起動・ネットワーク・ボリュームを管理。
Terraform が管理しているもの
-
Flask イメージのビルド
-
Nginx / Flask / PostgreSQL のコンテナ作成
-
Docker ネットワーク
-
PostgreSQL の永続化ボリューム
注意点
Dockerfile の変更は Terraform が自動検知しないため：
docker rmi -f flask-app
terraform apply
で再ビルドが必要。
🔌 通信経路まとめ
開発時（現在）
Vite (5173)
↓ fetch
Flask (5000)
↓ psycopg2
PostgreSQL (5432)
本番構成（将来）
Nginx (80/443)
↓ proxy_pass
Flask (5000)
↓
PostgreSQL (5432)
📦 Docker コンテナ一覧
web → Nginx (8000→80)
app → Flask (5000)
pg → PostgreSQL (5432)
🎯 この環境の強み
-
UI / API / DB / Proxy / IaC / Docker が揃った “本番に近い構成”
-
CORS / Preflight / Reverse Proxy / DB 永続化など実務で必須の要素が学べる
-
監視・ログ・CI/CD などの運用学習にも発展できる
🚀 今後の発展として
やれることは様々ありそうですが、DB構成の見直しとバックアップ・監視あたりに
手を出していきたいと考えています。
🏁 まとめ
この環境は、Web システムの開発〜運用までを一通り学べる ミニ本番環境 です。
構成・役割・設定意図を理解しておくことで、今後の運用学習がスムーズに進みます。