1. Docker Compose 로 프론트엔드(Next.js) 실행
1) Next.js 프로젝트 생성
- Windows PowerShell
PS C:\Users\admin> npx create-next-app@latest
√ What is your project named? ... compose-next-server
√ Would you like to use the recommended Next.js defaults? » Yes, use recommended defaults
Creating a new Next.js app in C:\Users\admin\compose-next-server.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- next
- react
- react-dom
Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'eslint-visitor-keys@5.0.1',
npm WARN EBADENGINE required: { node: '^20.19.0 || ^22.13.0 || >=24' },
npm WARN EBADENGINE current: { node: 'v20.10.0', npm: '10.2.3' }
npm WARN EBADENGINE }
added 359 packages, and audited 360 packages in 20s
142 packages are looking for funding
run `npm fund` for details
2 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Generating route types...
✓ Types generated successfully
Initialized a git repository.
Success! Created compose-next-server at C:\Users\admin\compose-next-server
PS C:\Users\admin> cd compose-next-server
PS C:\Users\admin\compose-next-server> ls
디렉터리: C:\Users\admin\compose-next-server
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2026-05-30 오후 6:49 .next
d----- 2026-05-30 오후 6:48 app
d----- 2026-05-30 오후 6:49 node_modules
d----- 2026-05-30 오후 6:48 public
-a---- 2026-05-20 오후 10:47 480 .gitignore
-a---- 2026-05-30 오후 6:49 327 AGENTS.md
-a---- 2026-05-30 오후 6:49 11 CLAUDE.md
-a---- 2026-05-20 오후 10:47 465 eslint.config.mjs
-a---- 2026-05-20 오후 10:47 247 next-env.d.ts
-a---- 2026-05-20 오후 10:47 133 next.config.ts
-a---- 2026-05-30 오후 6:49 219551 package-lock.json
-a---- 2026-05-30 오후 6:48 542 package.json
-a---- 2026-05-20 오후 10:47 94 postcss.config.mjs
-a---- 2026-05-20 오후 10:47 1450 README.md
-a---- 2026-05-30 오후 6:48 666 tsconfig.json
2) Dockerfile 작성
- compose-next-server/Dockerfile
# 베이스 이미지 node
FROM node:20-alpine
# 작업 디렉토리 지정
WORKDIR /app
# 호스트 컴퓨터 파일을 컨테이너로 복사
COPY . .
# 라이브러리 설치
RUN npm install
# 빌드
RUN npm run build
# 3000번 포트 사용 명시
EXPOSE 3000
# 빌드된 next.js 프로젝트 실행
ENTRYPOINT [ "npm", "run", "start" ]
· alpine : 불필요한 프로그램을 포함하지 않고 이미지 크기를 최소화한 버전 (최적화된 버전)
실제 배포시, alpine 버전 사용 권장 (현업 Production(운영) 환경에서 많이 씀)
3) .dockerignore 작성
- compose-next-server/.dockerignore
node_modules
이미지 생성시, npm install 을 통해 필요한 의존성만 설치하기 때문에, 호스트 컴퓨터의 node_modules 는 컨테이너로 복사할 필요가 없다.
4) compose 파일 작성
compose.yml 작성하지 않고 Docker CLI 로 실행시킬 때)
$ docker build -t compose-next-server .
$ docker run -d -p 80:3000 compose-next-server
- compose-next-server/compose.yml
services:
compose-next-server:
build: .
ports:
- 80:3000
5) compose 파일 실행
- Windows PowerShell
PS C:\Users\admin\compose-next-server> docker compose up --build -d
#1 [internal] load local bake definitions
#1 reading from stdin 603B 0.0s done
#1 DONE 0.0s
#2 [internal] load build definition from Dockerfile
#2 transferring dockerfile: 404B done
#2 DONE 0.1s
#3 [internal] load metadata for docker.io/library/node:20-alpine
#3 ...
#4 [auth] library/node:pull token for registry-1.docker.io
#4 DONE 0.0s
#3 [internal] load metadata for docker.io/library/node:20-alpine
#3 DONE 1.3s
#5 [internal] load .dockerignore
#5 transferring context: 52B done
#5 DONE 0.1s
#6 [internal] load build context
#6 DONE 0.0s
#7 [1/5] FROM docker.io/library/node:20-alpine@sha256:fb4cd12c85ee03686f6af5362a0b0d56d50c58a04632e6c0fb8363f609372293
#7 resolve docker.io/library/node:20-alpine@sha256:fb4cd12c85ee03686f6af5362a0b0d56d50c58a04632e6c0fb8363f609372293 0.0s done
#7 DONE 0.0s
#6 [internal] load build context
#6 transferring context: 374.22kB 0.0s done
#6 DONE 0.1s
#8 [2/5] WORKDIR /app
#8 CACHED
#9 [3/5] COPY . .
#9 DONE 0.1s
#10 [4/5] RUN npm install
#10 10.83
#10 10.83 added 366 packages, and audited 367 packages in 10s
#10 10.83
#10 10.83 146 packages are looking for funding
#10 10.83 run `npm fund` for details
#10 10.85
#10 10.85 2 moderate severity vulnerabilities
#10 10.85
#10 10.85 To address all issues (including breaking changes), run:
#10 10.85 npm audit fix --force
#10 10.85
#10 10.85 Run `npm audit` for details.
#10 10.85 npm notice
#10 10.85 npm notice New major version of npm available! 10.8.2 -> 11.16.0
#10 10.85 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.16.0
#10 10.85 npm notice To update run: npm install -g npm@11.16.0
#10 10.85 npm notice
#10 DONE 11.3s
#11 [5/5] RUN npm run build
#11 0.408
#11 0.408 > compose-next-server@0.1.0 build
#11 0.408 > next build
#11 0.408
#11 0.748 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#11 0.748 This information is used to shape Next.js' roadmap and prioritize features.
#11 0.748 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#11 0.748 https://nextjs.org/telemetry
#11 0.748
#11 0.765 ▲ Next.js 16.2.6 (Turbopack)
#11 0.765
#11 0.831 Creating an optimized production build ...
#11 2.299 ✓ Compiled successfully in 1306ms
#11 2.310 Running TypeScript ...
#11 3.815 Finished TypeScript in 1504ms ...
#11 3.817 Collecting page data using 5 workers ...
#11 4.125 Generating static pages using 5 workers (0/4) ...
#11 4.482 Generating static pages using 5 workers (1/4)
#11 4.484 Generating static pages using 5 workers (2/4)
#11 4.485 Generating static pages using 5 workers (3/4)
#11 4.485 ✓ Generating static pages using 5 workers (4/4) in 360ms
#11 4.490 Finalizing page optimization ...
#11 4.497
#11 4.498 Route (app)
#11 4.498 ┌ ○ /
#11 4.498 └ ○ /_not-found
#11 4.498
#11 4.498
#11 4.498 ○ (Static) prerendered as static content
#11 4.498
#11 DONE 4.7s
#12 exporting to image
#12 exporting layers
#12 exporting layers 17.0s done
#12 exporting manifest sha256:f290f4711e8c68f6a18b45f931530ea21721244ea328c405de7e707ee25e9f1b 0.0s done
#12 exporting config sha256:3258e68e885bcd5c86453242be7ed1b609d56ba7df9904590fa5ccc2e46450fb 0.0s done
#12 exporting attestation manifest sha256:e7c38d32a1a6e85b7288ae0a33262285286cea395782e5092d230dbf273eed2d 0.1s done
#12 exporting manifest list sha256:4e26f54e6c8c2872c4fb1ffd8b91647b2ba614467c8e63a46154200ac55e94c4
#12 exporting manifest list sha256:4e26f54e6c8c2872c4fb1ffd8b91647b2ba614467c8e63a46154200ac55e94c4 0.0s done
#12 naming to docker.io/library/compose-next-server-compose-next-server:latest done
#12 unpacking to docker.io/library/compose-next-server-compose-next-server:latest
#12 unpacking to docker.io/library/compose-next-server-compose-next-server:latest 4.0s done
#12 DONE 21.3s
#13 resolving provenance for metadata file
#13 DONE 0.0s
[+] up 3/3
✔ Image compose-next-server-compose-next-server Built 39.9s
✔ Network compose-next-server_default Created 0.0s
✔ Container compose-next-server-compose-next-server-1 Started 0.9s
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-next-server
6) compose 실행 현황 확인, 이미지 생성 확인
- Windows PowerShell
PS C:\Users\admin\compose-next-server> docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
compose-next-server-compose-next-server-1 compose-next-server-compose-next-server "npm run start" compose-next-server 38 seconds ago Up 37 seconds 0.0.0.0:80->3000/tcp, [::]:80->3000/tcp
PS C:\Users\admin\compose-next-server> docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
d0b1b85f7d5d compose-next-server-compose-next-server "npm run start" 40 seconds ago Up 39 seconds 0.0.0.0:80->3000/tcp, [::]:80->3000/tcp compose-next-server-compose-next-server-1
PS C:\Users\admin\compose-next-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 U
compose-spring-boot-server-my-server:latest dc64aff88c24 719MB 230MB
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
7) 컨테이너 로그 확인
- Windows PowerShell
PS C:\Users\admin\compose-next-server> docker compose logs
compose-next-server-1 |
compose-next-server-1 | > compose-next-server@0.1.0 start
compose-next-server-1 | > next start
compose-next-server-1 |
compose-next-server-1 | ▲ Next.js 16.2.6
compose-next-server-1 | - Local: http://localhost:3000
compose-next-server-1 | - Network: http://172.18.0.2:3000
compose-next-server-1 | ✓ Ready in 125ms
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-next-server
8) 브라우저에서 확인
브라우저에서 http://localhost:80/ 접속
9) 실행시킨 컨테이너 중지 후 삭제
- Windows PowerShell
PS C:\Users\admin\compose-next-server> docker compose down
[+] down 2/2
✔ Container compose-next-server-compose-next-server-1 Removed 0.3s
✔ Network compose-next-server_default Removed 0.2s
PS C:\Users\admin\compose-next-server> docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
PS C:\Users\admin\compose-next-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 입문 실전' 카테고리의 다른 글
| [실습] MySQL, Redis 컨테이너 동시에 띄워보기 (2) | 2026.06.01 |
|---|---|
| [실습] Docker Compose로 프론트엔드(HTML, CSS, Nginx) 실행시키기 (4) | 2026.05.31 |
| [실습] Docker Compose로 백엔드(Nest.js) 실행시키기 (0) | 2026.05.29 |
| [실습] Docker Compose로 백엔드(Spring Boot) 실행시키기 (0) | 2026.05.29 |
| [실습] Docker Compose로 MySQL 실행시키기 (1) | 2026.05.27 |
댓글