✅ 목표
- HTML/CSS 기반 정적 웹사이트를
- Nginx로 서비스 하고
- Docker Compose로 쉽게 관리하기
✅ 1. 프로젝트 구조 만들기
mkdir nginx-static
cd nginx-static
mkdir html
mkdir nginx
최종 폴더 구조
nginx-static/
├── docker-compose.yml
├── html/
│ ├── index.html
│ └── style.css
└── nginx/
└── default.conf
✅ 2. HTML/CSS 작성
📄 html/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Docker + Nginx</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello from Nginx & Docker Compose!</h1>
</body>
</html>
📄 html/style.css
body {
background: #fafafa;
text-align: center;
padding-top: 100px;
font-family: sans-serif;
}
✅ 3. Nginx 설정 파일 작성
📄 nginx/default.conf
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
}
}
🔍 설명
- listen 80 : HTTP 기본 포트로 서비스
- root : HTML/CSS 파일들이 들어갈 위치
- index : 기본 진입 파일
✅ 4. docker-compose.yml 작성
📄 docker-compose.yml
version: "3.8"
services:
web:
image: nginx:stable-alpine
ports:
- "8080:80"
volumes:
- ./html:/usr/share/nginx/html
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf
🔍 주요 구성 해설
| 항목 | 설명 |
| image | 공식 Nginx 경량 이미지 사용 |
| ports | 호스트 8080 -> 컨테이너 80 포트 매핑 |
| volumes | 정적 파일과 설정 파일을 컨테이너 내부로 연결 (자동 반영됨) |
✅ 5. 실행하기
docker-compose up브라우저에서 http://localhost:8080 접속
정삭적으로 화면이 뜨면 성공!
✅ 6. 백그라운드 실행 & 종료
# 백그라운드 모드
docker-compose up -d
# 중지 (중지되면서 컨테이너도 같이 삭제)
docker-compose down
✅ 요약
| 목표 | 사용한 기술 |
| 정적 파일 서비스 | HTML/CSS |
| 웹 서버 | Nginx |
| 컨테이너 구성 | Docker |
| 멀티 컨테이너 관리 | Docker Compose |
| 실시간 반영 | volumes 사용 |
'코딩 > Docker' 카테고리의 다른 글
| 🐳 Docker Compose로 Redis + Node.js 연동하기 (0) | 2025.06.26 |
|---|---|
| 🐳 자주 사용하는 Docker Compose CLI 명령어 (0) | 2025.06.26 |
| 🐳 Docker Compose를 사용하는 이유 (0) | 2025.06.25 |
| 🐳 웹 프론트엔드 프로젝트(HTML, CSS, Nginx)를 Docker로 배포하기 (0) | 2025.06.25 |
| 🐳 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기 (0) | 2025.06.25 |
댓글