DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=

DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=

version: '3'
services:
  mysql:
    image: mysql:8.0
    ... # 詳細は別記事へ

  FastAPI:
    build:
      context: ..　　// Dockerfile がある位置を指定
      dockerfile: docker/Dockerfile
    container_name: 任意のコンテナ名
    ports:
      - "8000:8000"
    volumes:
      - ../backend:/app
    env_file:
      - ../.env.local
    depends_on:　　// 「このアプリは mysql が先に起動していないとダメだよ」という意味
      - mysql

version: '3'
services:
  mysql:
    image: mysql:8.0
    ... # 詳細は別記事へ

  FastAPI:
    build:
      context: ..　　// Dockerfile がある位置を指定
      dockerfile: docker/Dockerfile
    container_name: 任意のコンテナ名
    ports:
      - "8000:8000"
    volumes:
      - ../backend:/app
    env_file:
      - ../.env.local
    depends_on:　　// 「このアプリは mysql が先に起動していないとダメだよ」という意味
      - mysql

// Pythonの軽くて早いバージョンを指定
FROM python:3.10-slim

// 実行時に.pycファイルを作らないように設定（大量にできてGitに上げれなくなる）
ENV PYTHONDONTWRITEBYTECODE=1

// コンテナ内で作業するディレクトリを作成
WORKDIR /app

// ホスト側の ./backend フォルダを、コンテナ内の /app に丸ごとコピー
COPY ./backend /app

// requirements.txt をコピーして、必要なライブラリをインストール
COPY ./backend/requirements.txt .

RUN pip install --upgrade pip
RUN pip install -r requirements.txt

// アプリを起動
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

// Pythonの軽くて早いバージョンを指定
FROM python:3.10-slim

// 実行時に.pycファイルを作らないように設定（大量にできてGitに上げれなくなる）
ENV PYTHONDONTWRITEBYTECODE=1

// コンテナ内で作業するディレクトリを作成
WORKDIR /app

// ホスト側の ./backend フォルダを、コンテナ内の /app に丸ごとコピー
COPY ./backend /app

// requirements.txt をコピーして、必要なライブラリをインストール
COPY ./backend/requirements.txt .

RUN pip install --upgrade pip
RUN pip install -r requirements.txt

// アプリを起動
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

"use client";

import { useState } from "react";

export default function RegisterForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  const [message, setMessage] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("http://localhost:8000/registration", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      if (res.ok) {
        setMessage("登録成功！ ユーザーID: " + data.user_id);
      } else {
        setMessage("登録失敗: " + (data.detail || "エラーが発生しました"));
      }
    } catch (error) {
      console.error("エラー:", error);
      setMessage("通信エラーが発生しました");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto mt-10">
      <div>
        <label htmlFor="name" className="block font-medium mb-1">
          お名前
        </label>
        <input
          id="name"
          name="name"
          placeholder="例：山田 太郎"
          value={form.name}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="email" className="block font-medium mb-1">
          メールアドレス
        </label>
        <input
          id="email"
          name="email"
          placeholder="例：taro@example.com"
          type="email"
          value={form.email}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="password" className="block font-medium mb-1">
          パスワード
        </label>
        <input
          id="password"
          name="password"
          placeholder="半角英数字8文字以上"
          type="password"
          value={form.password}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded w-full"
      >
        ユーザー登録
      </button>

      {message && <p className="mt-4 text-sm text-gray-700">{message}</p>}
    </form>
  );
}

"use client";

import { useState } from "react";

export default function RegisterForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  const [message, setMessage] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("http://localhost:8000/registration", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      if (res.ok) {
        setMessage("登録成功！ ユーザーID: " + data.user_id);
      } else {
        setMessage("登録失敗: " + (data.detail || "エラーが発生しました"));
      }
    } catch (error) {
      console.error("エラー:", error);
      setMessage("通信エラーが発生しました");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto mt-10">
      <div>
        <label htmlFor="name" className="block font-medium mb-1">
          お名前
        </label>
        <input
          id="name"
          name="name"
          placeholder="例：山田 太郎"
          value={form.name}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="email" className="block font-medium mb-1">
          メールアドレス
        </label>
        <input
          id="email"
          name="email"
          placeholder="例：taro@example.com"
          type="email"
          value={form.email}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="password" className="block font-medium mb-1">
          パスワード
        </label>
        <input
          id="password"
          name="password"
          placeholder="半角英数字8文字以上"
          type="password"
          value={form.password}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded w-full"
      >
        ユーザー登録
      </button>

      {message && <p className="mt-4 text-sm text-gray-700">{message}</p>}
    </form>
  );
}

from sqlalchemy import create_engine // DBとの接続エンジンを作るための関数
from sqlalchemy.orm import sessionmaker, declarative_base
from dotenv import load_dotenv  // .envファイルから環境変数を読み込むための関数
import os // 環境変数を取得するための標準ライブラリ

// ルートの.env読み込み
load_dotenv(dotenv_path=".env.local")

DB_HOST = os.getenv("DB_HOST")
DB_PORT = os.getenv("DB_PORT")
DB_NAME = os.getenv("DB_NAME")
DB_USER = os.getenv("DB_USER")
DB_PASSWORD = os.getenv("DB_PASSWORD")

// データベース接続用のURLを作成
DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}?charset=utf8mb4"

// 接続準備
engine = create_engine(DB_URL)
SessionLocal = sessionmaker(bind=engine, autocommit=False, autoflush=False)
Base = declarative_base()

from sqlalchemy import create_engine // DBとの接続エンジンを作るための関数
from sqlalchemy.orm import sessionmaker, declarative_base
from dotenv import load_dotenv  // .envファイルから環境変数を読み込むための関数
import os // 環境変数を取得するための標準ライブラリ

// ルートの.env読み込み
load_dotenv(dotenv_path=".env.local")

DB_HOST = os.getenv("DB_HOST")
DB_PORT = os.getenv("DB_PORT")
DB_NAME = os.getenv("DB_NAME")
DB_USER = os.getenv("DB_USER")
DB_PASSWORD = os.getenv("DB_PASSWORD")

// データベース接続用のURLを作成
DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}?charset=utf8mb4"

// 接続準備
engine = create_engine(DB_URL)
SessionLocal = sessionmaker(bind=engine, autocommit=False, autoflush=False)
Base = declarative_base()

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware 　// 別ドメインからのアクセスを許可するための設定
from routers import registration

// FastAPIアプリケーションの本体を作成
app = FastAPI()

// CORS（クロスオリジン）設定を追加：別のドメインからアクセスを許可する
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  // フロントエンド（Next.js）からのアクセスを許可
    allow_credentials=True,  // クッキーなどの認証情報を含めた通信を許可
    allow_methods=["*"],  // GETやPOSTなど、すべてのHTTPメソッドを許可
    allow_headers=["*"],  // すべてのリクエストヘッダーを許可（認証トークンなど）
)

// APIの処理を追加（今回はregistration.pyのルーター）
app.include_router(registration.router)

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware 　// 別ドメインからのアクセスを許可するための設定
from routers import registration

// FastAPIアプリケーションの本体を作成
app = FastAPI()

// CORS（クロスオリジン）設定を追加：別のドメインからアクセスを許可する
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  // フロントエンド（Next.js）からのアクセスを許可
    allow_credentials=True,  // クッキーなどの認証情報を含めた通信を許可
    allow_methods=["*"],  // GETやPOSTなど、すべてのHTTPメソッドを許可
    allow_headers=["*"],  // すべてのリクエストヘッダーを許可（認証トークンなど）
)

// APIの処理を追加（今回はregistration.pyのルーター）
app.include_router(registration.router)

import uuid
from sqlalchemy import Column, String, Boolean, DateTime
from db import Base

class Users(Base):
    __tablename__ = "users"

    user_id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
    name = Column(String(100), nullable=False)
    email = Column(String(100), nullable=False, unique=True)
    password = Column(String(255), nullable=False)
    updated_by = Column(String(100))
    updated_at = Column(DateTime)

import uuid
from sqlalchemy import Column, String, Boolean, DateTime
from db import Base

class Users(Base):
    __tablename__ = "users"

    user_id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
    name = Column(String(100), nullable=False)
    email = Column(String(100), nullable=False, unique=True)
    password = Column(String(255), nullable=False)
    updated_by = Column(String(100))
    updated_at = Column(DateTime)

from pydantic import BaseModel

class UserCreate(BaseModel):
    name: str
    email: str
    password: str

from pydantic import BaseModel

class UserCreate(BaseModel):
    name: str
    email: str
    password: str

from datetime import datetime, timezone, timedelta

def generate_common_fields():
    jst_now = datetime.now(timezone(timedelta(hours=9)))
    return {
        "updated_by": "system",
        "updated_at": jst_now,
    }

from datetime import datetime, timezone, timedelta

def generate_common_fields():
    jst_now = datetime.now(timezone(timedelta(hours=9)))
    return {
        "updated_by": "system",
        "updated_at": jst_now,
    }

from fastapi import APIRouter, Depends
from sqlalchemy.orm import Session　　// DBとのやりとりの型（Session）を指定
from db import SessionLocal
from models.user import Users
from schemas.user import UserCreate
from utils.common_fields import generate_common_fields

router = APIRouter()

// データベースとの接続を一時的に確立して、使い終わったら自動で切るための仕組み
def get_db():
    db = SessionLocal()  // DB接続を開始
    try:
        yield db　　 // データを登録・検索
    finally:
        db.close()　// DB接続を終了
        
@router.post("/registration")
def create_user(user: UserCreate, db: Session = Depends(get_db)):
    common_fields = generate_common_fields()

    db_user = Users(
        **user.dict(),
        **common_fields
    )

    db.add(db_user)
    db.commit()

    return {"message": "登録成功"}

from fastapi import APIRouter, Depends
from sqlalchemy.orm import Session　　// DBとのやりとりの型（Session）を指定
from db import SessionLocal
from models.user import Users
from schemas.user import UserCreate
from utils.common_fields import generate_common_fields

router = APIRouter()

// データベースとの接続を一時的に確立して、使い終わったら自動で切るための仕組み
def get_db():
    db = SessionLocal()  // DB接続を開始
    try:
        yield db　　 // データを登録・検索
    finally:
        db.close()　// DB接続を終了
        
@router.post("/registration")
def create_user(user: UserCreate, db: Session = Depends(get_db)):
    common_fields = generate_common_fields()

    db_user = Users(
        **user.dict(),
        **common_fields
    )

    db.add(db_user)
    db.commit()

    return {"message": "登録成功"}

docker logs -f コンテナ名

docker logs -f コンテナ名

 mailpit:
    image: axllent/mailpit:latest
    container_name: 任意のコンテナ名
    ports:
      - "1025:1025" # SMTP受信用
      - "8025:8025" # 管理画面（GUI）

 mailpit:
    image: axllent/mailpit:latest
    container_name: 任意のコンテナ名
    ports:
      - "1025:1025" # SMTP受信用
      - "8025:8025" # 管理画面（GUI）

import { NextResponse } from "next/server";
import { getTransporter } from "@/lib/mailer";

export async function POST(req: Request) {
  const { email } = await req.json();
  const transporter = getTransporter();

  try {
    await transporter.sendMail({
      from: process.env.MAIL_FROM,
      to: email,
      subject: "自動返信テスト",
      text: "こちらは自動返信メールです。",
    });

    return NextResponse.json({ success: true });
  } catch (err) {
    console.error("メール送信エラー:", err);
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

import { NextResponse } from "next/server";
import { getTransporter } from "@/lib/mailer";

export async function POST(req: Request) {
  const { email } = await req.json();
  const transporter = getTransporter();

  try {
    await transporter.sendMail({
      from: process.env.MAIL_FROM,
      to: email,
      subject: "自動返信テスト",
      text: "こちらは自動返信メールです。",
    });

    return NextResponse.json({ success: true });
  } catch (err) {
    console.error("メール送信エラー:", err);
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

"use client";

import { useState } from "react";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("正しいメールアドレスを入力してください"),
});

export default function MailForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);

  const handleSubmit = async () => {
    const result = schema.safeParse({ email });
    if (!result.success) {
      setError(result.error.errors[0].message);
      return;
    }

    try {
      const res = await fetch("/api/mail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      if (res.ok) {
        setSent(true);
        setError("");
      } else {
        setError("送信に失敗しました");
      }
    } catch (err) {
      console.error(err);
      setError("通信エラーが発生しました");
    }
  };

  return (
    <div className="p-4 border rounded bg-gray-50 max-w-2xl mx-auto mt-10">
      <div className="flex flex-col gap-4 mt-10">
        <input
          type="email"
          placeholder="メールアドレスを入力"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="p-3 border border-gray-300 rounded"
        />

        <div className="text-center">
          <button
            type="button"
            onClick={handleSubmit}
            className="bg-blue-600 text-white px-6 py-2 rounded"
          >
            送信
          </button>
        </div>

        {error && <p className="text-red-600 text-sm text-center">{error}</p>}
        {sent && (
          <p className="text-green-600 text-sm text-center">
            自動返信を送信しました
          </p>
        )}
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("正しいメールアドレスを入力してください"),
});

export default function MailForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);

  const handleSubmit = async () => {
    const result = schema.safeParse({ email });
    if (!result.success) {
      setError(result.error.errors[0].message);
      return;
    }

    try {
      const res = await fetch("/api/mail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      if (res.ok) {
        setSent(true);
        setError("");
      } else {
        setError("送信に失敗しました");
      }
    } catch (err) {
      console.error(err);
      setError("通信エラーが発生しました");
    }
  };

  return (
    <div className="p-4 border rounded bg-gray-50 max-w-2xl mx-auto mt-10">
      <div className="flex flex-col gap-4 mt-10">
        <input
          type="email"
          placeholder="メールアドレスを入力"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="p-3 border border-gray-300 rounded"
        />

        <div className="text-center">
          <button
            type="button"
            onClick={handleSubmit}
            className="bg-blue-600 text-white px-6 py-2 rounded"
          >
            送信
          </button>
        </div>

        {error && <p className="text-red-600 text-sm text-center">{error}</p>}
        {sent && (
          <p className="text-green-600 text-sm text-center">
            自動返信を送信しました
          </p>
        )}
      </div>
    </div>
  );
}

// src/lib/mailer.tsx

import { createTransport } from "nodemailer";
// @ts-expect-error 型定義がないため無視
import sgTransport from "nodemailer-sendgrid";

// 環境切り替え
export const getTransporter = () => {
  if (process.env.NODE_ENV === "production") {
    // 本番：例 SendGrid を使用
    return createTransport(
      sgTransport({
        apiKey: process.env.SENDGRID_API_KEY!,
      })
    );
  } else {
    // 開発：Mailpit を使用
    return createTransport({
      host: process.env.MAIL_HOST,
      port: Number(process.env.MAIL_PORT),
      secure: process.env.MAIL_SECURE === "true",
    });
  }
};

// src/lib/mailer.tsx

import { createTransport } from "nodemailer";
// @ts-expect-error 型定義がないため無視
import sgTransport from "nodemailer-sendgrid";

// 環境切り替え
export const getTransporter = () => {
  if (process.env.NODE_ENV === "production") {
    // 本番：例 SendGrid を使用
    return createTransport(
      sgTransport({
        apiKey: process.env.SENDGRID_API_KEY!,
      })
    );
  } else {
    // 開発：Mailpit を使用
    return createTransport({
      host: process.env.MAIL_HOST,
      port: Number(process.env.MAIL_PORT),
      secure: process.env.MAIL_SECURE === "true",
    });
  }
};

services:
  minio:
    image: minio/minio
    container_name: minio
    ports:
      - "9000:9000"  // APIアクセス用（アプリ・SDKから）
      - "9001:9001"  // 管理画面（GUI）
    environment:
      MINIO_ROOT_USER: your_username       // 開発用ユーザー名
      MINIO_ROOT_PASSWORD: your_password   // 開発用パスワード
    command: server /data --console-address ":9001"
    volumes:　// データ永続化の設定
      - minio_data:/data

volumes: // データ永続化の設定
  minio_data:

services:
  minio:
    image: minio/minio
    container_name: minio
    ports:
      - "9000:9000"  // APIアクセス用（アプリ・SDKから）
      - "9001:9001"  // 管理画面（GUI）
    environment:
      MINIO_ROOT_USER: your_username       // 開発用ユーザー名
      MINIO_ROOT_PASSWORD: your_password   // 開発用パスワード
    command: server /data --console-address ":9001"
    volumes:　// データ永続化の設定
      - minio_data:/data

volumes: // データ永続化の設定
  minio_data:

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "us-east-1", // MinIOでは使われないが、SDKの必須項目のため任意の値を指定（省略不可）
  endpoint: "http://localhost:9000",
  credentials: {
    accessKeyId: "your_username",     // 開発用ユーザー名
    secretAccessKey: "your_password", // 開発用パスワード
  },
  forcePathStyle: true, // バケット名をパスで扱うようにするためtrue
});

export async function uploadToMinio(file: File) {
  const arrayBuffer = await file.arrayBuffer();　// ファイルの生データを取得

  const command = new PutObjectCommand({
    Bucket: "uploads",       // GUIで作成したバケット名
    Key: file.name,          // 保存時の名前
    Body: arrayBuffer,       // アップロードするデータの中身
    ContentType: file.type,  // ファイルの種類（MIME）
  });

  await s3Client.send(command);
}

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "us-east-1", // MinIOでは使われないが、SDKの必須項目のため任意の値を指定（省略不可）
  endpoint: "http://localhost:9000",
  credentials: {
    accessKeyId: "your_username",     // 開発用ユーザー名
    secretAccessKey: "your_password", // 開発用パスワード
  },
  forcePathStyle: true, // バケット名をパスで扱うようにするためtrue
});

export async function uploadToMinio(file: File) {
  const arrayBuffer = await file.arrayBuffer();　// ファイルの生データを取得

  const command = new PutObjectCommand({
    Bucket: "uploads",       // GUIで作成したバケット名
    Key: file.name,          // 保存時の名前
    Body: arrayBuffer,       // アップロードするデータの中身
    ContentType: file.type,  // ファイルの種類（MIME）
  });

  await s3Client.send(command);
}

#!/bin/bash

docker compose --env-file .env -f docker/docker-compose.yml up -d

#!/bin/bash

docker compose --env-file .env -f docker/docker-compose.yml up -d

version: '3.8'  // Docker Composeのバージョン

services:
  mysql:  // サービス名（任意）
    image: mysql:8.0   // 使用するMySQLのバージョン
    container_name: 任意コンテナの名前
    restart: always. // PC再起動後も自動で再起動する
    environment:  // MySQLの初期設定（環境変数）
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    ports:
      - "3306:3306" 
    volumes:
      - mysql_data:/var/lib/mysql  // データ永続化

volumes:
  mysql_data:   // データ永続化

version: '3.8'  // Docker Composeのバージョン

services:
  mysql:  // サービス名（任意）
    image: mysql:8.0   // 使用するMySQLのバージョン
    container_name: 任意コンテナの名前
    restart: always. // PC再起動後も自動で再起動する
    environment:  // MySQLの初期設定（環境変数）
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    ports:
      - "3306:3306" 
    volumes:
      - mysql_data:/var/lib/mysql  // データ永続化

volumes:
  mysql_data:   // データ永続化