Day13：実務課題（前半）
テーマ：React＋API＋MySQLという“よくある現場構成”を、頭の中でちゃんと描けるようになる
Day13 は、ここまで学んできた Docker・Dockerfile・Compose・ネットワーク・ログなどを
「実務でよくある3層構成」に全部つなげていく日 です。
フロント（React）
バックエンド（API）
DB（MySQL）
これを Docker Compose でまとめて動かし、永続化と環境変数管理まで含めて設計する のがゴールです。
前半ではまず、構成の全体像と「それぞれの役割」「どうつながるか」を、初心者でもイメージできるレベルまで噛み砕きます。
全体像をまず“絵”として理解する
3つの役割を分けて考える
フロント（React）
ユーザーのブラウザで動く画面部分。
API にリクエストを送り、結果を表示する役割。
バックエンド（API）
ビジネスロジックを担当。
React からのリクエストを受け取り、DB とやりとりして結果を返す。
DB（MySQL）
データを永続的に保存する場所。
ユーザー情報、商品情報、ログなどを保持する。
これら3つを 別々のコンテナ として動かし、
Docker Compose で「1つのシステム」としてまとめるのが Day13 のテーマです。
Compose で統合するとはどういうことか
「バラバラのコンテナ」を「1つのアプリケーション」にする
今までは、
単体のコンテナ（nginx だけ、Node.js だけ、MySQL だけ）を起動してきました。
実務では、
複数コンテナが連携して1つのサービスを作る のが普通です。
React コンテナ
API コンテナ
MySQL コンテナ
これらを docker-compose.yml にまとめて定義し、
docker compose up
の一発で 全部まとめて起動・停止・再現 できるようにする。
これが「Composeで統合」の本質です。
まずは“ざっくりした Compose の形”をイメージする
docker-compose.yml の骨格イメージ
ここではまだ細かい中身ではなく、「形」を掴んでください。
version: "3"
services:
frontend:
# React 用
api:
# バックエンド API 用
db:
# MySQL 用
volumes:
db-data:
services の中に
frontend（React）
api（バックエンド）
db（MySQL）
という3つのサービスを書き、
DB 用の永続化ボリューム db-data を定義する——
このくらいのイメージが持てれば前半としては十分です。
永続化とは何か（特に DB で超重要）
コンテナは“消える前提”、データは“残したい”
コンテナは基本的に 使い捨て です。
止めたり消したりすると、中のファイルも消えます。
でも、DB のデータは消えたら困ります。
ユーザー情報、注文履歴、ログ…全部消えたらサービス崩壊です。
そこで使うのが ボリューム（volume）による永続化 です。
MySQL の永続化イメージ
MySQL コンテナの中には /var/lib/mysql という
「データファイルが置かれる場所」があります。
ここをホスト側のボリュームに紐づけることで、
コンテナを消してもデータは残る、という状態を作れます。
db:
image: mysql:8
volumes:
- db-data:/var/lib/mysql
この db-data が、
「DB の中身を守るための外付けハードディスク」
だと思ってください。
環境変数管理とは何か（実務で必須の考え方）
コードにベタ書きしない、設定は外に出す
API が DB に接続するとき、
ホスト名・ユーザー名・パスワード・DB名などが必要です。
これをコードにベタ書きすると、
環境ごとに書き換えが必要になり、
セキュリティ的にも最悪です。
そこで使うのが 環境変数（environment variables） です。
Compose での環境変数イメージ
api:
environment:
DB_HOST: db
DB_USER: myuser
DB_PASSWORD: secret
DB_NAME: myapp
API コンテナの中からは、process.env.DB_HOST（Node.js）os.getenv("DB_HOST")（Python）
のようにして参照できます。
コードは「DB_HOST という名前」を見るだけ。
実際にどの DB に接続するかは Compose 側で決める。
これが「環境変数管理」の本質です。
Day13 前半で押さえておきたい“頭の中の絵”
ここまでで、あなたの頭の中にこんな図が描けていれば前半はOKです。
React（frontend コンテナ）
→ API（api コンテナ）
→ MySQL（db コンテナ＋ボリュームで永続化）
3つは Docker Compose の services として定義される。
DB のデータは volume で守る。
接続情報は環境変数で渡す。docker compose up で全部まとめて立ち上がる。
この「全体像」が見えていると、
中盤でやる 具体的な docker-compose.yml の中身 がスッと入ってきます。