sub-web Nginx部署配置终极指南生产环境最佳实践sub-web是一个基于Vue.js 2.6和subconverter后端的订阅配置自动生成Web界面为代理用户提供简洁美观的前端配置工具。本指南将详细介绍如何使用Nginx在生产环境中部署sub-web确保您的服务稳定、安全且高效运行。无论您是个人用户还是企业部署这篇完整的Nginx配置指南都将帮助您快速搭建专业的订阅配置平台。 为什么选择Nginx部署sub-webNginx作为高性能的Web服务器和反向代理为sub-web提供了以下优势高性能处理Nginx采用事件驱动架构能够高效处理大量并发连接静态文件服务直接提供Vue构建的静态文件减少后端压力SSL/TLS支持轻松配置HTTPS加密传输缓存优化通过配置缓存策略提升用户体验负载均衡未来扩展时可轻松添加负载均衡功能 部署前准备工作1. 获取sub-web项目代码首先克隆项目到您的服务器git clone https://gitcode.com/gh_mirrors/su/sub-web.git cd sub-web2. 安装项目依赖# 安装Node.js依赖 yarn install # 构建生产版本 yarn build构建完成后您将在dist目录中找到所有生产文件。3. 安装Nginx在Ubuntu/Debian系统上sudo apt update sudo apt install nginx在CentOS/RHEL系统上sudo yum install epel-release sudo yum install nginx 完整的Nginx配置指南基础HTTP配置创建Nginx配置文件/etc/nginx/sites-available/sub-web或/etc/nginx/conf.d/sub-web.confserver { listen 80; server_name your-domain.com www.your-domain.com; # 设置根目录为sub-web构建目录 root /var/www/sub-web/dist; index index.html index.htm; # SPA路由支持 - Vue Router需要此配置 location / { try_files $uri $uri/ /index.html; } # 启用Gzip压缩 gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 6; gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml text/xml; gzip_vary on; # 静态资源缓存配置 location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { access_log off; add_header Cache-Control public, max-age31536000; add_header Vary Accept-Encoding; } # API代理配置如果需要连接后端服务 location /api/ { proxy_pass http://backend-service:25500/; proxy_set_header Host $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; } # 错误页面配置 error_page 404 /index.html; error_page 500 502 503 504 /50x.html; location /50x.html { root /usr/share/nginx/html; } }高级HTTPS配置推荐使用Lets Encrypt获取SSL证书后配置HTTPSserver { listen 443 ssl http2; server_name your-domain.com www.your-domain.com; # SSL证书配置 ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem; # SSL安全配置 ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384; ssl_prefer_server_ciphers off; ssl_session_cache shared:SSL:10m; ssl_session_timeout 10m; # HSTS安全头 add_header Strict-Transport-Security max-age31536000; includeSubDomains always; root /var/www/sub-web/dist; index index.html index.htm; # SPA路由支持 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { access_log off; add_header Cache-Control public, max-age31536000; add_header Vary Accept-Encoding; } # 启用Gzip压缩 gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 6; gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml text/xml; gzip_vary on; } # HTTP重定向到HTTPS server { listen 80; server_name your-domain.com www.your-domain.com; return 301 https://$server_name$request_uri; }️ 性能优化配置1. 连接优化# 在http块中添加 http { # 连接超时设置 keepalive_timeout 65; keepalive_requests 100; # 发送文件优化 sendfile on; tcp_nopush on; tcp_nodelay on; # 客户端请求限制 client_max_body_size 10m; client_body_timeout 12; client_header_timeout 12; # 缓冲区设置 client_body_buffer_size 10K; client_header_buffer_size 1k; large_client_header_buffers 4 8k; }2. 缓存策略优化# 在server块中添加 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public, immutable; access_log off; } # Vue构建文件的缓存策略 location ~* \.(html)$ { expires 1h; add_header Cache-Control public, must-revalidate; } 安全加固配置1. 安全头部配置# 在server块中添加 add_header X-Frame-Options SAMEORIGIN always; add_header X-Content-Type-Options nosniff always; add_header X-XSS-Protection 1; modeblock always; add_header Referrer-Policy strict-origin-when-cross-origin always; add_header Content-Security-Policy default-src self; script-src self unsafe-inline unsafe-eval; style-src self unsafe-inline; img-src self data: https:; always;2. 防止信息泄露# 隐藏Nginx版本信息 server_tokens off; # 限制HTTP方法 if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 405; } # 阻止常见攻击 location ~* \.(php|asp|aspx|jsp|pl)$ { deny all; } Docker与Nginx集成部署如果您使用Docker部署sub-web可以创建以下Docker Compose配置version: 3.8 services: nginx: image: nginx:alpine container_name: sub-web-nginx ports: - 80:80 - 443:443 volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./dist:/usr/share/nginx/html:ro - ./ssl:/etc/nginx/ssl:ro restart: unless-stopped networks: - sub-web-network sub-web: build: . container_name: sub-web-app volumes: - ./dist:/app/dist restart: unless-stopped networks: - sub-web-network networks: sub-web-network: driver: bridge 监控与日志配置1. 访问日志配置# 在http块中配置日志格式 log_format main $remote_addr - $remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for; # 在server块中启用日志 access_log /var/log/nginx/sub-web-access.log main; error_log /var/log/nginx/sub-web-error.log warn;2. 状态监控启用Nginx状态页面location /nginx_status { stub_status on; access_log off; allow 127.0.0.1; deny all; } 常见问题解决1. 404路由问题如果Vue Router路由返回404确保已配置SPA支持location / { try_files $uri $uri/ /index.html; }2. 静态资源加载失败检查静态资源路径是否正确并确保权限设置sudo chown -R www-data:www-data /var/www/sub-web/dist sudo chmod -R 755 /var/www/sub-web/dist3. Gzip压缩不生效验证Gzip配置并检查响应头curl -I -H Accept-Encoding: gzip http://your-domain.com 性能测试与优化1. 使用ab进行压力测试ab -n 1000 -c 100 https://your-domain.com/2. 使用siege进行并发测试siege -c 100 -t 60s https://your-domain.com/ 自动化部署脚本创建部署脚本deploy.sh#!/bin/bash # 更新代码 cd /var/www/sub-web git pull origin main # 安装依赖 yarn install # 构建生产版本 yarn build # 复制文件到Nginx目录 sudo cp -r dist/* /var/www/html/sub-web/ # 重启Nginx sudo systemctl restart nginx echo 部署完成 总结通过本指南您已经掌握了sub-web的Nginx生产环境部署配置。关键要点包括基础配置正确设置SPA路由和静态文件服务安全加固配置HTTPS、安全头部和访问控制性能优化启用Gzip压缩、缓存策略和连接优化监控维护配置日志和状态监控遵循这些最佳实践您的sub-web部署将具备高性能、高安全性和易维护性。记得定期更新Nginx和SSL证书监控服务器性能确保服务持续稳定运行。现在您的sub-web订阅配置平台已经准备好为大量用户提供服务了创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考