AWS ECS(FARGATE)에 React + Nginx를 배포하는 방법

npm create vite@latest frontend -- --template react-ts

프로젝트 폴더

├── Dockerfile
├── frontend
│   ├── index.html
│   ├── package.json
│   ├── public
│   │   └── vite.svg
│   ├── src
│   │   ├── App.css
│   │   ├── App.tsx
│   │   ├── assets
│   │   │   └── react.svg
│   │   ├── index.css
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
└── task-definition.json

도커파일

FROM nginx:latest

EXPOSE 80
# Frontend with production files
COPY  ./frontend/dist /usr/share/nginx/html

Docker 허브에 이미지 게시

# BUILD FRONTEND

cd ./frontend && npm run build && cd ..

docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
docker build . -t $DOCKER_USER/react-app:latest

docker push $DOCKER_USER/react-app:latest

작업 정의

{
  "containerDefinitions": [
    {
      "essential": true,
      "name": "app",
      "image": "nelsoncode/react-app:latest",
      "portMappings": [
        {
          "containerPort": 80,
          "hostPort": 80,
          "protocol": "tcp"
        }
      ]
    }
  ],
  "cpu": "256",
  "family": "fargate-task-definition",
  "memory": "512",
  "networkMode": "awsvpc",
  "runtimePlatform": {
    "operatingSystemFamily": "LINUX"
  },
  "requiresCompatibilities": ["FARGATE"]
}

작업 정의 등록

export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=
export AWS_DEFAULT_REGION=us-west-1

aws ecs register-task-definition --cli-input-json file://task-definition.json

클러스터 생성(FARGATE)

클러스터 이름 및 VPC 생성

유형, 작업 정의, 서비스 이름 및 작업 번호 선택

네트워크 구성

상태 확인

프로덕션 중인 앱

GitHub 리포지토리