✨ 導入文

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 エンドポイント設定

js

const API_BASE = "http://localhost:5000/api/items";

DELETE/PUT/POST はプリフライトが必要

js

headers: { "Content-Type": "application/json" }

Chrome の仕様上、これを付けないとプリフライトが発生せず CORS エラーになります。

2. Flask API（5000）

REST API（CRUD）を提供
psycopg2 で PostgreSQL に接続
CORS を完全許可（開発用）

CORS 設定（重要）

python

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はお好みで設定してください。

テーブル構造

sql

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 システムの開発〜運用までを一通り学べるミニ本番環境です。
構成・役割・設定意図を理解しておくことで、今後の運用学習がスムーズに進みます。