Docker 部署 Web

server {
    listen 3000;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # Gzip 压缩配置
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;

    # 安全头设置
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
    add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 处理 SPA 路由 - 所有非静态文件请求都返回 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 健康检查端点
    location /health {
        access_log off;
        return 200 "healthy\n";
        add_header Content-Type text/plain;
    }

    # 禁止访问隐藏文件
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }

    # 错误页面配置
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

# 可选的 HTTP 重定向到 HTTPS (如果需要)
# server {
#     listen 80;
#     server_name your-domain.com;
#     return 301 https://$server_name$request_uri;
# }

FROM node:16-alpine AS builder

WORKDIR /web
COPY . /web

# 分离环境
RUN cd /web
# 添加国内源加速下载
RUN npm config set registry https://registry.npmmirror.com
# 本项目使用 pnpm 管理包, 根据你的实际来修改
RUN npm install pnpm -g
# 验证 pnpm安装与否
RUN pnpm -v
# 删除 npm 下载的包,由 pnpm 接管
RUN rm -f node_modules
# 安装依赖
ENV CI=true
ENV NODE_ENV=production
RUN corepack enable && corepack prepare pnpm@latest --activate
RUN pnpm install --frozen-lockfile
RUN build
# RUN pnpm install --no-frozen-lockfile 不根据package.lock的包来下载

# 处理下载出错
RUN RET=$? if [[ RET -ne 0 ]]; then tail -n 100 $HOME/.npm/_logs/*.log; exit $RST; fi;

# 打包
RUN pnpm build

# 使用nginx代理 web 项目的映射
FROM nginx:latest

# 把上一步骤打包好的的 dist目录传递到 nginx 默认的 html 目录作为映射
COPY --from=builder /web/dist/ /usr/share/nginx/html/

# 挂载 Nginx 的必要文件,
# /etc/nginx/ssl/是 SSL 配置,不需要删掉即可
# /var/log/nginx/ 是 nginx 日志,不需要删掉即可
# /var/cache/nginx/是 nginx 缓存, 不需要删掉即可
# /etc/nginx/conf/ 是 nginx 的配置文件, 必须保留
# /usr/share/nginx/html/是 nginx 的 html 目录, 必须保留
VOLUME ["/var/cache/nginx/", "/etc/nginx/ssl/", "/etc/nginx/conf/", "/etc/nginx/conf/nginx.conf", "/var/log/nginx/", "/usr/share/nginx/html/"]

# 映射的端口
EXPOSE 80
EXPOSE 443

# 运行 nginx 服务
CMD ["nginx", "-g", "daemon off;"]

services:
  nginx:
    image: web  # 这里需要替换成你的镜像名
    ports:
      - "80:80"
      - "443:443"
    restart: unless-stopped
    volumes:
      - /home/nginx/cache:/var/cache/nginx
      - /home/nginx/ssl:/etc/nginx/ssl
      - /home/nginx/conf:/etc/nginx/conf
      - /home/nginx/log:/var/log/nginx
    container_name: nginx