前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了),然后群里就有小伙伴想让松哥来聊聊如何结合 Nginx 来部署前后端分离项目?今天我们就来聊一聊这个话题。

不得不说的跨域

很多人对前后端分离部署感到困惑,其实主要是困惑跨域问题怎么解决。因为前后端分离项目在开发的时候,前端通过 nodejs 来运行,需要一个单独的端口,后端通过 Tomcat 或者 Jetty 来运行,也需要端口,两个不同的端口,就造成了跨域。

但是松哥之前多次和大家聊过这个问题,这种跨域并不是我们传统开发中真正的跨域,这个所谓的跨域只在开发环境中存在,生产环境下就不存在这个跨域问题了。所以我们不能按照以往的通过 JSONP 或者 CORS 之类的手段来解决这个跨域问题。

前后端分离开发中,前端为了能够模拟出测试数据,并且模拟出请求,一般需要借助于 nodejs 来运行,这是开发时候的状态,开发时候的配置大家可以参考这篇文章:

等开发完成后,我们会对前端项目编译打包,编译打包完成之后,就只剩下一堆 js、css 以及 html 文件了,我们把这些编译打包后的文件拷贝到后端项目中,这样再去运行就不存在跨域问题了(例如将编译打包后的静态文件拷贝到 Spring Boot 项目的 src/main/resources/static 目录下)。这种方式我就不再多说了,相信大家都会,今天咱们主要来看看如何结合 Nginx 来部署。

Nginx 大杀器

结合 Nginx 来部署前后端分离项目算是目前的主流方案。一来部署方便,二来通过动静分离也可以有效提高项目的运行效率。

大家知道我们项目中的资源包含动态资源和静态资源两种,其中:

  • 动态资源就是那些需要经过容器处理的资源,例如 jsp、freemarker、各种接口等。
  • 静态资源则是那些不需要经过容器处理,收到客户端请求就可以直接返回的资源,像 js、css、html 以及各种格式的图片,都属于静态资源。

将动静资源分开部署,可以有效提高静态资源的加载速度以及整个系统的运行效率。

在前后端分离项目部署中,我们用 Nginx 来做一个反向代理服务器,它既可以代理动态请求,也可以直接提供静态资源访问。我们来一起看下。建议大家先阅读松哥以前关于 Nginx 的一篇旧文,可以有效帮助大家理解后面的配置:

后端部署

后端接口的部署,主要看项目的形式,如果就是普通的 SSM 项目,那就提前准备好 Tomcat ,在 Tomcat 中部署项目,如果是 Spring Boot 项目,可以通过命令直接启动 jar,如果是微服务项目,存在多个 jar 的话,可以结合 Docker 来部署(参考一键部署 Spring Boot 到远程 Docker 容器),无论是那种形式,对于我们 Java 工程师来说,这都不是问题,我相信这一步大家都能搞定。

后端项目可以在一个非 80 端口上部署,部署成功之后,因为这个后端项目只是提供接口,所以我们并不会直接去访问他。而是通过 Nginx 请求转发来访问这个后端接口。

松哥这里以我去年为一个律所的小程序为例,后端是一个 Spring Boot 工程,那么我可以通过 Docker 部署,也可以直接通过命令来启动,这里简单点,直接通过命令来启动 jar ,如下:

nohup java -jar jinlu.jar > vhr.log &

后端启动成功之后,我并不急着直接去访问后端,而是安装并且去配置一个 Nginx,通过 Nginx 来转发请求,Nginx 的基本介绍与安装,大家可以参考(Nginx 极简入门教程!),我这里就直接来说相关的配置了。

这里我们在 nginx.conf 中做出如下配置:

首先配置上游服务器:

upstream zqq.com{
server 127.0.0.1:9999 weight=2;
}

在这里主要是配置服务端的地址,如果服务端是集群化部署,那么这里就会有多个服务端地址,然后可以通过权重或者 ip hash 等方式进行请求分发。

然后我们在 server 中配置转发规则:

location /jinlu/ {
proxy_pass http://zqq.com;
tcp_nodelay on;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

这样配置完成后,假设我目前的域名是 javaboy.org,那么用户通过 http://www.javaboy.org/jinlu/** 格式的地址就可以访问到我服务端的接口。

前端部署

以 Vue 为例,如果是 SPA 应用,项目打包之后,就是一个 index.html 还有几个 js、css、images 以及 fonts ,这些都是静态文件,我们将静态文件首先上传到服务器,然后在 nginx.conf 中配置静态资源访问,具体配置如下:

location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {
root /usr/local/nginx/html/;#所有静态文件直接读取硬盘
expires 30d; #缓存30天
} ​​​​

当然我这里是按照资源类型来拦截的,即后缀为 js、css、ico 等的文件,统统都不进行请求分发,直接从本地的 /usr/local/nginx/html/ 目录下读取并返回到前端(我们需要将静态资源文件上传到 /usr/local/nginx/html/ 目录下)。

如果我们的服务器上部署了多个项目,这种写法就不太合适,因为多个项目的前端静态文件肯定要分门别类,各自放好的,这个时候我们一样可以通过路径来拦截,配置如下:

location /jinlu-admin/ {
root /usr/local/nginx/html/jinlu-admin/;#所有静态文件直接读取硬盘
expires 30d; #缓存30天
} ​​​​

这样,请求路径是 /jinlu-admin/ 格式的请求,则不会进行请求分发,而是直接从本机的 /usr/local/nginx/html/jinlu-admin/ 目录下返回相关资源。采用这方方式配置静态资源,我们就可以部署多个项目了,多个项目的部署方式和上面的一样。

这样部署完成之后,假设我的域名是 javaboy.org ,那么用户通过 http://www.javaboy.org/jinlu-admin/**

格式的请求就可以访问到前端资源了。

此时大家发现,前端的静态资源和后端的接口现在处于同一个域之中了,这样就不存在跨域问题,所以我一开始基说必用 JSONP 或者 CORS 去解决跨域。特殊情况可能需要在 nginx 中配置跨域,这个松哥以后再和大家细聊~​

好了,不知道小伙伴有没有看懂呢?有问题欢迎留言讨论。

关注公众号【江南一点雨】,专注于 Spring Boot+微服务以及前后端分离等全栈技术,定期视频教程分享,关注后回复 Java ,领取松哥为你精心准备的 Java 干货!

使用 Nginx 部署前后端分离项目,解决跨域问题的更多相关文章

  1. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  2. 前后端分离djangorestframework——解决跨域请求

    跨域 什么是跨域 比如一个链接:http://www.baidu.com(端口默认是80端口), 如果再来一个链接是这样:http://api.baidu.com,这个就算是跨域了(因为域名不同) 再 ...

  3. springboot 前后端分离开发解决跨域访问

    最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...

  4. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  5. linux --- 部署前后端分离项目

    vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...

  6. centos7部署前后端分离项目的过程

    概述 本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程. 前端项目名为:vue_project:后端项目名为:django_project. 将这两个项目放在/opt/wh ...

  7. Nginx部署前后端分离服务

    飘过... 一,安装Nginx 二,配置nginx 一般nginx配置文件在etc目录下 另,如何找nginx.conf配置文件: 在前后端分离端项目里,前端的代码会被打包成为纯静态文件.使用 Ngi ...

  8. 在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_102 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广 ...

  9. 海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_179 随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依 ...

随机推荐

  1. 使用Sigar做后台服务器管理时,遇到的linux上的问题

    首先是线下猛如虎,线上惨不忍赌........ 问题的出处是: function change() { /*获取cpu*/ $.ajax({ url: "http://localhost:8 ...

  2. SSH开发模式——Struts2(第一小节)

    在制定了学习计划的学习过程中,我感觉学习还是很有效率的.很短的时间内,我便学习完了JavaWeb的连接池.DbUtils框架及其一些工具类的使用. 学无止境,学习这些知识还远远不够,所以,在接下来的时 ...

  3. python学习——字符串

    1)字符串解释 字符串是python中常用的数据类型我们可以使用" "或' '来创建字符串. 2)字符串操作 """访问字符串中的值"&qu ...

  4. Contour 学习笔记(一):使用 Contour 接管 Kubernetes 的南北流量

    原文链接:Contour 学习笔记(一):使用 Contour 接管 Kubernetes 的南北流量 在 Kubernetes 中运行大规模以 Web 为中心的工作负载,最关键的需求之一就是在 L7 ...

  5. FineReport - 项目连接Oracle数据库

    FineReport项目连接Oracle数据库 1:打开模板设计器,单击[服务器],选择[定义数据连接]: 2:单击[+],选择[JDBC]; 3:数据库选择[Oracle],驱动器选择[oracle ...

  6. chrome取消安全模式

    右键快捷方式,后面添加--disable-web-security --user-data-dir=E:\MyChromeDevUserData "D:\Program Files (x86 ...

  7. odoo12从零开始:二、个性化定制odoo12 之 创建数据库页面

    剧情回顾 上一文章,我们已经成功运行了odoo12,并访问localhost:8069看到如下界面: 我们还没有创建数据库,但是我们发现,数据库管理页面的logo是odoo,数据库页面全是英文的,对于 ...

  8. E-Explorer_2019牛客暑期多校训练营(第八场)

    题意 n个点,m条边,u,v,l,r表示点u到点v有一条边,且只有编号为\([l,r]\)的人能通过,问从点1到点n有哪些编号的人能通过 题解 先对\(l,r\)离散化,用第七场找中位数那题同样的形式 ...

  9. Atcoder/Topcoder 口胡记录

    Atcoder/Topcoder 理论 AC Atcoder的❌游戏示范 兴致勃勃地打开一场 AGC 看 A 题,先 WA 一发,然后花了一年时间 Fix. 看 B 题,啥玩意?这能求? 睡觉觉. e ...

  10. HDU 4607 Park Visit 树的最大直径

    题意: 莱克尔和她的朋友到公园玩,公园很大也很漂亮.公园包含n个景点通过n-1条边相连.克莱尔太累了,所以不能去参观所有点景点. 经过深思熟虑,她决定只访问其中的k个景点.她拿出地图发现所有景点的入口 ...