diff --git a/Dockerfile b/Dockerfile index f938f73..1bb21b8 100644 --- a/Dockerfile +++ b/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 diff --git a/README.md b/README.md index dd0d03d..b2dd5b2 100644 --- a/README.md +++ b/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 diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..63ddd8e --- /dev/null +++ b/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"; + } +} \ No newline at end of file