脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → Nginx代理同域名前后端分离项目

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

 更新时间：2020年10月18日 09:56:57   作者：Mr_houzi  
这篇文章主要给大家介绍了关于Nginx代理同域名前后端分离项目的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

您可能感兴趣的文章:

相关文章

  • Nginx 服务器安装及配置文件详解介绍

    Nginx 服务器安装及配置文件详解介绍

    这篇文章主要介绍了Nginx 服务器安装及配置文件详解介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • HTTP 499 状态码 nginx下 499错误的解决办法

    HTTP 499 状态码 nginx下 499错误的解决办法

    HTTP状态码出现499错误有多种情况,499错误是什么?Nginx 499错误的原因及解决方法,下面跟着脚本之家小编一起学习吧
    2016-06-06
  • Nginx中实现访问HTTP请求时自动跳转到HTTPS请求

    Nginx中实现访问HTTP请求时自动跳转到HTTPS请求

    本文主要介绍了Nginx中实现访问HTTP请求时自动跳转到HTTPS请求,下面介绍了两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • Nginx之rewrite实现URL重写方式

    Nginx之rewrite实现URL重写方式

    文章介绍了Nginx的rewrite模块,包括其重要性、相关指令（如set、if、break、return、rewrite）的使用方法和作用域,并举例说明了这些指令的实际应用场景,如域名重定向和防盗链处理
    2025-03-03
  • nginx配置请求转发不生效的实现

    nginx配置请求转发不生效的实现

    本文主要介绍了nginx配置请求转发不生效的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-02-02
  • Nginx服务器中414错误和504错误的配置解决方法

    Nginx服务器中414错误和504错误的配置解决方法

    这篇文章主要介绍了Nginx服务器中414错误和504错误的配置解决方法,分别对应Request-URI Too Large和Gateway Time-out这样的错误提示,需要的朋友可以参考下
    2015-12-12
  • nginx出现500 Internal Server Error错误的解决方法

    nginx出现500 Internal Server Error错误的解决方法

    这篇文章主要介绍了nginx出现500 Internal Server Error错误的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或工作有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-09-09
  • 解决httpd占用80端口导致Nginx启动失败报错的解决办法

    解决httpd占用80端口导致Nginx启动失败报错的解决办法

    今天在建自己小网站时启动Nginx时,发现其报下列错误,意思是因为80端口被占用导致Nginx启动失败,所以本文小编给大家介绍介绍如何解决解决httpd占用80端口导致Nginx启动不成功报nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
    2023-11-11
  • Nginx反向代理多域名的HTTP和HTTPS服务的实现

    Nginx反向代理多域名的HTTP和HTTPS服务的实现

    这篇文章主要介绍了Nginx反向代理多域名的HTTP和HTTPS服务的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 详解Nginx实战之让用户通过用户名密码认证访问web站点

    详解Nginx实战之让用户通过用户名密码认证访问web站点

    这篇文章主要介绍了详解Nginx实战之让用户通过用户名密码认证访问web站点,有兴趣的可以了解一下。
    2016-11-11

最新评论