✅ 1. 프로젝트 폴더/파일 구조 만들기
mkdir nginx-web
cd nginx-web
touch index.html style.css Dockerfile compose.yml- 설명:
- 폴더명 nginx-web (자유롭게)
- 필수 파일: index.html, style.css, Dockerfile, compose.yml
✅ 2. HTML, CSS 파일 작성
📄 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Page</h1>
</body>
</html>- Tip: Nginx는 첫 페이지 파일명이 반드시 index.html 이어야 함
📄 style.css
* {
color: blue;
}
✅ 3. Dockerfile 작성
📄 Dockerfile
FROM nginx
COPY ./ /usr/share/nginx/html- 설명:
- Nginx 공식 이미지를 기반으로
- 현재 폴더(모든 파일)를 컨테이너의 웹 루트(/usr/share/nginx/html)로 복사
✅ 4. compose.yml 작성
📄 compose.yml
services:
web:
build: .
ports:
- "80:80"- 설명:
- 서비스명: web (자유롭게 변경 가능)
- 현재 디렉토리에서 빌드
- 호스트의 80번 포트 → 컨테이너의 80번 포트로 연결
✅ 5. 컨테이너 빌드 & 실행
docker compose uo -d --build- 설명:
- -d: 백그라운드 실행
- --build: 매번 새로 이미지를 빌드(파일 바꿧을 때 꼭 필요)
✅ 6. 실행 상태 확인
docker compose ps
docker ps- Tip: 컨테이너가 "Up"이면 정상
✅ 7. 웹에서 확인
브라우저에서 http://localhost:80 접속
해당 그림 처럼 웹페이지가 뜨면 성공
✅ 8. 컨테이너 중지 & 삭제
docker compose down- 설명: 컨테이너 및 네트워크 등 모두 정리
🔍 핵심 포인트
| 항목 | 설명 |
| Nginx 기본값 | /usr/share/nginx/html 폴더에 index.html 필요 |
| build: . | Dockerfile로 이미지 빌드 |
| ports | 80:80 → 웹에서 바로 접속 가능 |
🧠 실전 팁
- HTML/CSS 수정 시 반드시 docker compose up -d --build 로 재빌드/재실행
- 컨테이너로 옮길 파일만 폴더에 두는 게 관리상 좋음
- 실제 서비스라면 nginx.conf 등 커스텀 설정도 추가 가능
'코딩 > Docker' 카테고리의 다른 글
| 🐳 Docker Compose로 Spring Boot, Mysql 컨테이너 동시에 실행하기 (0) | 2025.07.15 |
|---|---|
| 🐳 Docker Compose로 MySQL, Redis 컨테이너 동시에 실행하기 (0) | 2025.07.15 |
| 🐳 Docker Compose로 Next.js 프론트엔드 실행하기 (0) | 2025.07.15 |
| 🐳 Docker Compose로 백엔드(Nest.js) 실행하기 (0) | 2025.07.15 |
| 🐳 Docker Compose로 Spring Boot 백엔드 실행하기 (0) | 2025.07.08 |
댓글