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

 更新时间:2020-10-18 11:15:12   作者:佚名   我要评论(0)

前后端分离项目,前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。
以 vue + php 项目为例。直接上 server 模块的 nginx 配置。


server
{
listen

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

您可能感兴趣的文章:
  • 基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
  • 部署前后端分离式nginx配置的完整步骤
  • nginx+vue.js实现前后端分离的示例代码
  • Nginx实现前后端分离
  • 详解基于Vue,Nginx的前后端不分离部署教程

相关文章

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

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

    前后端分离项目,前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue + php 项目为例。直接上 server 模块的 nginx 配置。 server { listen
    2020-10-18
  • Python中Yield的基本用法

    Python中Yield的基本用法

    带有yield的函数在Python中被称之为generator(生成器),也就是说,当你调用这个函数的时候,函数内部的代码并不立即执行 ,这个函数只是返回一个生成器(Generator I
    2020-10-18
  • Android Gradle Plug 4.1.0 升级后gradle获取manifest位置失败问题解决

    Android Gradle Plug 4.1.0 升级后gradle获取manifest位置失败问题解决

    问题背景 项目编译过程中,使用了类似Android Gradle Plugin的gradle插件进行编译,在最终打包apk时,会动态修改manifest文件。 近期发现线上用户有反应升级到以下开
    2020-10-18
  • AndroidStudio升级4.1后启动失败Plugin问题解决

    AndroidStudio升级4.1后启动失败Plugin问题解决

    AS升级4.1 后启动失败 Plugin问题 start fail 弹窗如下: Internal error. Please refer to https://code.google.com/p/android/issues java.lang.NoSuchMethodErr
    2020-10-18
  • Java中方法使用的深入讲解

    Java中方法使用的深入讲解

    方法的使用 1.方法的基本用法 什么是方法,方法就是一个代码片段,类似于C/C++ 语言中的"函数"。 1.1方法存在的意义: 是能够模块化的组织代码(当代码规模比较复
    2020-10-18
  • js中复选框的取值及赋值示例详解

    js中复选框的取值及赋值示例详解

    1、复选框的取值:(js部分) var checkboxdata = $(“input[name=payoperator]:checked”).map(function() { return $(this).val(); }).get().join(",");
    2020-10-18
  • 详解如何在Javascript中使用Object.freeze()

    详解如何在Javascript中使用Object.freeze()

    Object.freeze() Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不
    2020-10-18
  • Android Studio升级到4.1以后插件问题解决

    Android Studio升级到4.1以后插件问题解决

    当把Android Studio升级到4.1以后插件提示不可用,然后启动的报下面的错: 错误的意思是该插件只支持IDEA,然后想把这个插件删除,发现在已安装的插件中是找
    2020-10-18
  • 如何利用python读取micaps文件详解

    如何利用python读取micaps文件详解

    最近用编程处理文件挺多的,matlab用得比较熟,但还是想用python来写写,Fortran就不用了。 所用到的数据如下图,前面4行是说明,实际要用的数据是第5行开始。 一共
    2020-10-18
  • Python如何使用vars返回对象的属性列表

    Python如何使用vars返回对象的属性列表

    英文文档: vars([object]) Return the __dict__ attribute for a module, class, instance, or any other object with a __dict__ attribute. Objects such
    2020-10-17

最新评论