Nginx配置前后端分离项目(Ubuntu系统)

该博客介绍在Ubuntu系统配置Nginx实现前后端分离项目。前端直接访问后端端口会出现跨域和暴露真实地址问题,Nginx可实现负载均衡和反向代理。利用其监听端口访问前后端端口能解决跨域问题,还给出模拟端口及前端请求地址修改要求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ubuntu系统配置Nginx实现前后端分离项目


暴露问题
- 前端直接访问后端端口出现跨域问题
- 暴露真实地址
Nginx
- 负载均衡
- 反向代理
接下来主要来说反向代理这个作用,基本上就是利用Nginx的监听端口来访问后端和前端端口,解决跨域问题,话不多说上步骤。
注意:模拟
- 后端接口:6666
- Nginx:80
-前端:8080(本操作并没有用到,因为采用了打包的方式)
这个就是Nginx监听的端口

server {
    listen 80;  `这个就是咱们用的唯一端口`
    server_name  localhost; `这里可以填写自己的域名`

然后我们在server内部添加location模块进入匹配规则模式

    location / {
            root  /usr/local/travel/dist/; `前端打包后dist的路径`
            index  index.html index.htm;   
            try_files $uri $uri/ /index.html

通过上述操作我们已经可以通过localhst:80来访问到我们的前端页面,接下来我们吧后端接口交给Nginx代理。

location /ok/ {
        proxy_pass http://localhost:6666;
        `指定允许跨域的方法,*代表所有`
        add_header Access-Control-Allow-Methods *;
        `预检命令的缓存,如果不缓存每次会发送两次请求`
        add_header Access-Control-Max-Age 3600;
         `带cookie请求需要加上这个字段,并设置为true`
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers;
        $http_access_control_request_headers;
    }

还差最后一步:前端会有一个往后端请求的一个总地址,这个地址一定要改为“/ok/”,和上面代理后端的location的匹配规则一致。

现在我们就大功告成了,第一次和大家见面,希望得到兄弟姐们的点评

<think>好的,我需要回答用户关于如何使用Nginx配置前后端分离架构的问题。首先,我得回忆一下前后端分离的基本概念。前后端分离通常是指前端和后端独立开发,通过API进行通信。Nginx在这里的作用主要是作为反向代理和静态资源服务器。 根据用户提供的引用资料,引用[1]提到前端通过Nginx提供静态资源,后端API通过Nginx代理转发。引用[2]则讨论了使用Postman测试接口和API设计规范,这可能对调试有帮助。我需要结合这些信息来构建配置步骤。 首先,用户需要安装Nginx,这是基础步骤。然后,配置静态资源服务,让Nginx托管前端文件,比如HTML、JS、CSS。接下来,设置反向代理,将API请求转发到后端服务器,比如Spring Boot应用。还要考虑跨域问题,可能需要添加CORS头。负载均衡如果有多个后端实例的话,可以用upstream模块。最后,重启Nginx并测试配置是否正确。 需要注意的点包括路径是否正确、代理地址是否准确、是否需要HTTPS等。另外,用户可能想知道如何验证配置是否生效,可以建议使用Postman测试接口,如引用[2]提到的,快速定位问题。 可能的相关问题包括如何优化Nginx配置、如何处理静态缓存、如何结合HTTPS部署。这些可以作为相关问题列出,帮助用户进一步探索。</think>### 如何配置Nginx实现前后端分离架构? 以下是分步配置指南,结合Nginx的反向代理与静态资源托管能力实现前后端分离: --- #### **1. 基础架构理解** - **前端**:使用框架(如Vue.js/React)打包生成的静态文件(HTML/CSS/JS),需托管在Nginx服务器。 - **后端**:提供RESTful API的服务(如Spring Boot/Django),通过Nginx反向代理对外暴露接口。 --- #### **2. Nginx配置步骤** ##### **步骤1:安装Nginx** ```bash # Ubuntu/Debian sudo apt update && sudo apt install nginx # CentOS sudo yum install nginx ``` ##### **步骤2:配置前端静态资源** 1. 将前端构建产物(如`dist`目录)上传至服务器,例如`/var/www/frontend`。 2. 在Nginx配置文件中添加静态资源服务: ```nginx server { listen 80; server_name example.com; # 静态文件托管 location / { root /var/www/frontend; index index.html; try_files $uri $uri/ /index.html; # 支持前端路由(如Vue Router) } } ``` ##### **步骤3:配置后端API反向代理** ```nginx server { # ...(同上监听配置) # API代理配置 location /api/ { proxy_pass http://backend_server; # 后端服务地址(如Spring Boot的8080端口) proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 可选:跨域配置(若后端未处理CORS) add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; } } # 定义后端服务地址(支持负载均衡) upstream backend_server { server 127.0.0.1:8080; # 单节点示例 # server 192.168.1.2:8080 weight=3; # 多节点权重分配 } ``` ##### **步骤4:重载Nginx配置** ```bash sudo nginx -t # 验证配置语法 sudo nginx -s reload ``` --- #### **3. 关键配置说明** - **静态资源路径**:确保`root`指向正确的前端构建目录[^1]。 - **路由兼容性**:`try_files`确保前端路由刷新不报404。 - **代理转发**:`proxy_pass`将`/api/`开头的请求转发至后端服务[^1]。 - **跨域处理**:若后端已配置CORS,可省略Nginx的`add_header`指令[^2]。 --- #### **4. 验证配置** 1. **前端访问**:浏览器打开`http://example.com`,确认页面加载正常。 2. **接口测试**:使用Postman发送请求至`http://example.com/api/user`,检查是否返回后端数据[^2]。 --- #### **5. 扩展优化建议** - **HTTPS支持**:通过Let's Encrypt配置SSL证书。 - **缓存控制**:为静态资源添加缓存头: ```nginx location /assets/ { expires 1y; add_header Cache-Control "public"; } ``` - **日志监控**:配置访问日志与错误日志路径,便于故障排查。 --- 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猿小路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值