Nginx代理同域名前后端分离项目的完整步骤


Posted in Servers onMarch 31, 2021

前后端分离项目,前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。

以 vue + php 项目为例。直接上 server 模块的 nginx 配置。

server
 {
 listen 80;
 #listen [::]:80 default_server ipv6only=on;
 server_name demo.com; # 配置项目域名
 index index.html index.htm index.php;

 # 1.转给前端处理
 location /
 {
  # 前端打包后的静态目录
  alias /home/wwwroot/default/vue-demo/dist/;
 }

 # 2.转给后端处理
 location /api/ {
  try_files $uri $uri/ /index.php?$query_string;
 }

 # 3.最终php在这里转给fpm
 location ~ [^/]\.php(/|$)
 {
  # 后端项目目录
  root /home/wwwroot/default/demo/public/;
  #fastcgi_pass 127.0.0.1:9000;
  fastcgi_pass unix:/tmp/php-cgi.sock;
  fastcgi_index index.php;
  include fastcgi.conf;
  include pathinfo.conf;
 }

 # 4.处理后端的静态资源
 location /public/ {
  alias /home/wwwroot/default/demo/public/uploads/;
 }

 #error_page 404 /404.html;

 access_log /home/wwwlogs/access.log main;
}

简单解释

  • 当域名后存在 /api/ 前缀时,将转给后端处理;
  • 当域名后存在 /uploads/ 前缀时,访问后端的静态资源。
  • 由于 location 精准匹配的原则,除以上之外的访问都会被转到第一处 location 访问前端页面。

例如:

访问文章列表接口

GET https://demo.com/api/posts

访问上传的图片

GET https://demo.com/uploads/xxx.jpg

访问前端首页

GET https://demo.com/

访问文章页面

GET https://demo.com/posts

PS:alias 路径末尾一定要有 / 。

总结

到此这篇关于Nginx代理同域名前后端分离项目的文章就介绍到这了,更多相关Nginx代理同域名前后端分离项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Servers 相关文章推荐
Nginx的反向代理实例详解
Mar 31 Servers
Nginx反向代理及负载均衡如何实现(基于linux)
Mar 31 Servers
利用Nginx代理如何解决前端跨域问题详析
Apr 02 Servers
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
Apr 04 Servers
总结高并发下Nginx性能如何优化
Nov 01 Servers
Kubernetes中Deployment的升级与回滚
Apr 01 Servers
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
Apr 02 Servers
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
Apr 07 Servers
tomcat正常启动但网页却无法访问的几种解决方法
May 06 Servers
nginx 添加http_stub_status_module模块
May 25 Servers
Windows Server 修改远程桌面端口的实现
Jun 25 Servers
apache虚拟主机配置的三种方式(小结)
Jul 23 Servers
Nginx+SpringBoot实现负载均衡的示例
win10安装配置nginx的过程
Filebeat 采集 Nginx 日志的方法
如何利用map实现Nginx允许多个域名跨域
Mar 31 #Servers
Nginx 过滤静态资源文件的访问日志的实现
Mar 31 #Servers
Nginx的反向代理实例详解
nginx反向代理时如何保持长连接
Mar 31 #Servers
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Python3分析处理声音数据的例子
2019/08/27 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Django配置文件代码说明
2019/12/04 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
python time()的实例用法
2020/11/03 Python
如何用Python徒手写线性回归
2021/01/25 Python
Python中的流程控制详解
2021/02/18 Python
Ibatis如何调用存储过程
2015/05/15 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
小学新教师个人总结
2015/02/05 职场文书
城管年度个人总结
2015/02/28 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS