Vue.js 언어별 가이드
Vue.js 언어별 가이드
Docker로 Vue.js 애플리케이션을 컨테이너화하는 방법을 설명해요. 효율적이고 프로덕션에 적합한 컨테이너를 만드는 모범 사례를 따라가요.
출처: 문서
본문
Vue.js 언어별 가이드는 Docker로 Vue.js 애플리케이션을 컨테이너화하는 방법을 보여줘요. 효율적이고 프로덕션에 적합한 컨테이너를 만드는 모범 사례를 따라가요.
Vue.js는 현대적이고 인터랙티브한 웹 애플리케이션을 만들기 위한 진보적이고 유연한 프레임워크예요. 하지만 애플리케이션이 커질수록 의존성, 환경, 배포를 관리하는 게 복잡해질 수 있어요. Docker는 개발과 프로덕션 모두에 일관되고 격리된 환경을 제공해 이런 어려움을 단순화해요.
감사의 말: Docker는 이 가이드를 집필한 Kristiyan Velkov에게 깊은 감사를 전해요. Docker Captain이자 뛰어난 Front-end 엔지니어인 Kristiyan은 최신 웹 개발, Docker, DevOps에 뛰어난 전문성을 지녔어요. 그의 실무 접근 방식과 명확하고 실행 가능한 안내 덕분에 이 가이드는 Docker로 Vue.js 애플리케이션을 만들고, 최적화하고, 보호하려는 개발자에게 필수 자료가 됐어요.
무엇을 배우게 될까요?
이 가이드에서 다음 내용을 배울 수 있어요.
- Docker로 Vue.js 애플리케이션을 컨테이너화하고 실행하기
- 컨테이너 안에 Vue.js 로컬 개발 환경 설정하기
- Docker 컨테이너 안에서 Vue.js 애플리케이션 테스트 실행하기
기존 Vue.js 애플리케이션을 컨테이너화하는 것부터 시작해 프로덕션 수준의 배포까지 차근차근 진행해요.
사전 준비 (Prerequisites)
시작하기 전에 다음 지식을 갖추고 있는지 확인해요.
- TypeScript와 JavaScript에 대한 기본 이해
- 의존성 관리와 스크립트 실행을 위한 Node.js와 npm 사용 경험
- Vue.js 기본 지식
- 이미지, 컨테이너, Dockerfile 같은 핵심 Docker 개념 이해
Docker가 처음이라면 Docker 기초 가이드로 시작해요. Vue.js 시작하기 모듈을 완료하면, 이 가이드에 설명된 상세한 예시와 모범 사례로 자신의 Vue.js 애플리케이션을 컨테이너화할 준비가 완벽하게 될 거예요.
Vue.js 애플리케이션 컨테이너화하기
사전 준비
시작하기 전에 다음 도구가 시스템에 설치되어 있는지 확인해요.
- 최신 버전의 Docker Desktop 설치
- git 클라이언트. 이 섹션의 예시는 커맨드라인 기반 git 클라이언트를 사용하지만, 어떤 클라이언트든 쓸 수 있어요.
Docker가 처음이라면 Docker 기초 가이드로 시작해서 이미지, 컨테이너, Dockerfile 같은 핵심 개념을 익히는 걸 권장해요.
개요
이 가이드는 Docker로 Vue.js 애플리케이션을 컨테이너화하는 전체 과정을 안내해요. 성능, 보안, 확장성, 배포 효율성을 개선하는 모범 사례를 사용해 프로덕션에 적합한 Docker 이미지를 만드는 방법을 배워요. 이 가이드를 마치면 다음을 할 수 있게 돼요.
- Docker로 Vue.js 애플리케이션 컨테이너화하기
- 프로덕션 빌드를 위한 Dockerfile 만들기 및 최적화하기
- 이미지 크기를 최소화하기 위한 멀티스테이지 빌드 사용하기
- 커스텀 Nginx 구성으로 애플리케이션을 효율적으로 서빙하기
- 모범 사례를 따라 안전하고 유지보수 가능한 Docker 이미지 만들기
샘플 애플리케이션 가져오기
이 가이드에서 사용할 샘플 애플리케이션을 클론해요. 터미널을 열고 작업할 디렉터리로 이동한 뒤 다음 명령으로 git 저장소를 클론해요.
$ git clone https://github.com/kristiyan-velkov/docker-vuejs-sample
Docker 이미지 만들기
Vue.js는 정적 자산으로 컴파일되는 프론트엔드 프레임워크예요. 그래서 Dockerfile은 Vue.js 애플리케이션이 만들어지고 프로덕션 환경에서 효율적으로 서빙되는 방식에 맞게 커스터마이즈돼요.
팁: Docker의 AI 어시스턴트인 Gordon이 프로젝트에 맞는 Docker 자산을 생성해줄 수 있어요. 애플리케이션에 맞는 Dockerfile, Compose 파일,
.dockerignore를 만들어 달라고 Gordon에게 요청해보세요.
Step 1: Dockerfile 만들기
Dockerfile을 만들기 전에 베이스 이미지를 선택해야 해요. Node.js 공식 이미지나 Hardened Image 카탈로그의 Docker Hardened Image(DHI)를 사용할 수 있어요. DHI를 선택하면 가볍고 안전한 프로덕션에 적합한 이미지를 얻을 수 있어요. 자세한 내용은 Docker Hardened Images를 참고해요.
중요: 이 가이드는 작성 시점에 안전하다고 간주되는 안정적인 Node.js LTS 이미지 태그를 사용해요. 새 릴리스와 보안 패치가 정기적으로 게시되므로, 이 가이드를 따라할 때는 여기 보이는 태그가 더 이상 가장 안전한 선택이 아닐 수 있어요. 빌드하거나 배포하기 전에 항상 최신 이미지 태그를 검토하고 안전하고 최신 버전을 선택하세요.
- 공식 Node.js Docker 이미지: https://hub.docker.com/_/node
- Docker Hardened Images 사용하기
Docker Hardened Image(DHI)는 Node.js용으로 Docker Hardened Images 카탈로그에서 제공돼요. DHI는 구독 없이 누구에게나 무료로 제공되며, DHI 레지스트리에 로그인하면 다른 Docker 이미지처럼 가져와(pull) 사용할 수 있어요. 자세한 내용은 DHI 빠른 시작 가이드를 참고해요.
DHI 레지스트리에 로그인해요.
$ docker login dhi.io
Node.js DHI를 가져와요(사용 가능한 버전은 카탈로그 확인).
$ docker pull dhi.io/node:24-alpine3.22-dev
Nginx DHI를 가져와요(사용 가능한 버전은 카탈로그 확인).
$ docker pull dhi.io/nginx:1.28.0-alpine3.21-dev
다음 Dockerfile에서 FROM 지시문은 베이스 이미지로 dhi.io/node:24-alpine3.22-dev와 dhi.io/nginx:1.28.0-alpine3.21-dev를 사용해요.
# =========================================
# Stage 1: Build the Vue.js 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 Vue.js 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 /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;"]
다음 내용으로 Dockerfile이라는 파일을 만들어요.
# =========================================
# Stage 1: Build the Vue.js 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 Vue.js 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 /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를 사용해요. 최종 이미지에서 비루트 사용자로 실행하면 공격 표면을 줄이고, 컨테이너 강화(container hardening)에 대한 Docker 권장 사항에 부합하며, 프로덕션 환경의 더 엄격한 보안 정책을 준수하는 데 도움이 돼요.
Step 2: compose.yaml 파일 만들기
다음 내용으로 compose.yaml이라는 파일을 만들어요.
services:
server:
build:
context: .
ports:
- "8080:8080"
Step 3: .dockerignore 파일 만들기
.dockerignore 파일은 빌드 컨텍스트에서 제외할 파일과 디렉터리를 지정해 Docker 이미지를 최적화하는 데 중요한 역할을 해요.
참고: 이렇게 하면 이미지 크기를 줄이고, 빌드 과정을 빠르게 하며, 민감하거나 불필요한 파일(예:
.env,.git,node_modules)이 최종 이미지에 추가되는 걸 막아줘요. 자세한 내용은 .dockerignore 레퍼런스를 참고해요.
다음 내용으로 .dockerignore라는 파일을 만들어요.
# -------------------------------
# Dependency directories
# -------------------------------
node_modules/
# -------------------------------
# Production and build outputs
# -------------------------------
dist/
out/
build/
public/build/
# -------------------------------
# Vite, VuePress, and cache dirs
# -------------------------------
.vite/
.vitepress/
.cache/
.tmp/
# -------------------------------
# Test output and coverage
# -------------------------------
coverage/
reports/
jest/
cypress/
cypress/screenshots/
cypress/videos/
# -------------------------------
# Environment and config files
# -------------------------------
*.env*
!.env.production # Keep production env if needed
*.local
*.log
# -------------------------------
# TypeScript artifacts
# -------------------------------
*.tsbuildinfo
# -------------------------------
# Editor and IDE config
# -------------------------------
.vscode/
.idea/
*.swp
# -------------------------------
# System files
# -------------------------------
.DS_Store
Thumbs.db
# -------------------------------
# Lockfiles (optional)
# -------------------------------
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# -------------------------------
# Git files
# -------------------------------
.git/
.gitignore
# -------------------------------
# Docker-related files
# -------------------------------
Dockerfile
.dockerignore
docker-compose.yml
docker-compose.override.yml
Step 4: nginx.conf 파일 만들기
컨테이너 안에서 Vue.js 애플리케이션을 효율적으로 서빙하기 위해 Nginx를 커스텀 설정으로 구성해요. 이 구성은 성능, 브라우저 캐싱, gzip 압축, 클라이언트 사이드 라우팅 지원에 최적화돼 있어요.
프로젝트 디렉터리 루트에 nginx.conf라는 파일을 만들고 다음 내용을 추가해요.
참고: Nginx 구성에 대해 더 알아보려면 공식 Nginx 문서를 참고해요.
worker_processes auto;
pid /tmp/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
charset utf-8;
access_log off;
error_log /dev/stderr warn;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
keepalive_requests 1000;
gzip on;
gzip_comp_level 6;
gzip_proxied any;
gzip_min_length 256;
gzip_vary on;
gzip_types
text/plain
text/css
application/json
application/javascript
text/xml
application/xml
application/xml+rss
text/javascript
image/svg+xml;
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|map)$ {
expires 1y;
access_log off;
add_header Cache-Control "public, immutable";
add_header X-Content-Type-Options nosniff;
}
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header X-Content-Type-Options nosniff;
}
error_page 404 /index.html;
}
}
Step 5: Vue.js 애플리케이션 이미지 만들기
커스텀 구성이 준비되면 Vue.js 애플리케이션용 Docker 이미지를 빌드할 준비가 됐어요. 업데이트된 설정은 다음을 포함해요.
- Vue.js에 맞춰진 깔끔하고 프로덕션에 적합한 Nginx 구성
- 작고 안전한 최종 이미지를 보장하는 효율적인 멀티스테이지 Docker 빌드
이전 단계를 마치면 프로젝트 디렉터리에 다음 파일들이 있어야 해요.
├── docker-vuejs-sample/
│ ├── Dockerfile
│ ├── .dockerignore
│ ├── compose.yaml
│ └── nginx.conf
이제 Dockerfile이 구성됐으니 Vue.js 애플리케이션의 Docker 이미지를 빌드할 수 있어요.
참고:
docker build명령은 Dockerfile의 지시문을 사용해 애플리케이션을 이미지로 패키징해요. 현재 디렉터리(빌드 컨텍스트)의 필요한 모든 파일을 포함해요.
프로젝트 루트에서 다음 명령을 실행해요.
$ docker build --tag docker-vuejs-sample .
이 명령이 하는 일:
- 현재 디렉터리(.)의 Dockerfile을 사용해요.
- 애플리케이션과 의존성을 Docker 이미지로 패키징해요.
- 나중에 참조할 수 있도록 이미지에
docker-vuejs-sample태그를 붙여요.
Step 6: 로컬 이미지 확인하기
Docker 이미지를 빌드한 후 Docker CLI나 Docker Desktop으로 로컬 머신에서 사용 가능한 이미지를 확인할 수 있어요. 터미널에서 작업 중이므로 Docker CLI를 사용해볼게요.
로컬에서 사용 가능한 모든 Docker 이미지를 나열하려면 다음 명령을 실행해요.
$ docker images
예시 출력:
REPOSITORY TAG IMAGE ID CREATED SIZE
docker-vuejs-sample latest 8c9c199179d4 14 seconds ago 76.2MB
이 출력은 이미지에 대한 핵심 정보를 제공해요.
- Repository – 이미지에 할당된 이름
- Tag – 다른 빌드를 식별하는 버전 라벨(예:
latest) - Image ID – 이미지의 고유 식별자
- Created – 이미지가 빌드된 시각을 나타내는 타임스탬프
- Size – 이미지가 사용하는 총 디스크 공간
빌드가 성공했다면 docker-vuejs-sample 이미지가 목록에 있어야 해요.
컨테이너화된 애플리케이션 실행하기
이전 단계에서 Vue.js 애플리케이션용 Dockerfile을 만들고 docker build 명령으로 Docker 이미지를 빌드했어요. 이제 그 이미지를 컨테이너에서 실행해 애플리케이션이 예상대로 동작하는지 확인할 차례예요.
docker-vuejs-sample 디렉터리 안에서 터미널에 다음 명령을 실행해요.
$ docker compose up --build
브라우저를 열고 http://localhost:8080 에서 애플리케이션을 확인해요. 간단한 Vue.js 웹 애플리케이션이 보여야 해요. 터미널에서 ctrl+c를 눌러 애플리케이션을 중지해요.
백그라운드에서 애플리케이션 실행하기
-d 옵션을 추가하면 터미널에서 분리된 상태로 애플리케이션을 실행할 수 있어요. docker-vuejs-sample 디렉터리 안에서 다음 명령을 실행해요.
$ docker compose up --build -d
브라우저를 열고 http://localhost:8080 에서 확인해요. 브라우저에서 실행 중인 Vue.js 애플리케이션이 보여야 해요.
컨테이너가 실행 중인지 확인하려면 docker ps 명령을 사용해요.
$ docker ps
이 명령은 포트, 이름, 상태와 함께 모든 활성 컨테이너를 나열해요. 포트 8080을 노출하는 컨테이너를 찾아보세요.
예시 출력:
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
37a1fa85e4b0 docker-vuejs-sample-server "nginx -c /etc/nginx…" About a minute ago Up About a minute 0.0.0.0:8080->8080/tcp docker-vuejs-sample-server-1
애플리케이션을 중지하려면 다음을 실행해요.
$ docker compose down
참고: Compose 명령에 대한 자세한 내용은 Compose CLI 레퍼런스를 참고해요.
Vue.js 개발에 컨테이너 사용하기
사전 준비
Vue.js 애플리케이션 컨테이너화를 완료해요.
개요
이 섹션에서는 Docker Compose로 Vue.js 애플리케이션의 프로덕션 환경과 개발 환경을 모두 설정해요. 이 접근은 워크플로를 간소화해요. 프로덕션에서는 Nginx로 가벼운 정적 사이트를 제공하고, 개발에서는 Compose Watch로 빠르고 실시간 리로드되는 개발 서버를 제공해요.
배우게 될 내용:
- 격리된 환경 구성하기: 프로덕션과 개발 사용 사례에 최적화된 별도 컨테이너 설정하기
- 개발에서 실시간 리로드: Compose Watch로 파일 변경을 자동 동기화해 수동 개입 없이 실시간 업데이트하기
- 쉽게 미리보기와 디버그: 매 변경 후 재빌드 없이 컨테이너 안에서 개발하며 매끄러운 미리보기·디버그 경험 제공하기
서비스 자동 업데이트 (개발 모드)
Compose Watch를 활용해 로컬 머신과 컨테이너화된 Vue.js 개발 환경 사이에 실시간 파일 동기화를 활성화해요. 이 강력한 기능은 컨테이너를 수동으로 재빌드하거나 재시작할 필요를 없애주며, 빠르고 매끄러우며 효율적인 개발 워크플로를 제공해요. Compose Watch를 쓰면 코드 업데이트가 컨테이너 안에 즉시 반영되어 빠른 테스트, 디버그, 변경 실시간 미리보기에 완벽해요.
Step 1: 개발용 Dockerfile 만들기
프로젝트 루트에 Dockerfile.dev라는 이름의 파일을 다음 내용으로 만들어요.
# =========================================
# Stage 1: Develop the Vue.js Application
# =========================================
ARG NODE_VERSION=24.12.0-alpine
# Use a lightweight Node.js 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 package-related files first to leverage Docker's caching mechanism
COPY package.json package-lock.json* ./
# Install project dependencies
RUN --mount=type=cache,target=/root/.npm npm install
# Copy the rest of the application source code into the container
COPY . .
# Change ownership of the application directory to the node user
RUN chown -R node:node /app
# Switch to the node user
USER node
# Expose the port used by the Vite development server
EXPOSE 5173
# Use a default command, can be overridden in Docker compose.yml file
CMD ["npm", "run", "dev", "--", "--host"]
이 파일은 개발 서버를 사용하는 Vue.js 애플리케이션의 가벼운 개발 환경을 설정해요.
Step 2: compose.yaml 파일 업데이트하기
compose.yaml 파일을 열어 두 개의 서비스를 정의해요. 하나는 프로덕션(vuejs-prod), 하나는 개발(vuejs-dev)용이에요. Vue.js 애플리케이션의 예시 구성은 다음과 같아요.
services:
vuejs-prod:
build:
context: .
dockerfile: Dockerfile
image: docker-vuejs-sample
ports:
- "8080:8080"
vuejs-dev:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "5173:5173"
develop:
watch:
- path: ./src
target: /app/src
action: sync
- path: ./package.json
target: /app/package.json
action: restart
- path: ./vite.config.js
target: /app/vite.config.js
action: restart
vuejs-prod 서비스는 Nginx로 정적 프로덕션 앱을 빌드하고 제공해요. vuejs-dev 서비스는 실시간 리로드와 핫 모듈 교체(HMR)로 Vue.js 개발 서버를 실행해요. watch는 Compose Watch로 파일 동기화를 트리거해요.
참고: 자세한 내용은 공식 가이드 "Use Compose Watch"를 참고해요.
이전 단계를 마치면 프로젝트 디렉터리에 다음 파일들이 있어야 해요.
├── docker-vuejs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ └── nginx.conf
Step 4: Compose Watch 시작하기
프로젝트 루트에서 다음 명령을 실행해 컨테이너를 watch 모드로 시작해요.
$ docker compose watch vuejs-dev
Step 5: Compose Watch를 Vue.js로 테스트하기
Compose Watch가 제대로 동작하는지 확인하려면:
- 텍스트 편집기에서
src/App.vue파일을 열어요. - 다음 줄을 찾아요.
<HelloWorld msg="You did it!" />
다음으로 바꿔요.
<HelloWorld msg="Hello from Docker Compose Watch" />
- 파일을 저장해요.
- 브라우저에서 http://localhost:5173 을 열어요.
- 컨테이너를 수동으로 재빌드하지 않아도 업데이트된 텍스트가 즉시 보여야 해요. 이는 파일 감시와 자동 동기화가 예상대로 동작하고 있음을 확인해줘요.
Vue.js 테스트를 컨테이너에서 실행하기
사전 준비
"Vue.js 애플리케이션 컨테이너화"부터 이 가이드의 이전 모든 섹션을 완료해요.
개요
테스트는 개발 과정의 중요한 부분이에요. 이 섹션에서 배우게 될 내용:
- Docker 컨테이너 안에서 Vitest로 유닛 테스트 실행하기
- Docker Compose를 사용해 격리되고 재현 가능한 환경에서 테스트 실행하기
Vite용으로 설계된 엄청나게 빠른 테스트 러너인 Vitest를 @vue/test-utils와 함께 사용해 컴포넌트 로직, props, 이벤트, 반응형 동작을 검증하는 유닛 테스트를 작성해요. 이 설정으로 Vue.js 컴포넌트가 사용자가 실제로 상호작용하는 환경을 그대로 반영한 환경에서 테스트되도록 보장해요.
개발 중 테스트 실행하기
docker-vuejs-sample 애플리케이션에는 다음 위치에 샘플 테스트 파일이 있어요.
$ src/components/__tests__/HelloWorld.spec.ts
이 테스트는 Vitest와 Vue Test Utils를 사용해 HelloWorld 컴포넌트의 동작을 검증해요.
Step 1: compose.yaml 업데이트하기
compose.yaml 파일에 vuejs-test라는 새 서비스를 추가해요. 이 서비스는 테스트 스위트를 격리된 컨테이너화된 환경에서 실행할 수 있게 해줘요.
services:
vuejs-prod:
build:
context: .
dockerfile: Dockerfile
image: docker-vuejs-sample
ports:
- "8080:8080"
vuejs-dev:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "5173:5173"
develop:
watch:
- action: sync
path: .
target: /app
vuejs-test:
build:
context: .
dockerfile: Dockerfile.dev
command: ["npm", "run", "test:unit"]
vuejs-test 서비스는 개발에 사용한 것과 같은 Dockerfile.dev를 재사용하고, 기본 명령을 덮어써 npm run test로 테스트를 실행해요. 이 설정은 로컬 개발 구성과 일치하는 일관된 테스트 환경을 보장해요.
이전 단계를 마치면 프로젝트 디렉터리에 다음 파일들이 있어야 해요.
├── docker-vuejs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ └── nginx.conf
Step 2: 테스트 실행하기
프로젝트 루트에서 다음 명령을 실행해 컨테이너 안에서 테스트 스위트를 실행해요.
$ docker compose run --rm vuejs-test
이 명령은:
compose.yaml에 정의된vuejs-test서비스를 시작해요.- 개발과 같은 환경을 사용해
npm run test스크립트를 실행해요. docker compose run --rm명령으로 테스트 완료 후 컨테이너를 자동으로 제거해요.
다음과 비슷한 출력이 보여야 해요.
Test Files: 1 passed (1)
Tests: 1 passed (1)
Start at: 16:50:55
Duration: 718ms
참고: Compose 명령에 대한 자세한 내용은 Compose CLI 레퍼런스를 참고해요.
요약 (Summary)
이 섹션에서 Vitest와 Docker Compose로 Vue.js 애플리케이션의 유닛 테스트를 Docker 컨테이너 안에서 실행하는 방법을 배웠어요. 완료한 것:
- 테스트 실행을 격리하기 위해
compose.yaml에vuejs-test서비스 만들기 - 개발과 테스트 환경 사이의 일관성을 보장하기 위해 개발용
Dockerfile.dev재사용하기 docker compose run --rm vuejs-test로 컨테이너 안에서 테스트 실행하기- 로컬 머신 설정에 의존하지 않고 환경 전반에서 안정적이고 반복 가능한 테스트 보장하기
관련 자료 (Related resources)
Docker 테스트 워크플로를 더 잘 다듬으려면 공식 레퍼런스와 모범 사례를 확인해요.
- Dockerfile 레퍼런스 – 모든 Dockerfile 지시문과 문법 이해하기
- Dockerfile 작성 모범 사례 – 효율적이고 유지보수 가능하며 안전한 Dockerfile 작성하기
- Compose 파일 레퍼런스 –
compose.yaml에서 서비스를 구성할 수 있는 전체 문법과 옵션 - docker compose run CLI 레퍼런스 – 서비스 컨테이너에서 일회성 명령 실행하기