Angular 언어별 가이드
Angular 언어별 가이드 (Angular language-specific guide)
Docker를 사용해 Angular 애플리케이션을 컨테이너화하는 방법을 설명하는 가이드예요.
출처: 문서
본문
Angular 언어별 가이드는 효율적이고 프로덕션 준비가 된 컨테이너를 만들기 위한 모범 사례를 따라 Docker로 Angular 애플리케이션을 컨테이너화하는 방법을 보여줘요.
Angular는 동적이고 엔터프라이즈급 웹 애플리케이션을 구축하기 위한 강력하고 널리 채택된 프레임워크예요. 하지만 애플리케이션이 확장됨에 따라 의존성, 환경, 배포를 관리하는 것이 복잡해질 수 있어요. Docker는 개발과 프로덕션을 위한 일관되고 격리된 환경을 제공해 이러한 문제를 해소해요.
감사의 말 (Acknowledgment): Docker는 이 가이드를 저술한 Kristiyan Velkov에게 진심 어린 감사를 전해요. Docker Captain이자 경험 많은 Front-end 엔지니어로서 그의 Docker, DevOps, 현대 웹 개발에 대한 전문성은 이 리소스를 커뮤니티에 필수로 만들었어요.
무엇을 배우게 되나요? (What will you learn?)
이 가이드에서 다음을 배우게 됩니다:
- Docker를 사용해 Angular 애플리케이션을 컨테이너화하고 실행하기.
- 컨테이너 안에 Angular용 로컬 개발 환경 설정하기.
- Docker 컨테이너 안에서 Angular 애플리케이션 테스트 실행하기.
기존 Angular 애플리케이션을 컨테이너화하는 것에서 시작해 프로덕션 수준 배포까지 나아갈 거예요.
사전 요구사항 (Prerequisites)
시작하기 전에 다음에 대한 실무 지식이 있는지 확인하세요:
- TypeScript와 JavaScript에 대한 기본 이해.
- 의존성 관리와 스크립트 실행을 위한 Node.js와 npm에 대한 친숙함.
- Angular 기본에 대한 친숙함.
- 이미지, 컨테이너, Dockerfile 같은 핵심 Docker 개념에 대한 이해. Docker가 처음이라면 Docker basics 가이드로 시작하세요.
Angular 시작하기 모듈을 완료하면 이 가이드에 설명된 상세한 예시와 모범 사례를 사용해 자신만의 Angular 애플리케이션을 컨테이너화할 완전한 준비가 될 거예요.
Angular 애플리케이션 컨테이너화하기 (Containerize an Angular Application)
사전 요구사항 (Prerequisites)
시작하기 전에 다음 도구가 시스템에 설치되어 있는지 확인하세요:
- 최신 버전의 Docker Desktop 설치.
- git 클라이언트. 이 섹션의 예시는 명령줄 기반 git 클라이언트를 사용하지만 어떤 클라이언트든 사용할 수 있어요.
Docker가 처음인가요? Docker basics 가이드로 시작해 이미지, 컨테이너, Dockerfile 같은 핵심 개념에 익숙해지세요.
개요 (Overview)
이 가이드는 Docker로 Angular 애플리케이션을 컨테이너화하는 전체 과정을 안내해요. 성능, 보안, 확장성, 배포 효율성을 개선하는 모범 사례를 사용해 프로덕션 준비가 된 Docker 이미지를 만드는 방법을 배우게 됩니다.
이 가이드가 끝나면:
- Docker를 사용해 Angular 애플리케이션을 컨테이너화합니다.
- 프로덕션 빌드를 위한 Dockerfile을 만들고 최적화합니다.
- 이미지 크기를 최소화하기 위해 멀티-스테이지 빌드를 사용합니다.
- 사용자 지정 Nginx 구성으로 애플리케이션을 효율적으로 서빙합니다.
- 모범 사례를 따라 안전하고 유지 관리 가능한 Docker 이미지를 빌드합니다.
샘플 애플리케이션 가져오기 (Get the sample application)
이 가이드에 사용할 샘플 애플리케이션을 클론하세요. 터미널을 열고 작업하려는 디렉터리로 이동한 후 다음 명령을 실행해 git 저장소를 클론합니다:
$ git clone https://github.com/kristiyan-velkov/docker-angular-sample
Docker 이미지 빌드하기 (Build the Docker image)
Angular는 정적 자산으로 컴파일되는 프론트엔드 프레임워크이므로 Dockerfile은 멀티-스테이지 빌드를 사용해요: 한 스테이지는 Node.js로 앱을 컴파일하고, 두 번째 최소 스테이지는 Nginx로 정적 출력을 서빙해요.
팁: Docker의 AI 어시스턴트 Gordon이 프로젝트를 위한 Docker 자산을 생성할 수 있어요. Gordon에게 앱에 맞춘 Dockerfile, Compose 파일,
.dockerignore를 만들라고 요청하세요.
1단계: Dockerfile 만들기 (Step 1: Create the Dockerfile)
Dockerfile을 만들기 전에 기본 이미지를 선택해야 해요. Node.js Official Image 또는 Hardened Image 카탈로그의 Docker Hardened Image (DHI)를 사용할 수 있어요.
DHI를 선택하면 가볍고 안전한 프로덕션 준비가 된 이미지라는 이점이 있어요. 자세한 내용은 Docker Hardened Images를 참조하세요.
중요: 이 가이드는 작성 시점에 안전하다고 간주되는 안정적인 Node.js LTS 이미지 태그를 사용해요. 새 릴리스와 보안 패치가 정기적으로 게시되므로 여기에 표시된 태그는 가이드를 따르는 시점에는 더 이상 가장 안전한 옵션이 아닐 수 있어요. 빌드하거나 배포하기 전에 항상 최신 사용 가능 이미지 태그를 검토하고 안전하고 최신 버전을 선택하세요.
공식 Node.js Docker 이미지: https://hub.docker.com/_/node
Docker Hardened Images 사용하기
Node.js용 Docker Hardened Images (DHIs)는 Docker Hardened Images 카탈로그에서 사용할 수 있어요. Docker Hardened Images는 구독 없이 누구에게나 무료로 제공돼요. DHI 레지스트리에 로그인하면 다른 Docker 이미지처럼 pull해서 사용할 수 있어요. 자세한 내용은 DHI quickstart 가이드를 참조하세요.
- DHI 레지스트리에 로그인하세요:
$ docker login dhi.io
- Node.js DHI를 pull하세요 (사용 가능한 버전은 카탈로그 확인):
$ docker pull dhi.io/node:24-alpine3.22-dev
다음 Dockerfile에서 FROM 지시문은 dhi.io/node:24-alpine3.22-dev를 기본 이미지로 사용해요.
# =========================================
# Stage 1: Build the Angular Application
# =========================================
# Use a lightweight DHI Node.js image for building
FROM dhi.io/node:24-alpine3.22-dev AS builder
# Set the working directory inside the container
WORKDIR /app
# Copy package-related files first to leverage Docker's caching mechanism
COPY package.json package-lock.json* ./
# Install project dependencies using npm ci (ensures a clean, reproducible install)
RUN --mount=type=cache,target=/root/.npm npm ci
# Copy the rest of the application source code into the container
COPY . .
# Build the Angular application
RUN npm run build
# =========================================
# Stage 2: Prepare Nginx to Serve Static Files
# =========================================
FROM dhi.io/nginx:1.28.0-alpine3.21-dev AS runner
# Copy custom Nginx config
COPY nginx.conf /etc/nginx/nginx.conf
# Copy the static build output from the build stage to Nginx's default HTML serving directory
COPY --chown=nginx:nginx --from=builder /app/dist/*/browser /usr/share/nginx/html
# Use a non-root user for security best practices
USER nginx
# Expose port 8080 to allow HTTP traffic
# Note: The default Nginx container now listens on port 8080 instead of 80
EXPOSE 8080
# Start Nginx directly with custom config
ENTRYPOINT ["nginx", "-c", "/etc/nginx/nginx.conf"]
CMD ["-g", "daemon off;"]
Docker Official Image 사용하기
다음 내용으로 Dockerfile이라는 파일을 만드세요:
# =========================================
# Stage 1: Build the Angular Application
# =========================================
ARG NODE_VERSION=24.12.0-alpine
ARG NGINX_VERSION=alpine3.22
# Use a lightweight Node.js image for building (customizable via ARG)
FROM node:${NODE_VERSION} AS builder
# Set the working directory inside the container
WORKDIR /app
# Copy package-related files first to leverage Docker's caching mechanism
COPY package.json *package-lock.json* ./
# Install project dependencies using npm ci (ensures a clean, reproducible install)
RUN --mount=type=cache,target=/root/.npm npm ci
# Copy the rest of the application source code into the container
COPY . .
# Build the Angular application
RUN npm run build
# =========================================
# Stage 2: Prepare Nginx to Serve Static Files
# =========================================
FROM nginxinc/nginx-unprivileged:${NGINX_VERSION} AS runner
# Copy custom Nginx config
COPY nginx.conf /etc/nginx/nginx.conf
# Copy the static build output from the build stage to Nginx's default HTML serving directory
COPY --chown=nginx:nginx --from=builder /app/dist/*/browser /usr/share/nginx/html
# Use a built-in non-root user for security best practices
USER nginx
# Expose port 8080 to allow HTTP traffic
# Note: The default Nginx container now listens on port 8080 instead of 80
EXPOSE 8080
# Start Nginx directly with custom config
ENTRYPOINT ["nginx", "-c", "/etc/nginx/nginx.conf"]
CMD ["-g", "daemon off;"]
참고: 보안 모범 사례를 따르기 위해 표준 Nginx 이미지 대신
nginx-unprivileged를 사용하고 있어요. 최종 이미지에서 비-루트 사용자로 실행하면:
- 공격 표면을 줄입니다
- 컨테이너 강화에 대한 Docker의 권장사항과 일치합니다
- 프로덕션 환경에서 더 엄격한 보안 정책을 준수하는 데 도움이 됩니다
2단계: compose.yaml 파일 만들기 (Step 2: Create the compose.yaml file)
다음 내용으로 compose.yaml이라는 파일을 만드세요:
services:
server:
build:
context: .
ports:
- 8080:8080
3단계: .dockerignore 파일 만들기 (Step 3: Create the .dockerignore file)
.dockerignore 파일은 이미지를 빌드할 때 제외할 파일과 폴더를 Docker에 알려줘요.
참고: 이는 다음을 도와줍니다:
- 이미지 크기를 줄입니다
- 빌드 과정을 빠르게 합니다
- 민감하거나 불필요한 파일(예:
.env,.git,node_modules)이 최종 이미지에 추가되는 것을 방지합니다.자세히 알아보려면 .dockerignore reference를 방문하세요.
다음 내용으로 .dockerignore라는 파일을 만드세요:
# ================================
# Node and build output
# ================================
node_modules
dist
out-tsc
.angular
.cache
.tmp
# ================================
# Testing & Coverage
# ================================
coverage
jest
cypress
cypress/screenshots
cypress/videos
reports
playwright-report
.vite
.vitepress
# ================================
# Environment & log files
# ================================
*.env*
!*.env.production
*.log
*.tsbuildinfo
# ================================
# IDE & OS-specific files
# ================================
.vscode
.idea
.DS_Store
Thumbs.db
*.swp
# ================================
# Version control & CI files
# ================================
.git
.gitignore
# ================================
# Docker & local orchestration
# ================================
Dockerfile
Dockerfile.*
.dockerignore
docker-compose.yml
docker-compose*.yml
# ================================
# Miscellaneous
# ================================
*.bak
*.old
*.tmp
4단계: nginx.conf 파일 만들기 (Step 4: Create the nginx.conf file)
컨테이너 안에서 Angular 애플리케이션을 효율적으로 서빙하려면 사용자 지정 설정으로 Nginx를 구성할 거예요. 이 구성은 성능, 브라우저 캐싱, gzip 압축, 클라이언트 측 라우팅 지원에 최적화되어 있어요.
프로젝트 디렉터리 루트에 nginx.conf라는 파일을 만들고 다음 내용을 추가하세요:
worker_processes auto;
pid /tmp/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
client_body_temp_path /tmp/client_temp;
proxy_temp_path /tmp/proxy_temp_path;
fastcgi_temp_path /tmp/fastcgi_temp;
uwsgi_temp_path /tmp/uwsgi_temp;
scgi_temp_path /tmp/scgi_temp;
# Logging
access_log off;
error_log /dev/stderr warn;
# Performance
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
keepalive_requests 1000;
# Compression
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_min_length 256;
gzip_comp_level 6;
gzip_types
text/plain
text/css
text/xml
text/javascript
application/javascript
application/x-javascript
application/json
application/xml
application/xml+rss
font/ttf
font/otf
image/svg+xml;
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Angular Routing
location / {
try_files $uri $uri/ /index.html;
}
# Static Assets Caching
location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|map)$ {
expires 1y;
access_log off;
add_header Cache-Control "public, immutable";
}
# Optional: Explicit asset route
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
}
참고: Nginx 구성에 대해 자세히 알아보려면 공식 Nginx 문서를 참조하세요.
5단계: Angular 애플리케이션 이미지 빌드하기 (Step 5: Build the Angular application image)
사용자 지정 구성이 준비되었으니 이제 Angular 애플리케이션용 Docker 이미지를 빌드할 준비가 됐어요.
업데이트된 설정은 다음을 포함해요:
- Angular에 특별히 맞춰진 깔끔하고 프로덕션 준비가 된 Nginx 구성.
- 작고 안전한 최종 이미지를 보장하는 효율적인 멀티-스테이지 Docker 빌드.
이전 단계를 완료한 후 프로젝트 디렉터리는 다음 파일을 포함해야 해요:
├── docker-angular-sample/
│ ├── Dockerfile
│ ├── .dockerignore
│ ├── compose.yaml
│ └── nginx.conf
이제 Dockerfile이 구성되었으니 Angular 애플리케이션용 Docker 이미지를 빌드할 수 있어요.
참고:
docker build명령은 Dockerfile의 지시문을 사용해 애플리케이션을 이미지로 패키징해요. 현재 디렉터리(build context라고 함)의 모든 필요한 파일을 포함해요.
프로젝트 루트에서 다음 명령을 실행하세요:
$ docker build --tag docker-angular-sample .
이 명령이 하는 일:
- 현재 디렉터리(
.)의 Dockerfile을 사용합니다 - 애플리케이션과 의존성을 Docker 이미지로 패키징합니다
- 나중에 참조할 수 있도록 이미지를
docker-angular-sample로 태그합니다
6단계: 로컬 이미지 보기 (Step 6: View local images)
Docker 이미지를 빌드한 후 Docker CLI 또는 Docker Desktop으로 로컬 머신에서 사용 가능한 이미지를 확인할 수 있어요. 이미 터미널에서 작업하고 있으니 Docker CLI를 사용해보죠.
로컬에서 사용 가능한 모든 Docker 이미지를 나열하려면 다음 명령을 실행하세요:
$ docker images
예시 출력:
REPOSITORY TAG IMAGE ID CREATED SIZE
docker-angular-sample latest 34e66bdb9d40 14 seconds ago 76.4MB
이 출력은 이미지에 대한 핵심 세부 정보를 제공해요:
- Repository – 이미지에 부여된 이름.
- Tag – 다른 빌드를 식별하는 데 도움이 되는 버전 라벨 (예:
latest). - Image ID – 이미지의 고유 식별자.
- Created – 이미지가 빌드된 시점을 나타내는 타임스탬프.
- Size – 이미지가 사용하는 총 디스크 공간.
빌드가 성공했다면 docker-angular-sample 이미지가 나열된 것을 볼 수 있어야 해요.
컨테이너화된 애플리케이션 실행하기 (Run the containerized application)
이전 단계에서 Angular 애플리케이션용 Dockerfile을 만들고 docker build 명령으로 Docker 이미지를 빌드했어요. 이제 그 이미지를 컨테이너에서 실행하고 애플리케이션이 예상대로 동작하는지 확인할 차례예요.
docker-angular-sample 디렉터리 안에서 터미널에 다음 명령을 실행하세요.
$ docker compose up --build
브라우저를 열고 http://localhost:8080에서 애플리케이션을 확인하세요. 간단한 Angular 웹 애플리케이션이 보일 거예요.
터미널에서 ctrl+c를 눌러 애플리케이션을 중지하세요.
백그라운드에서 애플리케이션 실행하기 (Run the application in the background)
-d 옵션을 추가해 터미널에서 분리된 상태로 애플리케이션을 실행할 수 있어요. docker-angular-sample 디렉터리 안에서 터미널에 다음 명령을 실행하세요.
$ docker compose up --build -d
브라우저를 열고 http://localhost:8080에서 애플리케이션을 확인하세요. 브라우저에서 Angular 애플리케이션이 실행되는 것을 볼 수 있어요.
컨테이너가 실행 중인지 확인하려면 docker ps 명령을 사용하세요:
$ docker ps
이 명령은 포트, 이름, 상태와 함께 모든 활성 컨테이너를 나열해요. 포트 8080을 노출하는 컨테이너를 찾으세요.
예시 출력:
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
eb13026806d1 docker-angular-sample-server "nginx -c /etc/nginx…" About a minute ago Up About a minute 0.0.0.0:8080->8080/tcp docker-angular-sample-server-1
애플리케이션을 중지하려면 다음을 실행하세요:
$ docker compose down
참고: Compose 명령에 대한 자세한 내용은 Compose CLI 참조를 확인하세요.
개발을 위해 컨테이너 사용하기 (Use containers for Angular development)
사전 요구사항 (Prerequisites)
Angular 애플리케이션 컨테이너화하기를 완료하세요.
개요 (Overview)
이 섹션에서는 Docker Compose로 컨테이너화된 Angular 애플리케이션을 위한 프로덕션 및 개발 환경을 모두 설정하는 방법을 배우게 됩니다. 이 설정을 통해 Nginx로 정적 프로덕션 빌드를 서빙하고, Compose Watch로 라이브-리로딩 개발 서버를 사용해 컨테이너 안에서 효율적으로 개발할 수 있어요.
다음을 배우게 됩니다:
- 프로덕션과 개발용 별도 컨테이너 구성
- 개발에서 Compose Watch를 사용한 자동 파일 동기화 활성화
- 수동 재빌드 없이 실시간으로 변경 사항 디버그 및 라이브-미리보기
(개발 모드에서) 서비스를 자동으로 업데이트하기 (Automatically update services - development mode)
Compose Watch를 사용해 소스 파일 변경을 컨테이너화된 개발 환경으로 자동 동기화하세요. 이는 컨테이너를 수동으로 재시작하거나 재빌드하지 않고도 매끄럽고 효율적인 개발 환경을 제공해요.
1단계: 개발용 Dockerfile 만들기 (Step 1: Create a development Dockerfile)
프로젝트 루트에 Dockerfile.dev라는 파일을 다음 내용으로 만드세요:
# =========================================
# Stage 1: Development - Angular Application
# =========================================
# Define the Node.js version to use (Alpine for a small footprint)
ARG NODE_VERSION=24.12.0-alpine
# Set the base image for development
FROM node:${NODE_VERSION} AS dev
# Set environment variable to indicate development mode
ENV NODE_ENV=development
# Set the working directory inside the container
WORKDIR /app
# Copy only the dependency files first to optimize Docker caching
COPY package.json package-lock.json* ./
# Install dependencies using npm with caching to speed up subsequent builds
RUN --mount=type=cache,target=/root/.npm npm install
# Copy all application source files into the container
COPY . .
# Expose the port Angular uses for the dev server (default is 4200)
EXPOSE 4200
# Start the Angular dev server and bind it to all network interfaces
CMD ["npm", "start", "--", "--host=0.0.0.0"]
이 파일은 개발 서버를 사용해 Angular 애플리케이션을 위한 가벼운 개발 환경을 설정해요.
2단계: compose.yaml 파일 업데이트 (Step 2: Update your compose.yaml file)
compose.yaml 파일을 열고 두 개의 서비스를 정의하세요: 프로덕션용(angular-prod) 및 개발용(angular-dev).
Angular 애플리케이션 예시 구성:
services:
angular-prod:
build:
context: .
dockerfile: Dockerfile
image: docker-angular-sample
ports:
- "8080:8080"
angular-dev:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "4200:4200"
develop:
watch:
- action: sync
path: .
target: /app
angular-prod서비스는 Nginx를 사용해 정적 프로덕션 앱을 빌드하고 서빙해요.angular-dev서비스는 라이브 리로드와 핫 모듈 교체(HMR)로 Angular 개발 서버를 실행해요.watch는 Compose Watch로 파일 동기화를 트리거해요.
참고: 자세한 내용은 공식 가이드 Use Compose Watch를 참조하세요.
이전 단계를 완료한 후 프로젝트 디렉터리는 다음 파일을 포함해야 해요:
├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ └── nginx.conf
4단계: Compose Watch 시작 (Step 4: Start Compose Watch)
프로젝트 루트에서 다음 명령을 실행해 컨테이너를 watch 모드로 시작하세요.
$ docker compose watch angular-dev
5단계: Angular로 Compose Watch 테스트 (Step 5: Test Compose Watch with Angular)
Compose Watch가 올바르게 동작하는지 확인하려면:
- 텍스트 편집기에서
src/app/app.component.html파일을 엽니다. - 다음 줄을 찾습니다:
<h1>Docker Angular Sample Application</h1>
- 다음으로 변경합니다:
<h1>Hello from Docker Compose Watch</h1>
- 파일을 저장합니다.
http://localhost:4200에서 브라우저를 엽니다.- 컨테이너를 수동으로 재빌드하지 않고도 업데이트된 텍스트가 즉시 나타나는 것을 볼 수 있어요. 이는 파일 감시와 자동 동기화가 예상대로 동작하고 있음을 확인시켜줘요.
컨테이너에서 Angular 테스트 실행하기 (Run Angular tests in a container)
사전 요구사항 (Prerequisites)
Angular 애플리케이션 컨테이너화하기로 시작해 이 가이드의 이전 모든 섹션을 완료하세요.
개요 (Overview)
테스트는 개발 과정의 중요한 부분이에요. 이 섹션에서 다음을 배우게 됩니다:
- Docker 컨테이너 안에서 Angular CLI로 Jasmine 단위 테스트 실행.
- Docker Compose로 테스트 환경 격리.
- 로컬과 컨테이너 기반 테스트 사이의 일관성 보장.
docker-angular-sample 프로젝트는 Jasmine이 사전 구성되어 있어 추가 설정 없이 빠르게 시작할 수 있어요.
개발 중 테스트 실행하기 (Run tests during development)
docker-angular-sample 애플리케이션은 다음 위치에 샘플 테스트 파일을 포함해요:
src/app/app.component.spec.ts
이 테스트는 Jasmine을 사용해 AppComponent 로직을 검증해요.
1단계: compose.yaml 업데이트 (Step 1: Update compose.yaml)
compose.yaml 파일에 angular-test라는 새 서비스를 추가하세요. 이 서비스는 격리된 컨테이너화된 환경에서 테스트 스위트를 실행할 수 있게 해줘요.
services:
angular-dev:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "5173:5173"
develop:
watch:
- action: sync
path: .
target: /app
angular-prod:
build:
context: .
dockerfile: Dockerfile
image: docker-angular-sample
ports:
- "8080:8080"
angular-test:
build:
context: .
dockerfile: Dockerfile.dev
command: ["npm", "run", "test"]
angular-test 서비스는 개발에 사용되는 것과 동일한 Dockerfile.dev를 재사용하고, npm run test로 테스트를 실행하도록 기본 명령을 재정의해요. 이 설정은 로컬 개발 구성과 일치하는 일관된 테스트 환경을 보장해요.
이전 단계를 완료한 후 프로젝트 디렉터리는 다음 파일을 포함해야 해요:
├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ └── nginx.conf
2단계: 테스트 실행하기 (Step 2: Run the tests)
컨테이너 안에서 테스트 스위트를 실행하려면 프로젝트 루트에서 다음 명령을 실행하세요:
$ docker compose run --rm angular-test
이 명령은:
compose.yaml파일에 정의된angular-test서비스를 시작합니다.- 개발과 동일한 환경을 사용해
npm run test스크립트를 실행합니다. docker compose run --rm명령을 사용해 테스트 완료 후 컨테이너를 자동으로 제거합니다.
다음과 유사한 출력을 볼 수 있어야 해요:
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 1.529 s
참고: Compose 명령에 대한 자세한 내용은 Compose CLI 참조를 확인하세요.
요약 (Summary)
이 섹션에서 Jasmine과 Docker Compose를 사용해 Docker 컨테이너 안에서 Angular 애플리케이션의 단위 테스트를 실행하는 방법을 배웠어요.
달성한 것:
- 테스트 실행을 격리하기 위해
compose.yaml에angular-test서비스 생성. - dev와 test 환경 사이의 일관성을 보장하기 위해 개발용
Dockerfile.dev재사용. docker compose run --rm angular-test명령으로 컨테이너 안에서 테스트 실행.- 로컬 머신 설정에 의존하지 않고 다양한 환경에서 안정적이고 반복 가능한 테스트 보장.
관련 리소스 (Related resources)
Docker 테스트 워크플로우를 다듬기 위한 공식 참조와 모범 사례를 탐색하세요:
- Dockerfile reference – 모든 Dockerfile 지시문과 구문 이해.
- Dockerfile 작성 모범 사례 – 효율적이고 유지 관리 가능하며 안전한 Dockerfile 작성.
- Compose file reference –
compose.yaml에서 서비스 구성에 사용 가능한 전체 구문과 옵션 학습. docker compose runCLI reference – 서비스 컨테이너에서 일회성 명령 실행.