通过nginx部署前端代码实现前后端分离

实现前后端分离,可以让前后端独立开发、独立部署、独立单测,双方通过JSON进行数据交互。

对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境;对于后端开发人员来说 ,也不用在需要往JSP页面注入数据。

通过nginx来部署前端代码,可以帮助前端实现以下基本需求:

1、请求转发,解决请求跨域的问题

server {

listen       7777;

location /{

root   /Users/xiaoyun/git/someproject/dist;

}

location /api/v1{

proxy_set_header Host api.yourhost.com;

proxy_pass http://api.yourhost.com/api/v1/;

}

location /api/v2{

proxy_pass  http://api.yourhost.com/new;

}

}

以上是一段nginx配置参考:

listen    nginx服务端口号

location  /    设置默认根目录所访问的本地代码路径,这里还可以设置默认主页index

proxy_pass   请求转发,可以配置多个,从上至下进行匹配

以第一个配置为例,即所有本地以/api/v1开头的请求都会转发至对应线上服务器,

例如  http://localhost:7777/api/v1/getConfig 则会自动转发自 http://api.yourhost.com/api/v1/getConfig

另外,还需要注意的是,proxy_pass配置的路径如果是以/结尾,如上面的配置v1,那么此时路径为相对路径,否则为绝对路径

例如 v2的转发配置:

如果请求 http://localhost:7777/api/v1/user/list   则会转发自 http://api.yourhost.com/new/user/list ,不会带有原路径的 /api/v2

2、gzip请求压缩

网站开启gzip压缩,不仅能够节省带宽,也能够快速响应用户的访问



http{

gzip  on;

gzip_proxied any;

gzip_min_length  1024;

gzip_buffers     4 8k;

gzip_comp_level 3;

gzip_types       text/plain text/css application/x-javascript application/javascript application/xml application/json;

}



以下为各项配置作用:

gzip on;      (启用 gzip 压缩功能)

gzip_proxied any;  (nginx 做前端代理时启用该选项,表示无论后端服务器的headers头返回什么信息,都无条件启用压缩)

gzip_min_length  1024; (最小压缩的页面,如果页面过于小,可能会越压越大,这里规定大于1K的页面才启用压缩)

gzip_buffers     4 8k; (设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流)

gzip_comp_level 3; (压缩级别,1压缩比最小处理速度最快,9压缩比最大但处理最慢,同时也最消耗CPU,一般设置为3就可以了)

gzip_types       text/plain text/css application/x-javascript application/javascript application/xml application/json; (什么类型的页面或文档启用压缩)

时间: 2024-10-03 22:09:35

通过nginx部署前端代码实现前后端分离的相关文章

nginx配置反向代理解决前后端分离跨域问题

摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen 80; server_name your.domain.name; location / { # 把跟路径下的请求转发给前端工具链(如gulp)打开的开发服务器 # 如果是产品环境,则使用root等指令配置为静态文件服务器 proxy_pass http://localhost:5000/; } location /api/ { # 把 /api 路径下的请求转发给真正的后端服务器

前后端分离实践(一)

前言 最近这一段时间由于Nodejs的逐渐成熟和日趋稳定,越来越多的公司中的前端团队开始尝试使用Nodejs来练一下手,尝一尝鲜. 一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来,也有一些公司将NodeJS作为前后端分离的一个解决方案去施行.而像淘宝网这类的大型网站也很早的完成了前后端的分离,给我们这样的后来者提供了宝贵的经验. 同样,我们的大网盘团队也早在去年早早就开始了紧锣密布的准备工作,这目前工作也做的差不多了,现在我就来总结一下在过程中遇到的坑点以

SpringBoot电商项目实战 — 前后端分离后的优雅部署及Nginx部署实现

在如今的SpringBoot微服务项目中,前后端分离已成为业界标准使用方式,通过使用nginx等代理方式有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多个客户展现端,例如:web端,安卓app,IOSapp,微信小程序等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路. image 上图是简单的分布式微服务开发及前后端分离的示意图.展现层也就是所谓的前端(客户可直观看到的),比如电商项目前端包含:app(安卓和IOS).微信小程序.PC商

【前端经典面试题】前后端分离(说一说你理解的前后端分离?)

前言:昨晚面试遇到了这个问题,既然遇到了,找些资料来一起做个总结吧. 1.对前后端分离的误解  在回答这个问题的时候不要钻到某个具体的技术 ,或者某个具体的框架上面→比如ajax异步请求.vue或react等组件化的开发框架.再或者rest接口规范.API接口数据约定等.从某个具体的技术切入来回答对前后端分离的理解本身就是一种局限的看法,所以在回答这个问题的时候应该从以下几个方面展开. 2.为什么要分离?  在以往的很长一段时间里,后端开发才是开发团队里的核心,前端开发往往仅由一小撮人甚至交给后

前后端分离和模块化

前后端分离和模块化-58到家微信首页重构之路 微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看. 58到家全新首页提出重构主要是为了解决以下问题: 每个城市开通的服务项目不同,有些内容是写死在tpl中,维护非常头疼: 开通新服务或者某些UI调整(比如更换服务项的图片造成更改雪碧图)时必须走代码上线流程: 原有的前端切图.后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐: 原有配置后台操作复杂,且可配置细节不完善: 首页加载速度太慢,用户体验

浅谈前后端分离。

在传统的web应用开发中,大多数的工作人员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端. 在前后端不分离的时代,在项目开发阶段,前端人员负责编写HTML页,后端人员负责写接口,前端人员调试页面动态数据都需要后端人员的配合,不能单独调试,耗时耗力.前端把前后端代码存放于同一个代码库中,甚至是同一工程目录下.页面中还夹杂着后端代码.前后端工程师进行开发时,都必须把整个项目导入到开发工具中. 前后端不分离

为什么要前后端分离?前后端分离的好处和坏处是什么?

刚入职新公司,新公司的前端技术栈除了支付宝小程序,其他项目都是jquery+html 写的.领导想让我推一下vue+vue-cli+webpack,前后端项目的想法,我正在做整理资料,我便想到了前后端分离项目的必然性的特点,和传统技术的优势: 总结的最完美的一句话我觉得应该是前后端分离的主要概念就是:后台只需提供API接口,前端调用AJAX实现数据呈现!!!完美啊.后台只注重算法,向前端提高接口,前端根据接口显示数据,只需要处理前端的业务逻辑,界面优化等等 我刚上手的第一个前后端项目的时候,后台

关于大型网站技术演进的思考(十五)--网站静态化处理—前后端分离—中(7)

上篇里我讲到了一种前后端分离方案,这套方案放到服务端开发人员面前比放在web前端开发人员面前或许得到的掌声会更多,我想很多资深前端工程师看到这样的技术方案可能会有种说不出来的矛盾心情,当我的工作逐渐走向越来越专业化的前端开发后,我就时常被这套前后端分离方案所困惑,最近我终于明白了这个困惑的本源在哪里了,那就是这套前后端分离方案其实是服务端驱动的前后端分离方案,它的实现手段又是从服务端的MVC架构体系演化而来,因此该方案最大的问题就是它并没有从根本上改变web前端从属于服务端的被动局面.那么问题来

我们为什么要尝试前后端分离

这不是一篇纯技术文章,而是一篇分享我个人在前后端分离路上收获的点点滴滴的文章,以此来为准备尝试前后端分离或者想了解前后端分离的童鞋做一个大体的讲解. 尝试与改变 如果你没有尝试过前后端分离的工作流程,那么可以先试想一下这样的流程改变: 把流程从 PM:“我要这个功能”后端:“这个先找前端做个模板”前端:“模板做完了”后端:“我来对接一下,这里样式不对”前端:“我改完了”后端:“功能交付”PM:“春节要加这个活动”后端:“这个先找前端改个模板”前端:“模板做完了”后端:“我来对接一下,这里样式不对