Dockerfile은 Node.js 환경에서 빌드 후 Nginx로 정적 파일을 제공하며, 앞서 설정한 nginx.conf를 사용합니다.

vite.config.ts의 base: '/serial/' 설정에 맞춰 빌드된 파일을 /usr/share/nginx/html/serial 디렉토리로 복사합니다.
  EXPOSE 80으로 80 포트를 개방합니다.
✦ Dockerfile과 nginx.conf 생성이 완료되었습니다. 이제 변경 사항을 커밋하고 푸시하겠습니다.
  (참고: vite.config.ts 변경 사항도 함께 포함합니다.)

Dockerfile

@@ -0,0 +1,27 @@
+# Build stage
+FROM node:20-alpine as build
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy source code and build
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Remove default nginx static assets
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy built artifacts to /serial subdirectory to match base path
+COPY --from=build /app/dist /usr/share/nginx/html/serial
+
+# Copy custom nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location /serial/ {
+        alias /usr/share/nginx/html/serial/;
+        try_files $uri $uri/ /serial/index.html;
+    }
+
+    # Health check endpoint (optional but good for deployments)
+    location /health {
+        access_log off;
+        add_header 'Content-Type' 'text/plain';
+        return 200 "healthy\n";
+    }
+}
+

vite.config.ts

@@ -5,6 +5,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, '.', '');
     return {
+      base: '/serial/',
       server: {
         port: 3000,
         host: '0.0.0.0',