Step5: コンテナ1

このStepでは、コンテナの基本と Docker（Dockerfile・マルチステージビルド・Docker Compose など）を学び、制作物である sns-camp-api と sns-camp-front をコンテナ化して、Docker Compose でローカル起動できる状態まで構築します。

1. 講座の履修

コンテナ講座 の以下の章を実施してください。すでに同等の知識がある場合は、講座の履修はスキップしても構いません。

2. 課題の実施

2.1 目的・背景

sns-camp-api と sns-camp-front をコンテナ化することで、環境に依存しない形でアプリケーションを動かせるようにします。あわせて Docker Compose を使い、API・フロントエンド・データベースの3つをローカルでまとめて起動できる状態を目標にします。

2.2 実施要件

使用するサンプルアプリケーション

Step 1〜4 で発展させてきた sns-camp-api と sns-camp-front を継続して使用してください。

sns-camp-api のコンテナ化（必須）

sns-camp-api を Dockerfile でコンテナ化してください。マルチステージビルドを利用してイメージサイズを抑えることが目安です。

sns-camp-front のコンテナ化（任意）

sns-camp-front のコンテナ化は必須ではありません。Step 2 で Amplify を採用した場合はホスティング側でビルド・配信が完結するため、コンテナ化する必要はありません。CloudFront + S3 を採用した場合や、余裕がある場合は Dockerfile でコンテナ化しても構いません。

コンテナ間の連携

sns-camp-api と DB をまとめて起動できるように、Docker Compose で構成してください。sns-camp-front をコンテナ化した場合はあわせて Compose に含めてください。API から DB のデータを読み書きできる状態が目標です。

対象外

本Stepでは、以下は対象外です。これらは後続のStepで扱います。

• AWS 上でのコンテナ実行環境の構築（Step 6 で実施します）
• インフラのコード化（Step 7 で実施します）
• CI/CDパイプラインの構築（Step 8 で実施します）
• 非機能要件の実装（Step 10〜12 で実施します）

2.3 判定基準

動作確認

以下のコマンドで一式が起動することを確認してください。

docker compose up -d

以下の 3 つの curl コマンドで動作を確認してください。

まず sns-camp-api の疎通確認用エンドポイント GET /health を呼び出します。

curl -i http://localhost:8080/health

以下のようなレスポンスが返ります。

HTTP/1.1 200 OK
Content-Type: application/json

{"status": "ok"}

続いて、POST /api/v1/auth/register でユーザを登録し、API 経由で DB に読み書きできることを確認します。

curl -i -X POST http://localhost:8080/api/v1/auth/register \
  -H "Content-Type: application/json" \
  -d '{"username": "yamada", "email": "yamada@example.com", "password": "password123", "display_name": "山田太郎"}'

以下のようなレスポンスが返ります。

HTTP/1.1 201 Created
Content-Type: application/json

{"data": {"token": "eyJ...", "user": {"id": 1, "username": "yamada", ...}}}

最後に、登録レスポンスに含まれる token を使って GET /api/v1/auth/me を呼び出し、登録したユーザ情報を取得できることを確認します。

curl -i http://localhost:8080/api/v1/auth/me \
  -H "Authorization: Bearer <登録レスポンスの token>"

以下のようなレスポンスが返ります。

HTTP/1.1 200 OK
Content-Type: application/json

{"data": {"id": 1, "username": "yamada", "email": "yamada@example.com", "display_name": "山田太郎", ...}}

2.4 課題提出

下記内容を提出フォームより提出してください（提出はプレミアムプランでご利用いただけます）。

3. メンタリング報告

以下の内容をメンタリングで報告してください（メンタリングはプレミアムプランでご利用いただけます）。

3.1 講座の振り返り

以下の要素それぞれについて、3つの観点で報告してください。

対象の要素

• コンテナ
• Dockerfile
• マルチステージビルド
• Dockerネットワーク
• Dockerストレージ
• Docker Compose

報告観点

• 概要
• 何ができるのか？
• 使うときに気をつけるべきこと

3.2 提出課題の説明

提出した Dockerfile・docker-compose.yml をもとに、以下の内容を報告してください。

• どのような設計意図でコンテナ化したのか
• コンテナ間の連携をどのように組み立てたのか
• 実装中に工夫したこと・苦労したこと

4. 構築のヒント

Docker Compose でコンテナ間を連携させる際の環境変数の渡し方をまとめます。本課題の本質は Docker と Docker Compose の理解にあり、環境変数の渡し方のパターンは本質的な学習対象ではないため、自力で調べて進めていただいて構いませんが、詰まった場合は以下のヒントを適宜参考にしてください。

4.1 バックエンド（sns-camp-api）に DB 接続情報を渡す方法

cd sns-camp-api

cp .env.example .env

DB_HOST=db
DB_PORT=3306
DB_USER=root
DB_PASSWORD=password
DB_NAME=sns_camp

services:
  api:
    build: ./sns-camp-api
    env_file:
      - ./sns-camp-api/.env
    ports:
      - "8080:8080"
    depends_on:
      - db

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: sns_camp
    ports:
      - "3306:3306"

4.2 フロントエンド（sns-camp-front）に API の URL を渡す方法

ARG NEXT_PUBLIC_API_URL
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL

services:
  front:
    build:
      context: ./sns-camp-front
      args:
        NEXT_PUBLIC_API_URL: http://localhost:8080/api/v1
    ports:
      - "3000:3000"