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代理同域名前后端分离项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-10-15

nginx+vue.js实现前后端分离的示例代码

1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

Nginx实现前后端分离

#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream;

基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践

淘宝网线上应用的传统软件栈结构为 Nginx + Velocity + Java,即: 在这个体系中,Nginx 将请求转发给 Java 应用,后者处理完事务,再将数据用 Velocity 模板渲染成最终的页面. 引入 Node.js 之后,我们势必要面临以下几个问题: 技术栈的拓扑结构该如何设计,部署方式该如何选择,才算是科学合理?项目完成后,该如何切分流量,对运维来说才算是方便快捷?遇到线上的问题,如何最快地解除险情,避免更大的损失?如何确保应用的健康情况,在负载均衡调度的层面加以管理?承系

详解基于Vue,Nginx的前后端不分离部署教程

有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作 前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问

部署前后端分离式nginx配置的完整步骤

前言 老生常谈了,这里谈谈我的理解的前后端分离,简单的分离无非是将原来mvc的view层剥离出来,独立一个成为Servlet服务,Servlet之间依靠http连通.这里的view Servlet容器可以是任意一种服务端服务,Tomcat.Apache.Nginx.IIS,都可以.这里以常用的Nginx为例子做简单的介绍. 需求分析 先来一波需求分析. 单项目 单项目指的是一台服务器部署一个前端服务,使www.xxx.com => index.html的单一指向. 多项目 多项目指的是一台服务器

利用docker-compsoe部署前后端分离的项目方法

说在前面 我们都知道,docker可以实现很简便的部署环境.现在我们有一个前后端分离的项目,前端基于Vue开发.利用Webpakc打包为dist文件夹.后端则是一个Node.js服务,提供API接口,前端和后端是分离的.所以我们肯定是前端项目一个container,后台项目也是一个container.那么如果是在生产环境,就会产生跨域问题.前端的请求要反向代理到后台.大家肯定首先想到的就是使用 Nginx 设置 proxy_pass .是的没有错.那么我们有了这些想法.我们如何通过 docker

Vue路由模块化配置的完整步骤

前言 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置的模块化(Plan A and Plan B) 注册需要 首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) // 这里的 router 是这样的 export default new Rout

在Spring中基于Java类进行配置的完整步骤

前言 JavaConfig 原来是 Spring 的一个子项目,它通过 Java 类的方式提供 Bean 的定义信息,在 Spring4 的版本, JavaConfig 已正式成为 Spring4 的核心功能 . 本文将详细介绍关于Spring中基于Java类进行配置的相关内容,下面话不多说了,来一起看看详细的介绍吧 1 定义 Bean 普通的 POJO 只要标注了 @Configuration 注解,就可以为 Spring 容器提供 Bean 的定义信息. @Configuration pub

iOS多Target环境配置的完整步骤

在项目的开发中, 经常会有测试.正式环境, 下面就来配置一下这两个环境: 一:拷贝源Target (1): 拷贝源Target (2): 更改Target的名称 拷贝结束之后, 将拷贝的Target的名称改为"TestDemo_dis" (3): 更改Scheme的名称 二: 更改General 和 Signing & Capabilities 中的信息 (1)更改测试环境下的General 和 Signing & Capabilities 中的信息 (2)更改正式环境

Spring Boot+Jpa多数据源配置的完整步骤

关于 有时候,随着业务的发展,项目关联的数据来源会变得越来越复杂,使用的数据库会比较分散,这个时候就会采用多数据源的方式来获取数据.另外,多数据源也有其他好处,例如分布式数据库的读写分离,集成多种数据库等等. 下面分享我在实际项目中配置多数据源的案例.话不多说了,来一起看看详细的介绍吧 步骤 1.application.yml文件中,配置数据库源.这里primary是主库,secondary是从库. server: port: 8089 # 多数据源配置 #primary spring: pri

详解.net core webapi 前后端开发分离后的配置和部署

背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离. B/S Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能) 前端:node.js + vue 后端:.net core webapi 前端安装 node.js 跟创建vue项目这些不是这篇文章的重点,重点在于项目完成后的部署. .net corewebapi创建后,默认就创建了一个wwwroot的文件夹,这个文件夹是用来放置静态文件的,所以,我们可以理解成