1. Docker Compose 로 프론트엔드(HTML, CSS, Nginx) 실행
1) HTML, CSS 파일 생성
- Windows PowerShell
PS C:\Users\admin> mkdir compose-web-server
디렉터리: C:\Users\admin
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2026-05-31 오후 10:59 compose-web-server
PS C:\Users\admin> cd compose-web-server
- compose-web-server/index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Compose Web Page</h1>
</body>
</html>
* 주의
Nginx 기본 설정에 의해 메인 페이지(첫 페이지)의 파일명을 index.html 로 지어야 함
- compose-web-server/style.css
* {
color: blue;
}
2) Dockerfile 작성
Docker Hub - nginx : https://hub.docker.com/_/nginx
nginx - Official Image | Docker Hub
Quick reference Supported tags and respective Dockerfile links 1.31.1, mainline, 1, 1.31, latest, 1.31.1-trixie, mainline-trixie, 1-trixie, 1.31-trixie, trixie 1.31.1-perl, mainline-perl, 1-perl, 1.31-perl, perl, 1.31.1-trixie-perl, mainline-trixi
hub.docker.com
- compose-web-server/Dockerfile
FROM nginx
COPY ./ /usr/share/nginx/html
3) compose 파일 작성
compose.yml 작성하지 않고 Docker CLI 로 실행시킬 때)
$ docker build -t compose-web-server .
$ docker run -d -p 80:80 compose-web-server
- compose-web-server/compose.yml
services:
compose-web-server:
build: .
ports:
- 80:80
4) compose 파일 실행
- Windows PowerShell
PS C:\Users\admin\compose-web-server> docker compose up --build -d
#1 [internal] load local bake definitions
#1 reading from stdin 595B 0.0s done
#1 DONE 0.0s
#2 [internal] load build definition from Dockerfile
#2 transferring dockerfile: 79B done
#2 DONE 0.1s
#3 [internal] load metadata for docker.io/library/nginx:latest
#3 DONE 0.1s
#4 [internal] load .dockerignore
#4 transferring context: 2B done
#4 DONE 0.1s
#5 [internal] load build context
#5 transferring context: 458B done
#5 DONE 0.1s
#6 [1/2] FROM docker.io/library/nginx:latest@sha256:5aca99593157f4ae539a5dec1092a0ad8762f8e2eb1789085a13a0f5622369f6
#6 resolve docker.io/library/nginx:latest@sha256:5aca99593157f4ae539a5dec1092a0ad8762f8e2eb1789085a13a0f5622369f6 0.1s done
#6 DONE 0.4s
#7 [2/2] COPY ./ /usr/share/nginx/html
#7 DONE 0.1s
#8 exporting to image
#8 exporting layers
#8 exporting layers 0.2s done
#8 exporting manifest sha256:03d96a60f9ec86cd872cd0cc6d1c847ed371292f7b23468f7bc14cb57282d20d 0.0s done
#8 exporting config sha256:5c433d50ccffd76ba6062cba9483d0c492e87c816690c26d71406d068faf8ad7 0.0s done
#8 exporting attestation manifest sha256:c48a3be47cfbe0ac2ba6c383d499ea1f82e6acfab9cf2a08d014ba17d6439162
#8 exporting attestation manifest sha256:c48a3be47cfbe0ac2ba6c383d499ea1f82e6acfab9cf2a08d014ba17d6439162 0.1s done
#8 exporting manifest list sha256:c70bd0ddda1fd80a66025f481768013f6bef02edacae3c5b5b5efa352f3db857 0.0s done
#8 naming to docker.io/library/compose-web-server-compose-web-server:latest
#8 naming to docker.io/library/compose-web-server-compose-web-server:latest done
#8 unpacking to docker.io/library/compose-web-server-compose-web-server:latest 0.1s done
#8 DONE 0.5s
#9 resolving provenance for metadata file
#9 DONE 0.0s
[+] up 3/3
✔ Image compose-web-server-compose-web-server Built 1.8s
✔ Network compose-web-server_default Created 0.0s
✔ Container compose-web-server-compose-web-server-1 Started 0.5s
What's next:
Filter, search, and stream logs from all your Compose services
in one place with Docker Desktop's Logs view. docker-desktop://dashboard/logs?appId=compose-web-server
5) compose 실행 현황 확인, 이미지 생성 확인
- Windows PowerShell
PS C:\Users\admin\compose-web-server> docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
compose-web-server-compose-web-server-1 compose-web-server-compose-web-server "/docker-entrypoint.…" compose-web-server 20 seconds ago Up 19 seconds 0.0.0.0:80->80/tcp, [::]:80->80/tcp
PS C:\Users\admin\compose-web-server> docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
05aa5951abc0 compose-web-server-compose-web-server "/docker-entrypoint.…" 27 seconds ago Up 26 seconds 0.0.0.0:80->80/tcp, [::]:80->80/tcp compose-web-server-compose-web-server-1
PS C:\Users\admin\compose-web-server> docker image ls
i Info → U In Use
IMAGE ID DISK USAGE CONTENT SIZE EXTRA
compose-nest-server-compose-nest-server:latest c50411fed584 2.1GB 502MB
compose-next-server-compose-next-server:latest 4e26f54e6c8c 1.41GB 398MB
compose-spring-boot-server-my-server:latest dc64aff88c24 719MB 230MB
compose-web-server-compose-web-server:latest c70bd0ddda1f 238MB 63.1MB U
my-jdk17-server:beta 18e650b59b52 682MB 212MB
my-jdk17-server:latest 09a2803e5d8e 682MB 212MB U
my-node-server:latest 9a1e49574c81 1.77GB 442MB U
my-server:latest c8dad74bef6b 157MB 41.6MB U
mysql:latest c11782aa2a96 1.3GB 290MB
nginx:latest 5aca99593157 241MB 66MB
redis:latest 4d25e2fe601f 204MB 55.3MB
6) 컨테이너 로그 확인
- Windows PowerShell
PS C:\Users\admin\compose-web-server> docker compose logs
compose-web-server-1 | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
compose-web-server-1 | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
compose-web-server-1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
compose-web-server-1 | 10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
compose-web-server-1 | 10-listen-on-ipv6-by-default.sh: info: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
compose-web-server-1 | /docker-entrypoint.sh: Sourcing /docker-entrypoint.d/15-local-resolvers.envsh
compose-web-server-1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
compose-web-server-1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
compose-web-server-1 | /docker-entrypoint.sh: Configuration complete; ready for start up
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: using the "epoll" event method
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: nginx/1.31.1
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: built by gcc 14.2.0 (Debian 14.2.0-19)
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: OS: Linux 6.6.114.1-microsoft-standard-WSL2
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker processes
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 29
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 30
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 31
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 32
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 33
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 34
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 35
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 36
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 37
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 38
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 39
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 40
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 41
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 42
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 43
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 44
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 45
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 46
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 47
compose-web-server-1 | 2026/05/31 14:12:05 [notice] 1#1: start worker process 48
What's next:
Filter, search, and stream logs from all your Compose services
in one place with Docker Desktop's Logs view. docker-desktop://dashboard/logs?appId=compose-web-server
7) 브라우저에서 확인
브라우저에서 http://localhost:80/ 접속
8) 실행시킨 컨테이너 중지 후 삭제
- Windows PowerShell
PS C:\Users\admin\compose-web-server> docker compose down
[+] down 2/2
✔ Container compose-web-server-compose-web-server-1 Removed 0.4s
✔ Network compose-web-server_default Removed 0.3s
PS C:\Users\admin\compose-web-server> docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
PS C:\Users\admin\compose-web-server> docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES비전공자도 이해할 수 있는 Docker 입문/실전| JSCODE 박재성 - 인프런 강의
현재 평점 4.9점 수강생 14,486명인 강의를 만나보세요. 비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 Docker 입문/실전 강의를 만들어봤습니다! Docker 기본 개념, Spring Boot를
www.inflearn.com
'강의 실습 > 비전공자도 이해할 수 있는 Docker 입문 실전' 카테고리의 다른 글
| [실습] Spring Boot, MySQL 컨테이너 동시에 띄워보기 (0) | 2026.06.02 |
|---|---|
| [실습] MySQL, Redis 컨테이너 동시에 띄워보기 (2) | 2026.06.01 |
| [실습] Docker Compose로 프론트엔드(Next.js) 실행시키기 (0) | 2026.05.30 |
| [실습] Docker Compose로 백엔드(Nest.js) 실행시키기 (0) | 2026.05.29 |
| [실습] Docker Compose로 백엔드(Spring Boot) 실행시키기 (0) | 2026.05.29 |
댓글