您的位置：首页 > 服务器维护 > nginx  >  Nginx代理同域名前后端分离项目的完整步骤

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

 更新时间：2020年10月18日 14:48  点击：1832

前后端分离项目，前后端共用一个域名。通过域名后的 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代理同域名前后端分离项目内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • 详解nginx同一端口监听多个域名和同时监听http与https

    这篇文章主要介绍了详解nginx同一端口监听多个域名和同时监听http与https的相关资料,需要的朋友可以参考下...2017-07-06

  • Nginx根据不同浏览器语言配置页面跳转的方法

    这篇文章主要介绍了Nginx根据不同浏览器语言配置页面跳转的方法,包括一个简体繁体的基本判断方法及实际根据中英文跳转的例子,需要的朋友可以参考下...2016-05-22

  • 详解前后端分离之VueJS前端

    本篇文章主要介绍了详解前后端分离之VueJS前端，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27

  • 网站被百度拔毛 一月重新回归经验分离

    网站被K后，笔者做的第一件事便是在网站上增加更新模块。百度算法更新，对于网站内容给予了相当大的权重，这是笔者网站最欠缺的部分，保证了及时的更新便有了吸引蜘蛛爬取的...2016-10-10

  • shell脚本多实例部署nginx的详细教程

    周一今天给大家分享shell脚本多实例部署nginx的详细教程，文章通过实例代码脚本给大家详细介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧...2021-10-26

  • Nginx中配置过滤爬虫的User-Agent的简单方法

    这篇文章主要介绍了Nginx中配置过滤爬虫的User-Agent的简单方法,文中罗列了一些常用搜索引擎的爬虫名称以免造成不必要的过滤,需要的朋友可以参考下...2016-01-27

  • ssm+vue前后端分离框架整合实现(附源码)

    这篇文章主要介绍了ssm+vue前后端分离框架整合实现(附源码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-09

  • nginx配置引发的403问题解决办法

    这篇文章主要介绍了nginx配置引发的403问题解决办法的相关资料,需要的朋友可以参考下...2017-07-06

  • Linux环境下nginx搭建简易图片服务器

    这篇文章主要介绍了Linux环境下nginx搭建简易图片服务器,需要的朋友可以参考下...2016-01-27

  • Nginx访问日志及错误日志参数说明

    这篇文章主要介绍了Nginx访问日志及错误日志参数说明,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-14

  • 使用nginx方式实现http转换为https的示例代码

    这篇文章主要介绍了使用nginx方式实现http转换为https的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-06

  • Nginx反向代理proxy_cache_path directive is not allowed错误解决方法

    这篇文章主要介绍了Nginx反向代理proxy_cache_path directive is not allowed错误解决方法,需要的朋友可以参考下...2016-01-27

  • nginx+apache+mysql+php+memcached+squid搭建集群web环境

    当前，LAMP开发模式是WEB开发的首选，如何搭建一个高效、可靠、稳定的WEB服务器一直是个热门主题，本文就是这个主题的一次尝试。...2016-01-27

  • Nginx自定义访问日志的配置方式

    Nginx日志主要分为两种：访问日志和错误日志。访问日志主要记录客户端访问Nginx的每一个请求，格式可以自定义。下面这篇文章主要给大家介绍了Nginx自定义访问日志的配置方式，需要的朋友可以参考学习，下面来一起看看吧。...2017-07-06

  • nginx使用IPV6的相关配置项介绍

    这篇文章主要介绍了nginx使用IPV6的相关配置项介绍,首先查看编译参数是否编译了IPV6模块,然后介绍了监听IPV6的配置语法,需要的朋友可以参考下...2016-01-27

  • 解决使用了nginx获取IP地址都是127.0.0.1 的问题

    这篇文章主要介绍了解决使用了nginx获取IP地址都是127.0.0.1 的问题,获取i工具的完整代码文中给大家提到，具体实例代码跟随小编一起看看吧...2021-09-18

  • nginx修改上传文件大小限制的方法

    本篇文章主要介绍了nginx修改上传文件大小限制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。 ...2017-01-22

  • Debian7编译安装nginx简明教程

    这篇文章主要介绍了Debian7编译安装nginx简明教程,本文直接给出操作命令和步骤,需要的朋友可以参考下...2016-01-27

  • 隐藏Nginx或Apache以及PHP的版本号的方法

    这篇文章主要介绍了隐藏Nginx或Apache以及PHP的版本号的方法,主要用来防止针对性的漏洞攻击,需要的朋友可以参考下...2016-01-05

  • Nginx DNS resolver配置实例

    这篇文章主要介绍了Nginx DNS resolver配置实例,本文讲解在proxy_pass 和 upstream server 通信的时候需要手动指定 resolver,本文就给出了配置实例,需要的朋友可以参考下...2016-01-27