[Vue.js] Docker 배포 가이드

Vue3 (TypeScript 기반) 프로젝트를 Docker로 배포하는 방법을 간단히 정리했습니다. 이 가이드를 따라 하면 쉽게 Vue 애플리케이션을 Docker 기반으로 배포할 수 있습니다.

 

1. 프로젝트 구조

project-root/
├── src/                    # Vue 소스 파일 (컴포넌트, 페이지 등)
│   ├── assets/             # 정적 파일 (이미지, 폰트 등)
│   ├── components/         # Vue 컴포넌트
│   ├── views/              # Vue 페이지
│   └── main.ts             # Vue 진입 파일
│
├── public/                 # 정적 파일 (index.html 포함)
│   └── index.html          # Vue SPA의 진입점
│
├── dist/                   # 빌드 결과물 (npm run build 실행 후 생성)
│
├── nginx.conf              # NGINX 설정 파일
│
├── Dockerfile              # Docker 빌드 및 실행 설정 파일
│
├── package.json            # Node.js 의존성 및 스크립트
│
├── tsconfig.json           # TypeScript 설정 파일
│
├── vite.config.ts          # Vite 설정 파일
│
└── node_modules/           # npm 의존성 (npm install 실행 후 생성)

 

2. package.json 수정

"scripts": {
    "dev": "vite --mode development",
    "opr": "vite --mode production",
    "build": "vite build --mode development",
    "preview": "vite preview"
  },

• build 스크립트에 mode 를 추가합니다.
• development 는 개발, production 은 운영모드입니다.

 

3. Vite 설정(vite.config.ts)

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // src 디렉토리의 별칭
    },
  },
  server: {
    host: '0.0.0.0',
    port: 21000, // 서버 포트
  },
  build: {
    outDir: 'dist', // 빌드 결과물 디렉토리
    sourcemap: true, // 소스맵 활성화
    rollupOptions: {
      external: ['@apollo/client'], // Apollo를 외부 모듈로 처리
    },
  },
});

 

4. nginx.conf 작성

server {
    listen 8080;

    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;
}

• Docker 컨테이너에서 사용할 NGINX 설정 파일을 작성합니다. 이 파일은 정적 파일을 제공하고, SPA 라우팅을 지원합니다.

 

5. 빌드 실행

npm run build

• 로컬 환경에서 Vue 프로젝트를 빌드하여 점검합니다.

 

6. Dockerfile 작성

# 1. Node.js 이미지를 기반으로 Vue 애플리케이션 빌드
FROM node:20-alpine AS build-stage
WORKDIR /app

# package.json과 package-lock.json 복사
COPY package*.json ./

# 의존성 설치
RUN npm install

# 애플리케이션 소스 복사 및 빌드
COPY . .
RUN npm run build

# 2. NGINX 이미지를 기반으로 정적 파일 제공
FROM nginx:1.21-alpine AS production-stage

# NGINX 설정 파일 복사
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 빌드된 정적 파일 복사
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 컨테이너 내부에서 사용할 포트 설정
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

• 호스트의 nginx 와 구분하기 위해 기본포트를 8080 을 사용하였습니다.

 

7. 이미지 빌드

docker build -t vue-vite-app .

• Docker 이미지를 빌드합니다. 현재 예제에선 "vue-vite-app" 이라는 이미지로 빌드하였습니다. 상황에 맞게 작성하시면 됩니다.

 

8. 컨테이너 실행

docker run -d -p 21000:8080 --name vue-vite-container vue-vite-app

• Docker 컨테이너를 실행합니다.

 

9. 실행확인

• Docker Desktop 또는 http://localhost:8080 으로 실행 확인 합니다.

 

감사합니다.