SportsMate의 React 프론트엔드를 Nginx로 제공하는 Docker 이미지입니다.
함께 사용하는 백엔드 이미지는
seungchan1122/sportsmate-backend에서 확인할 수 있습니다.
/api/ 요청을 백엔드 컨테이너로 프록시React 애플리케이션은 빌드 단계에서 정적 파일로 생성되며, 최종 이미지에서는 Nginx가 결과물을 제공합니다.
docker pull seungchan1122/sportsmate-frontend:1.0
docker run -d \
--name sportsmate-frontend \
-p 5002:80 \
seungchan1122/sportsmate-frontend:1.0
실행 후 다음 주소에서 확인할 수 있습니다.
http://localhost:5002
다만 API 요청까지 정상적으로 처리하려면 백엔드 컨테이너를 함께 실행해야 합니다.
먼저 프론트엔드와 백엔드가 사용할 Docker 네트워크를 생성합니다.
docker network create sportsmate-network
백엔드 컨테이너 실행:
docker run -d \
--name sportsmate-backend \
--network sportsmate-network \
--network-alias backend \
--restart unless-stopped \
--env-file ./backend/.env \
-p 5001:5000 \
seungchan1122/sportsmate-backend:1.0
프론트엔드 컨테이너 실행:
docker run -d \
--name sportsmate-frontend \
--network sportsmate-network \
--restart unless-stopped \
-p 5002:80 \
seungchan1122/sportsmate-frontend:1.0
프론트엔드 Nginx는 /api/ 요청을 Docker 네트워크 내부의 다음 주소로 전달합니다.
http://backend:5000
여기서 backend는 백엔드 컨테이너에 지정한 네트워크 별칭입니다.
| 구분 | 호스트 | 컨테이너 |
|---|---|---|
| Frontend | 5002 | 80 |
| Backend | 5001 | 5000 |
프론트엔드 응답 확인:
curl -I http://localhost:5002
Nginx를 통한 백엔드 헬스 체크:
curl -i http://localhost:5002/api/health
정상 응답:
{
"status": "ok"
}
docker logs --tail 100 sportsmate-frontend
실시간 로그:
docker logs -f sportsmate-frontend
docker stop sportsmate-frontend
docker rm -f sportsmate-frontend
Content type
Image
Digest
sha256:4d7e241cb…
Size
74.5 MB
Last updated
about 2 months ago
docker pull seungchan1122/sportsmate-frontend:1.0