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对http请求处理的各个阶段详析
Mar 31 Servers
如何利用map实现Nginx允许多个域名跨域
Mar 31 Servers
nginx服务器的下载安装与使用详解
Aug 02 Servers
nginx内存池源码解析
Nov 20 Servers
Windows和Linux上部署Golang并运行程序
Apr 22 Servers
Linux中文件的基本属性介绍
Jun 01 Servers
腾讯云服务器部署前后分离项目之前端部署
Jun 28 Servers
SpringBoot前端后端分离之Nginx服务器下载安装过程
Aug 14 Servers
Tomcat安装使用及部署Web项目的3种方法汇总
Aug 14 Servers
服务器nginx权限被拒绝解决案例
Sep 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基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
家电业务员岗位职责
2014/03/10 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
《画风》教学反思
2014/04/16 职场文书