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

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

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

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

server {
listen ;
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/v2/user/list  则会转发自 http://api.yourhost.com/new/user/list ,不会带有原路径的 /api/v2

2、gzip请求压缩

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

http{
gzip on;
gzip_proxied any;
gzip_min_length ;
gzip_buffers 8k;
gzip_comp_level ;
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; (什么类型的页面或文档启用压缩)

Nginx部署前端代码实现前后端分离的更多相关文章

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

    实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不 ...

  2. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  3. VUE开发(二)nginx配合vue来实现前后端分离部署

    一.引言 由于本地是采用vue+spring boot实现的前后端分离项目,本机启动的时候先启动后场服务,再单独启动vue工程,然后可以实现全流程贯穿,但是我们要部署到服务器上的时候,一般都是打一个j ...

  4. centos7 部署vue项目(前后端分离、nginx)

    一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...

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

    摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...

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

    在如今的SpringBoot微服务项目中,前后端分离已成为业界标准使用方式,通过使用nginx等代理方式有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多 ...

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

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

  8. 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离

    近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...

  9. nginx 前后端分离 代理转发,解决跨域问题

    场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...

随机推荐

  1. 机器学习方法:回归(一):线性回归Linear regression

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 开一个机器学习方法科普系列:做基础回顾之用,学而时习之:也拿出来与大家分享.数学水平有限,只求易懂,学习与工 ...

  2. 最佳 WordPress 静态缓存插件 WP Super Cache 安装和使用(转)

    WP Super Cache 是 WordPress 官方开发人员 Donncha开发,是当前最高效也是最灵活的 WordPress 静态缓存插件.它把整个网页直接生成 HTML 文件,这样 Web ...

  3. poj2104 主席树 区间K大 在线 无修改

    关于主席树: 主席树(Chairman Tree)是一种离线数据结构,使用函数式线段树维护每一时刻离散之后的数字出现的次数,由于各历史版本的线段树结构一致,可以相减得出区间信息,即该区间内出现的数字和 ...

  4. jquery中的done和always解决ajax问题

    昨天写一个跨域请求json数据的实例.遇到传值问题,尝试了各种方式都不行,后来发现,同一个地址,同一个ip请求次数频繁传值相同的话,ajax会默认跟一个&?时间戳,这就导致我传过去的值是错误的 ...

  5. Linux(CentOS)下的JDK的安装和环境配置

    下载对应版本JDK,如jdk-6u45-linux-i586-rpm.bin添加执行权限:#chmod +x jdk-6u45-linux-i586-rpm.bin安装:#./jdk-6u45-lin ...

  6. python多线程编程(6): 队列同步

    原文请看:http://www.cnblogs.com/holbrook/archive/2012/03/15/2398060.html 前面介绍了互斥锁和条件变量解决线程间的同步问题,并使用条件变量 ...

  7. 2017CCPC 杭州 J. Master of GCD【差分标记/线段树/GCD】

    给你一个n个初始元素都为1的序列和m个询问q. 询问格式为:l r x(x为2or3) 最后求1~n所有数的GCD GCD:把每个数分别分解质因数,再把各数中的全部公有质因数提取出来连乘,所得的积就是 ...

  8. CodeForces 738D Sea Battle

    抽屉原理. 先统计最多有$sum$个船可以放,假设打了$sum-a$枪都没打中$a$个船中的任意一个,那么再打$1$枪必中. #pragma comment(linker, "/STACK: ...

  9. springMVC中Unknown return value type: java.lang.Integer(解决)

    controller层返回值类型为Integer,然而报 Unknown return value type: java.lang.Integer 这个错误,500错误 解决办法:在此方法上写上注解@ ...

  10. 1.L 查询关键字 HEXLOC

    Take the compile listing for the program that has either OFFSET or LIST option selected. Use the OFF ...