[CloudFront + EC2 + YOLOv8] WebSocket でリアルタイム物体セグメンテーションする Web アプリを AWS で構築してみました

git clone https://github.com/furuya02/aws-yolov8-realtime-segmentation.git
cd aws-yolov8-realtime-segmentation/cdk
pnpm install
pnpm cdk bootstrap
pnpm cdk deploy

bash scripts/ecr_build_push.sh

bash scripts/deploy_frontend.sh

POOL_ID=<UserPoolId>
aws cognito-idp admin-create-user \
  --user-pool-id $POOL_ID \
  --username streamer@example.com \
  --user-attributes Name=email,Value=streamer@example.com Name=email_verified,Value=true \
  --message-action SUPPRESS
aws cognito-idp admin-set-user-password \
  --user-pool-id $POOL_ID --username streamer@example.com \
  --password "YourPassword1!" --permanent
aws cognito-idp admin-add-user-to-group \
  --user-pool-id $POOL_ID --username streamer@example.com \
  --group-name streamers

bash scripts/switch_to_gpu.sh   # g5.2xlarge に変更する
bash scripts/switch_to_cpu.sh   # t3.large に戻す

cd cdk
pnpm cdk destroy 

# scripts/ecr_build_push.sh（要点）
docker buildx build \
  --platform linux/amd64 \
  -f docker/Dockerfile \
  -t "${ECR_REPO_URI}:latest" \
  --push \
  .

# scripts/docker_start_auto.sh（要点）
if ! docker pull "${ECR_REPO_URI}:latest" 2>&1; then
  echo "ECRにイメージなし → 起動スキップ"
  exit 0
fi

ブラウザ → https://xxx.cloudfront.net
               │
               ├── /          → S3（React アプリ）
               ├── /api/*     → EC2:8080（REST API）
               └── /ws        → EC2:8765（WebSocket）

const cfPLId = 'pl-58a04531'; // CloudFront Managed Prefix List (ap-northeast-1)
sg.addIngressRule(
  ec2.Peer.prefixList(cfPLId),
  ec2.Port.tcpRange(8080, 8765),
  'CloudFront PL (8080-8765)'
);

FROM nvidia/cuda:12.4.1-cudnn-runtime-ubuntu22.04
RUN pip3 install --no-cache-dir \
    torch==2.6.0+cu124 torchvision==0.21.0+cu124 \
    --index-url https://download.pytorch.org/whl/cu124
RUN pip3 install --no-cache-dir \
    ultralytics websockets boto3 "fastapi[standard]" uvicorn \
    "python-jose[cryptography]" requests opencv-python-headless
COPY server/main.py /app/main.py
COPY models/best.pt /app/best.pt
CMD ["/usr/bin/supervisord", "-n", "-c", "/etc/supervisor/supervisord.conf"]

[program:server]
command=python3 /app/main.py
autorestart=true

def verify_token(token: str) -> dict:
    jwks = get_jwks()   # Cognito の公開鍵を取得（キャッシュ）
    header = jwt.get_unverified_header(token)
    key = next((k for k in jwks["keys"] if k["kid"] == header["kid"]), None)
    return jwt.decode(token, key, algorithms=["RS256"], audience=APP_CLIENT_ID)

ORIGIN_VERIFY_SECRET = os.getenv("ORIGIN_VERIFY_SECRET", "")

def _verify_origin_header(x_origin_verify: str | None = Header(None)):
    if ORIGIN_VERIFY_SECRET and x_origin_verify != ORIGIN_VERIFY_SECRET:
        raise HTTPException(status_code=403, detail="Forbidden")

api = FastAPI(dependencies=[Depends(_verify_origin_header)])

def process_frame(frame: np.ndarray) -> np.ndarray:
    results = model(frame, verbose=False)[0]
    if results.masks is None:
        return frame
    overlay = frame.copy()
    for i, mask_xy in enumerate(results.masks.xy):
        cls   = int(results.boxes.cls[i])
        name  = results.names[cls]
        color = CLASS_COLORS.get(name, COLORS[cls % len(COLORS)])
        pts   = np.array(mask_xy, dtype=np.int32)
        cv2.fillPoly(overlay, [pts], color)
        # ...ラベル描画
    return cv2.addWeighted(frame, 0.5, overlay, 0.5, 0)

[Unit]
Description=YOLOv8-seg container (auto CPU/GPU switch)
Requires=docker.service
After=docker.service network-online.target

[Service]
Type=oneshot
RemainAfterExit=yes
ExecStart=/usr/local/bin/docker_start_auto.sh
ExecStop=/usr/bin/docker rm -f yolov8-seg

[Install]
WantedBy=multi-user.target

# scripts/docker_start_auto.sh（要点）
GPU_FLAG=""
if nvidia-smi -L 2>/dev/null | grep -q '^GPU'; then
  GPU_FLAG="--gpus all"
  echo "GPU 検出 → GPU モードで起動"
else
  echo "GPU なし → CPU モードで起動"
fi

docker rm -f yolov8-seg 2>/dev/null || true
docker run -d --name yolov8-seg ${GPU_FLAG} \
  --env-file /etc/yolov8-seg.env \
  -p 8765:8765 -p 8080:8080 \
  "${ECR_REPO_URI}:latest"

// Cognito の設定を環境変数から読み込んで初期化
Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId:       import.meta.env.VITE_COGNITO_USER_POOL_ID,
      userPoolClientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
    },
  },
})

// JWT トークンを取得し Cognito グループを確認
fetchAuthSession().then(s => {
  const idToken = s.tokens?.idToken?.toString() ?? ''
  setToken(idToken)
  setIsStreamer(decodeGroups(idToken).includes('streamers'))
})

const startInterval = useCallback((videoEl: HTMLVideoElement) => {
  intervalRef.current = window.setInterval(() => {
    if (!videoEl.videoWidth) return
    cap.getContext('2d')!.drawImage(videoEl, 0, 0)
    if (isStreamer && readyStateRef.current === ReadyState.OPEN) {
      const b64 = cap.toDataURL('image/jpeg', 0.9).split(',')[1]
      sendRef.current(JSON.stringify({ type: 'frame_in', data: b64 }))
    }
  }, 100)
}, [isStreamer])

useEffect(() => {
  if (!lastMessage?.data) return
  const { type, data } = JSON.parse(lastMessage.data as string)
  if (type !== 'frame') return
  const img = new Image()
  img.onload = () => {
    const c = canvasRef.current
    if (!c) return
    if (c.width !== img.width || c.height !== img.height) {
      c.width = img.width; c.height = img.height
    }
    c.getContext('2d')?.drawImage(img, 0, 0)
  }
  img.src = `data:image/jpeg;base64,${data}`
}, [lastMessage])