1. 项目概述作为一名长期在Linux环境下工作的开发者我经常需要在Ubuntu服务器上配置Nginx来部署前端项目。Nginx作为一款高性能的Web服务器和反向代理服务器因其轻量级、高并发处理能力而广受欢迎。今天我将分享一个完整的Nginx配置流程从安装到部署Vue项目的全过程。这个配置方案特别适合需要快速搭建本地开发环境或生产环境的开发者。相比ApacheNginx的内存占用更小配置更简洁特别适合资源有限的服务器环境。我将在Ubuntu 20.04 LTS系统上演示但步骤同样适用于其他主流Linux发行版。2. 环境准备与Nginx安装2.1 系统更新与依赖检查在开始安装前我们需要确保系统是最新的。打开终端执行以下命令更新软件包列表sudo apt update sudo apt upgrade -y这个步骤很重要因为过时的软件包可能会导致依赖冲突或安全漏洞。我建议在每次安装新软件前都执行这个操作这已经成为我的工作习惯。2.2 Nginx安装验证与安装检查系统是否已经安装了Nginxnginx -v如果看到版本号输出如nginx version: nginx/1.18.0说明已经安装。如果没有安装会提示command not found。这时我们需要执行安装命令sudo apt install nginx -y注意使用-y参数会自动确认安装避免交互式确认。但在生产环境中我建议去掉这个参数仔细查看将要安装的软件包。安装完成后再次验证版本nginx -v3. Nginx服务管理3.1 基本服务控制Nginx安装后会自动启动但我们需要掌握如何手动控制它# 启动Nginx服务 sudo systemctl start nginx # 设置开机自启 sudo systemctl enable nginx # 查看运行状态 sudo systemctl status nginx # 重新加载配置不中断服务 sudo systemctl reload nginx # 完全重启服务 sudo systemctl restart nginx # 停止服务 sudo systemctl stop nginx当执行status命令时如果看到active (running)字样表示服务正常运行。绿色高亮的active状态是我们最希望看到的。3.2 服务状态解读systemctl status nginx的输出包含丰富信息● nginx.service - A high performance web server and a reverse proxy server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: active (running) since Tue 2023-05-16 14:28:43 UTC; 5min ago Docs: man:nginx(8) Process: 1234 ExecStart/usr/sbin/nginx -g daemon on; master_process on; (codeexited, status0/SUCCESS) Main PID: 1235 (nginx) Tasks: 2 (limit: 1137) Memory: 4.3M CGroup: /system.slice/nginx.service ├─1235 nginx: master process /usr/sbin/nginx -g daemon on; master_process on; └─1236 nginx: worker process关键信息解读Loaded行显示服务是否开机自启enabledActive行显示当前运行状态和运行时间Main PID显示主进程ID底部显示工作进程信息4. 项目部署准备4.1 创建项目目录我们需要为项目创建专门的目录通常放在/var/www/下sudo mkdir -p /var/www/test-p参数确保父目录不存在时会自动创建。我习惯用项目名作为目录名方便管理多个项目。4.2 文件传输与权限设置将开发好的Vue项目通常是dist目录内容复制到目标目录sudo cp -r /path/to/your/project/dist/* /var/www/test/然后设置正确的所有权和权限sudo chown -R www-data:www-data /var/www/test sudo chmod -R 755 /var/www/test重要提示www-data是Nginx默认的运行用户设置正确的用户和组权限对安全性至关重要。我曾经因为权限问题花了半天时间排查403错误。5. Nginx站点配置5.1 配置文件创建Nginx的站点配置文件通常放在/etc/nginx/sites-available/目录下。我们创建一个新的配置文件sudo vim /etc/nginx/sites-available/test-project如果你不熟悉vim可以使用nano或其他你喜欢的编辑器。5.2 配置内容详解以下是针对Vue项目的典型配置server { listen 9094 default_server; listen [::]:9094 default_server; server_name _; root /var/www/test; index index.html; location / { try_files $uri $uri/ /index.html; } # 其他优化配置 sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; # 静态文件缓存 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 30d; add_header Cache-Control public, no-transform; } }配置解析listen 9094指定监听端口default_server将此设为默认服务器root项目根目录try_filesVue路由需要这个配置静态文件缓存可以显著提升性能5.3 配置启用与测试创建符号链接启用配置sudo ln -s /etc/nginx/sites-available/test-project /etc/nginx/sites-enabled/测试配置语法sudo nginx -t如果看到test is successful字样说明配置正确。然后重新加载Nginxsudo systemctl reload nginx6. 防火墙与访问测试6.1 防火墙配置如果启用了UFW防火墙需要放行我们的端口sudo ufw allow 9094/tcp sudo ufw enable sudo ufw status6.2 访问测试现在可以在浏览器访问http://服务器IP:9094查看项目。如果是在本地服务器可以直接用curl http://localhost:90947. 常见问题排查7.1 403 Forbidden错误这是最常见的权限问题检查目录权限是否正确Nginx用户是否有访问权限SELinux是否阻止访问如果是CentOS7.2 502 Bad Gateway通常是因为后端服务没有运行或配置错误。检查后端服务是否启动代理配置是否正确端口是否冲突7.3 404 Not Found检查文件路径是否正确文件权限是否足够index文件是否存在8. 性能优化建议8.1 启用Gzip压缩在/etc/nginx/nginx.conf中添加gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss text/javascript; gzip_min_length 1000; gzip_comp_level 6;8.2 调整工作进程根据CPU核心数调整worker_processes auto; events { worker_connections 1024; }8.3 静态资源缓存如前面配置所示为静态文件设置长期缓存可以显著提升性能。9. 日志查看与分析Nginx日志位于/var/log/nginx/目录access.log访问日志error.log错误日志查看实时日志sudo tail -f /var/log/nginx/access.log sudo tail -f /var/log/nginx/error.log日志分析工具推荐GoAccess实时日志分析AWStats详细统计报告10. 安全加固措施10.1 隐藏Nginx版本号在nginx.conf中添加server_tokens off;10.2 限制HTTP方法只允许必要的HTTP方法if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 405; }10.3 防止目录遍历禁用目录列表autoindex off;10.4 SSL/TLS配置如果使用HTTPS推荐配置ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on; ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384...; ssl_session_timeout 1d; ssl_session_cache shared:SSL:50m;11. 多站点配置如果需要配置多个站点只需重复上述步骤注意使用不同的端口或域名为每个站点创建单独的配置文件确保没有端口冲突例如第二个站点可以配置在9095端口server { listen 9095; server_name _; root /var/www/project2; # 其他配置... }12. 自动化部署脚本为了简化重复工作我通常会准备一个部署脚本deploy.sh#!/bin/bash # 更新系统 sudo apt update sudo apt upgrade -y # 安装Nginx sudo apt install nginx -y # 创建项目目录 sudo mkdir -p /var/www/$1 sudo chown -R www-data:www-data /var/www/$1 sudo chmod -R 755 /var/www/$1 # 创建Nginx配置 sudo tee /etc/nginx/sites-available/$1 EOF server { listen $2 default_server; listen [::]:$2 default_server; server_name _; root /var/www/$1; index index.html; location / { try_files \$uri \$uri/ /index.html; } } EOF # 启用配置 sudo ln -s /etc/nginx/sites-available/$1 /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx # 防火墙 sudo ufw allow $2/tcp echo 部署完成访问地址: http://服务器IP:$2使用方法chmod x deploy.sh ./deploy.sh 项目名 端口号13. 容器化部署方案对于更复杂的项目我推荐使用Docker部署。创建一个DockerfileFROM nginx:alpine COPY dist/ /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80对应的nginx.conf:server { listen 80; server_name _; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } }构建并运行docker build -t my-vue-app . docker run -d -p 9094:80 my-vue-app14. 监控与维护14.1 资源监控使用以下命令监控Nginx资源使用情况top -p $(pgrep nginx | tr \n , | sed s/,$//)14.2 日志轮转Nginx默认配置了日志轮转配置文件在/etc/logrotate.d/nginx。可以自定义设置/var/log/nginx/*.log { daily missingok rotate 14 compress delaycompress notifempty create 0640 www-data adm sharedscripts postrotate if [ -f /var/run/nginx.pid ]; then kill -USR1 cat /var/run/nginx.pid fi endscript }15. 备份与恢复15.1 配置备份定期备份Nginx配置sudo tar -czvf nginx-backup-$(date %Y%m%d).tar.gz /etc/nginx15.2 项目备份备份项目文件sudo tar -czvf project-backup-$(date %Y%m%d).tar.gz /var/www/test15.3 恢复流程如果需要恢复sudo tar -xzvf nginx-backup-20230516.tar.gz -C / sudo systemctl restart nginx16. 进阶配置技巧16.1 负载均衡配置如果有多个后端服务可以配置负载均衡upstream backend { server 127.0.0.1:8080; server 127.0.0.1:8081; } server { location / { proxy_pass http://backend; } }16.2 HTTP/2启用在SSL配置后添加listen 443 ssl http2; listen [::]:443 ssl http2;16.3 缓存代理配置对于API代理可以添加缓存proxy_cache_path /var/cache/nginx levels1:2 keys_zonemy_cache:10m inactive60m; location /api/ { proxy_cache my_cache; proxy_pass http://backend; }17. 性能测试与调优17.1 压力测试工具使用ab(Apache Benchmark)进行测试ab -n 1000 -c 100 http://localhost:9094/17.2 关键参数调优在nginx.conf中调整worker_processes auto; worker_rlimit_nofile 100000; events { worker_connections 4000; multi_accept on; use epoll; } http { open_file_cache max200000 inactive20s; open_file_cache_valid 30s; open_file_cache_min_uses 2; open_file_cache_errors on; }18. 故障排查手册18.1 服务无法启动检查步骤查看错误日志sudo tail -n 50 /var/log/nginx/error.log检查端口冲突sudo netstat -tulnp | grep :9094检查配置语法sudo nginx -t18.2 高负载问题排查方法查看当前连接数sudo netstat -anp | grep nginx | wc -l检查系统资源htop或glances优化配置参数见17.2节18.3 SSL证书问题常见错误证书路径错误证书链不完整私钥不匹配验证命令openssl x509 -in /path/to/cert.pem -text -noout openssl rsa -in /path/to/key.pem -check19. 版本升级指南19.1 备份现有配置sudo cp -r /etc/nginx /etc/nginx-backup19.2 添加官方仓库对于Ubuntusudo add-apt-repository ppa:nginx/stable sudo apt update19.3 执行升级sudo apt install --only-upgrade nginx19.4 验证升级nginx -v sudo systemctl restart nginx20. 最佳实践总结经过多年的Nginx使用经验我总结了以下最佳实践目录结构清晰保持/etc/nginx/目录结构整洁使用sites-available和sites-enabled管理站点最小权限原则严格限制文件和目录权限配置模块化将重复配置提取到单独文件中用include引入日志分离不同站点使用不同的访问日志定期更新保持Nginx和系统处于最新版本监控报警设置基本的资源监控和报警机制文档记录为每个自定义配置添加注释说明最后建议将常用配置保存为模板这样在新项目部署时可以节省大量时间。我通常会维护一个配置模板库包含各种场景下的Nginx配置如静态站点、Vue/React项目、负载均衡、反向代理等。
