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

Author: Aya-X

Dockerfile

@@ -1,26 +1,23 @@
-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
-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
+# 安裝依賴
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm i --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 . .
 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 來服務靜態檔案
+FROM nginx:alpine
+# 複製 nginx 配置
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+# 複製建置檔案到 nginx 的服務目錄
+COPY --from=build /app/build/client /usr/share/nginx/html
+
+# nginx 預設會在 80 port 啟動
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen 80;
+    
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+        index index.html;
+    }
+}