1. 为什么需要Nginx配置前后端服务现代Web应用开发中前后端分离架构已成为主流模式。这种架构下前端通常使用React、Vue等框架构建单页应用(SPA)后端则提供RESTful API接口。Nginx作为高性能的Web服务器和反向代理在这种架构中扮演着关键角色。我经历过多个项目的部署过程发现很多开发者在本地开发时一切正常但一到部署阶段就遇到各种访问问题。最常见的就是前端无法访问后端API或者静态资源加载失败。这些问题90%以上都可以通过正确的Nginx配置解决。Nginx的主要优势在于高性能采用事件驱动架构能轻松应对高并发灵活性通过配置文件即可实现复杂路由逻辑稳定性长期运行几乎不会出现内存泄漏等问题多功能同时支持静态资源服务和反向代理2. 基础环境准备2.1 Nginx安装与验证在开始配置前我们需要确保Nginx已正确安装。以下是在Ubuntu系统上的安装步骤# 更新软件包列表 sudo apt update # 安装Nginx sudo apt install nginx -y # 启动Nginx服务 sudo systemctl start nginx # 设置开机自启 sudo systemctl enable nginx # 检查状态 sudo systemctl status nginx安装完成后在浏览器访问服务器IP应该能看到Nginx的欢迎页面。如果看不到可能需要检查防火墙设置# 开放80端口 sudo ufw allow 80/tcp sudo ufw enable2.2 项目目录结构规划合理的目录结构能让后续维护更轻松。我推荐采用以下结构/var/www/ ├── your_project/ │ ├── frontend/ # 前端构建产物 │ │ ├── index.html │ │ ├── static/ │ │ └── ... │ └── backend/ # 后端项目 │ └── ...创建目录并设置权限sudo mkdir -p /var/www/your_project/{frontend,backend} sudo chown -R $USER:$USER /var/www/your_project sudo chmod -R 755 /var/www/your_project3. 前端服务配置3.1 部署前端静态资源将前端构建产物通常是dist目录下的内容复制到/var/www/your_project/frontend目录。以Vue项目为例# 假设前端项目在本地已构建 scp -r ./dist/* useryour_server:/var/www/your_project/frontend/3.2 Nginx基础前端配置创建或编辑Nginx配置文件通常在/etc/nginx/sites-available/your_projectserver { listen 80; server_name your_domain.com; root /var/www/your_project/frontend; index index.html; location / { try_files $uri $uri/ /index.html; } }这个配置做了以下几件事监听80端口设置服务器名为你的域名指定前端资源根目录配置单页应用的路由回退3.3 处理前端路由问题单页应用的路由需要特殊处理否则刷新页面会返回404。这是因为浏览器直接请求了后端不存在的路由路径。解决方案是在Nginx中添加以下配置location / { try_files $uri $uri/ /index.html; }这个配置会先尝试匹配实际文件如果找不到就返回index.html由前端路由处理。4. 后端服务配置4.1 后端应用部署后端应用可能有多种形式这里以Node.js应用为例。假设你的后端服务运行在3000端口# 启动后端服务 cd /var/www/your_project/backend npm install npm start确保服务正常运行后我们需要配置Nginx反向代理。4.2 Nginx反向代理配置在同一个配置文件中添加后端代理配置server { # ... 前面的前端配置保持不变 location /api/ { proxy_pass http://localhost:3000/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }关键点说明/api/是后端API的基础路径可以根据项目调整proxy_pass指向后端实际运行的地址和端口其他proxy_set_header配置确保WebSocket等高级功能正常工作4.3 处理跨域问题如果前后端分离开发时遇到跨域问题可以在Nginx中添加CORS支持location /api/ { # ... 其他代理配置 # CORS配置 add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Expose-Headers Content-Length,Content-Range; }5. 高级配置与优化5.1 静态资源缓存为了提高性能可以为静态资源配置缓存location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; add_header Cache-Control public, no-transform; }这个配置会使匹配的静态文件在浏览器缓存365天。5.2 Gzip压缩启用Gzip压缩可以显著减少传输数据量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_proxied any; gzip_comp_level 6; gzip_vary on;5.3 HTTPS配置安全起见应该为生产环境配置HTTPS。以下是使用Lets Encrypt免费证书的配置server { listen 443 ssl; server_name your_domain.com; ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem; # ... 其他配置保持不变 } server { listen 80; server_name your_domain.com; return 301 https://$host$request_uri; }6. 常见问题排查6.1 502 Bad Gateway错误这是最常见的反向代理问题通常是因为后端服务没有运行或Nginx无法连接到它。排查步骤检查后端服务是否运行ps aux | grep node检查后端服务监听的端口是否正确netstat -tulnp | grep 3000检查Nginx错误日志tail -f /var/log/nginx/error.log6.2 静态资源加载失败如果CSS/JS文件加载失败可能是路径问题。检查文件是否实际存在于指定路径文件权限是否正确Nginx配置中的root路径是否正确6.3 配置修改后不生效修改Nginx配置后需要重新加载配置sudo nginx -t # 测试配置语法 sudo systemctl reload nginx # 重新加载配置7. 实际项目经验分享在多个生产项目中我总结出以下经验路径规划要提前前后端API路径最好在项目初期就确定避免后期修改带来的麻烦。我习惯使用/api/v1/作为后端基础路径。环境变量管理前端项目中API地址应该通过环境变量配置而不是硬编码。这样在不同环境部署时只需修改Nginx配置。日志分割生产环境应该配置日志分割避免单个日志文件过大# 在/etc/logrotate.d/nginx中添加 /var/log/nginx/*.log { daily missingok rotate 14 compress delaycompress notifempty create 0640 www-data adm sharedscripts postrotate invoke-rc.d nginx rotate /dev/null 21 endscript }性能监控可以使用Nginx的stub_status模块监控基本性能指标location /nginx_status { stub_status; allow 127.0.0.1; deny all; }负载均衡当流量增大时可以轻松扩展为负载均衡架构upstream backend { server backend1.example.com; server backend2.example.com; server backend3.example.com; } location /api/ { proxy_pass http://backend; }最后提醒一点每次修改配置前先备份使用nginx -t测试语法然后再应用更改。这个习惯帮我避免了很多线上事故。 
长河君 · 2026/9/14 2:05:39 · 阅读 1.2k Nginx配置前后端分离项目实战指南
1. 为什么需要Nginx配置前后端服务现代Web应用开发中前后端分离架构已成为主流模式。这种架构下前端通常使用React、Vue等框架构建单页应用(SPA)后端则提供RESTful API接口。Nginx作为高性能的Web服务器和反向代理在这种架构中扮演着关键角色。我经历过多个项目的部署过程发现很多开发者在本地开发时一切正常但一到部署阶段就遇到各种访问问题。最常见的就是前端无法访问后端API或者静态资源加载失败。这些问题90%以上都可以通过正确的Nginx配置解决。Nginx的主要优势在于高性能采用事件驱动架构能轻松应对高并发灵活性通过配置文件即可实现复杂路由逻辑稳定性长期运行几乎不会出现内存泄漏等问题多功能同时支持静态资源服务和反向代理2. 基础环境准备2.1 Nginx安装与验证在开始配置前我们需要确保Nginx已正确安装。以下是在Ubuntu系统上的安装步骤# 更新软件包列表 sudo apt update # 安装Nginx sudo apt install nginx -y # 启动Nginx服务 sudo systemctl start nginx # 设置开机自启 sudo systemctl enable nginx # 检查状态 sudo systemctl status nginx安装完成后在浏览器访问服务器IP应该能看到Nginx的欢迎页面。如果看不到可能需要检查防火墙设置# 开放80端口 sudo ufw allow 80/tcp sudo ufw enable2.2 项目目录结构规划合理的目录结构能让后续维护更轻松。我推荐采用以下结构/var/www/ ├── your_project/ │ ├── frontend/ # 前端构建产物 │ │ ├── index.html │ │ ├── static/ │ │ └── ... │ └── backend/ # 后端项目 │ └── ...创建目录并设置权限sudo mkdir -p /var/www/your_project/{frontend,backend} sudo chown -R $USER:$USER /var/www/your_project sudo chmod -R 755 /var/www/your_project3. 前端服务配置3.1 部署前端静态资源将前端构建产物通常是dist目录下的内容复制到/var/www/your_project/frontend目录。以Vue项目为例# 假设前端项目在本地已构建 scp -r ./dist/* useryour_server:/var/www/your_project/frontend/3.2 Nginx基础前端配置创建或编辑Nginx配置文件通常在/etc/nginx/sites-available/your_projectserver { listen 80; server_name your_domain.com; root /var/www/your_project/frontend; index index.html; location / { try_files $uri $uri/ /index.html; } }这个配置做了以下几件事监听80端口设置服务器名为你的域名指定前端资源根目录配置单页应用的路由回退3.3 处理前端路由问题单页应用的路由需要特殊处理否则刷新页面会返回404。这是因为浏览器直接请求了后端不存在的路由路径。解决方案是在Nginx中添加以下配置location / { try_files $uri $uri/ /index.html; }这个配置会先尝试匹配实际文件如果找不到就返回index.html由前端路由处理。4. 后端服务配置4.1 后端应用部署后端应用可能有多种形式这里以Node.js应用为例。假设你的后端服务运行在3000端口# 启动后端服务 cd /var/www/your_project/backend npm install npm start确保服务正常运行后我们需要配置Nginx反向代理。4.2 Nginx反向代理配置在同一个配置文件中添加后端代理配置server { # ... 前面的前端配置保持不变 location /api/ { proxy_pass http://localhost:3000/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }关键点说明/api/是后端API的基础路径可以根据项目调整proxy_pass指向后端实际运行的地址和端口其他proxy_set_header配置确保WebSocket等高级功能正常工作4.3 处理跨域问题如果前后端分离开发时遇到跨域问题可以在Nginx中添加CORS支持location /api/ { # ... 其他代理配置 # CORS配置 add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Expose-Headers Content-Length,Content-Range; }5. 高级配置与优化5.1 静态资源缓存为了提高性能可以为静态资源配置缓存location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; add_header Cache-Control public, no-transform; }这个配置会使匹配的静态文件在浏览器缓存365天。5.2 Gzip压缩启用Gzip压缩可以显著减少传输数据量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_proxied any; gzip_comp_level 6; gzip_vary on;5.3 HTTPS配置安全起见应该为生产环境配置HTTPS。以下是使用Lets Encrypt免费证书的配置server { listen 443 ssl; server_name your_domain.com; ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem; # ... 其他配置保持不变 } server { listen 80; server_name your_domain.com; return 301 https://$host$request_uri; }6. 常见问题排查6.1 502 Bad Gateway错误这是最常见的反向代理问题通常是因为后端服务没有运行或Nginx无法连接到它。排查步骤检查后端服务是否运行ps aux | grep node检查后端服务监听的端口是否正确netstat -tulnp | grep 3000检查Nginx错误日志tail -f /var/log/nginx/error.log6.2 静态资源加载失败如果CSS/JS文件加载失败可能是路径问题。检查文件是否实际存在于指定路径文件权限是否正确Nginx配置中的root路径是否正确6.3 配置修改后不生效修改Nginx配置后需要重新加载配置sudo nginx -t # 测试配置语法 sudo systemctl reload nginx # 重新加载配置7. 实际项目经验分享在多个生产项目中我总结出以下经验路径规划要提前前后端API路径最好在项目初期就确定避免后期修改带来的麻烦。我习惯使用/api/v1/作为后端基础路径。环境变量管理前端项目中API地址应该通过环境变量配置而不是硬编码。这样在不同环境部署时只需修改Nginx配置。日志分割生产环境应该配置日志分割避免单个日志文件过大# 在/etc/logrotate.d/nginx中添加 /var/log/nginx/*.log { daily missingok rotate 14 compress delaycompress notifempty create 0640 www-data adm sharedscripts postrotate invoke-rc.d nginx rotate /dev/null 21 endscript }性能监控可以使用Nginx的stub_status模块监控基本性能指标location /nginx_status { stub_status; allow 127.0.0.1; deny all; }负载均衡当流量增大时可以轻松扩展为负载均衡架构upstream backend { server backend1.example.com; server backend2.example.com; server backend3.example.com; } location /api/ { proxy_pass http://backend; }最后提醒一点每次修改配置前先备份使用nginx -t测试语法然后再应用更改。这个习惯帮我避免了很多线上事故。