✅ 1. 정적 웹페이지 만들기
mkdir my-web
cd my-web
📄 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Static Web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello from Docker + Nginx!</h1>
</body>
</html>
📄style.css
body {
background-color: #f5f5f5;
color: #333;
text-alifgn: center;
margin-top: 100px;
font-family: sans-serif;
}
✅ 2. Nginx 설정파일 작성
mkdir config
📄 config/default.conf
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html
}
}
🔍 설명
- listen 80 : 80번 포트에서 요청 대기
- root : 정적 파일이 위치한 경로 (Nginx 컨테이너 기준)
- index : 요청이 / 로 들어오면 index.html 보여줌
✅ 3. Dockerfile 작성
📄 Dockerfile
FROM nginx:stable-alpine
COPY ./index.html /usr/share/nginx/html/
COPY ./style.css /usr/share/nginx/html/
COPY ./config/default.conf /etc/nginx/conf.d/default.conf
🔍 설명
- nginx:stable-alpine : Nginx 경량 이미지 사용
- COPY : HTML/CSS 및 설정 파일을 컨테이너 내로 복사
✅ 4. 이미지 빌드하기
docker build -t my-static-web .- -t : 이미지에 이름 태그 붙이기
✅ 5. 컨테이너 실행하기
docker run -d -p 8080:80 my-static-web💡 즉, 브라우저에서 http://localhost:8080 으로 접속 가능
✅ 6. 결과 화면 확인
브라우저에서 아래 주소로 접속하면 정적 웹사이트가 잘 뜹니다.
http://localhost:8080Hello from Docker + Nginx! 문구가 보이면 성공입니다!
✅ 7. 정리 및 이미지/컨테이너 삭제
docker ps # 실행 중인 컨테이너 확인
docker stop [컨테이너ID] # 중지
docker rm [컨테이너ID] # 삭제
docker image rm my-static-web # 이미지 삭제
✅ 전체 폴더 구조 예시
my-web/
├── index.html
├── style.css
├── Dockerfile
└── config/
└── default.conf
✅ 그림으로 이해하기
'코딩 > Docker' 카테고리의 다른 글
| 🐳 Docker Compose + Nginx로 정적 웹사이트 띄우기 (0) | 2025.06.25 |
|---|---|
| 🐳 Docker Compose를 사용하는 이유 (0) | 2025.06.25 |
| 🐳 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기 (0) | 2025.06.25 |
| 🐳 백엔드 프로젝트(Nest.js)를 Docker로 실행시키기 (1) | 2025.06.25 |
| 🐳 EXPOSE : 컨테이너 내부에서 사용 중인 포트를 문서화하기 (0) | 2025.06.25 |
댓글