修改Docker部署

Dockerfile

@@ -1,17 +1,17 @@
 
 # 构建阶段
-FROM node:18-alpine as builder
+FROM node:20-alpine as builder
 
 # 设置工作目录
 WORKDIR /app
 
-# 复制 package.json 和 package-lock.json
-COPY package*.json ./
+# 首先只复制依赖相关文件
+COPY package.json package-lock.json* ./
 
 # 安装依赖
-RUN npm install
+RUN npm ci --quiet
 
-# 复制源代码
+# 然后复制其余源代码
 COPY . .
 
 # 构建项目
@@ -23,6 +23,9 @@ FROM nginx:alpine
 # 复制构建产物到 Nginx 目录
 COPY --from=builder /app/dist /usr/share/nginx/html
 
+# 添加自定义 nginx 配置以支持 SPA 路由
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
 # 暴露 80 端口
 EXPOSE 80
 

README.md

@@ -84,12 +84,16 @@ After the program is deployed, Vercel will provide an accessible domain name. Th
 
 ## Docker 部署 | Docker Deployment
 
+你可以使用 Docker 快速部署此应用：
+
+You can quickly deploy this application using Docker:
+
 ```bash
-# build image 构建镜像
+# 构建镜像 | Build image
 docker build -t dick-helper .
 
-# run container 运行容器
-docker run -p 80:80 dick-helper
+# 运行容器 | Run container
+docker run -d -p 80:80 --name dick-helper dick-helper
 ```
 
 ## 技术栈 | Tech Stack

nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # 支持单页应用路由
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 缓存静态资源
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 30d;
+        add_header Cache-Control "public, no-transform";
+    }
+}