build(docker): Update to refactor Dockerfile for multi-stage build and add nginx configuration

Author: Aya-X

Dockerfile

@@ -1,26 +1,25 @@
-FROM node:20-alpine AS dependencies-env
+# 建置階段
+FROM node:20-alpine AS build
 RUN npm i -g pnpm
-COPY . /app
-
-FROM dependencies-env AS development-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
 WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
 RUN pnpm i --frozen-lockfile
-
-FROM dependencies-env AS production-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-WORKDIR /app
-RUN pnpm i --prod --frozen-lockfile
-
-FROM dependencies-env AS build-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
+COPY . .
+# 設定建置時的環境變數
+ARG VITE_APP_API_URL
+ARG VITE_APP_API_PATH
+ENV VITE_APP_API_URL=${VITE_APP_API_URL}
+ENV VITE_APP_API_PATH=${VITE_APP_API_PATH}
 RUN pnpm build
 
-FROM dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["pnpm", "start"]
+# 運行階段
+FROM nginx:alpine
+# 複製檔案
+COPY --from=build /app/build/client /usr/share/nginx/html/
+# 複製 nginx 配置模板
+COPY nginx.conf /etc/nginx/templates/default.conf.template
+# 設定運行時的環境變數
+ENV VITE_APP_API_URL=${VITE_APP_API_URL}
+ENV VITE_APP_API_PATH=${VITE_APP_API_PATH}
+# 使用 envsubst 來替換環境變數
+CMD ["/bin/sh", "-c", "envsubst '${VITE_APP_API_URL} ${VITE_APP_API_PATH}' < /etc/nginx/templates/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]

Dockerfile.pnpm

@@ -0,0 +1,23 @@
+FROM node:20-alpine AS dependencies-env
+RUN npm i -g pnpm
+COPY . /app
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --frozen-lockfile
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --prod --frozen-lockfile
+FROM dependencies-env AS build-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN pnpm build
+
+FROM dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["pnpm", "start"]

nginx.conf

@@ -0,0 +1,45 @@
+server {
+    listen 8080;
+    include /etc/nginx/mime.types;
+    
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # API Proxy 設定
+    location /v2/ {
+        proxy_pass ${VITE_APP_API_URL};
+        
+        # SSL 設定
+        proxy_ssl_server_name on;
+        proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
+        
+        # 基本代理設定
+        proxy_http_version 1.1;
+        proxy_set_header Host $proxy_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        
+        # API 路徑重寫
+        rewrite ^/v2/api/${VITE_APP_API_PATH}/(.*) /api/${VITE_APP_API_PATH}/$1 break;
+    }
+
+    # 其他路由設定保持不變
+    location /react-main-2024-w2 {
+        alias /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+        
+        location ~ \.js$ {
+            add_header Content-Type "application/javascript";
+        }
+    }
+
+    location /react-main-2024-w2/assets/ {
+        alias /usr/share/nginx/html/assets/;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+    }
+
+    location = / {
+        return 301 /react-main-2024-w2/;
+    }
+}