Nginx部署前端代码实现前后端分离
实现前后端分离,可以让前后端独立开发、独立部署、独立单测,双方通过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部署前端代码实现前后端分离的更多相关文章
- 通过nginx部署前端代码实现前后端分离
实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不 ...
- nginx+vue+uwsgi+django的前后端分离项目部署
Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...
- VUE开发(二)nginx配合vue来实现前后端分离部署
一.引言 由于本地是采用vue+spring boot实现的前后端分离项目,本机启动的时候先启动后场服务,再单独启动vue工程,然后可以实现全流程贯穿,但是我们要部署到服务器上的时候,一般都是打一个j ...
- centos7 部署vue项目(前后端分离、nginx)
一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...
- nginx配置反向代理解决前后端分离跨域问题
摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...
- SpringBoot电商项目实战 — 前后端分离后的优雅部署及Nginx部署实现
在如今的SpringBoot微服务项目中,前后端分离已成为业界标准使用方式,通过使用nginx等代理方式有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多 ...
- Nginx部署前后端分离服务
飘过... 一,安装Nginx 二,配置nginx 一般nginx配置文件在etc目录下 另,如何找nginx.conf配置文件: 在前后端分离端项目里,前端的代码会被打包成为纯静态文件.使用 Ngi ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- nginx 前后端分离 代理转发,解决跨域问题
场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...
随机推荐
- Android学习之Android studio篇-Android Studio快捷键总结(mac)
原文:http://blog.csdn.net/hudfang/article/details/52117065 符号代表键盘按键:⌘(command).⌥(option).⇧(shift).⇪(ca ...
- .NET对IO的基本操作集合
分享一下对IO的基本使用,很简单的东西,不需要记住,用的时候看一下就可以了. 个人对IO的使用很少,记录日志,保存一些数据,保存文件,其他的基本上很少用到,做商城类的项目应该会用到很多 1.先配置一下 ...
- Windows 上面优秀的工具软件推荐
Windows 上面优秀的工具软件推荐 一.下载软件 1.速盘 - 度盘神器 简介: 使百度网盘保持全速下载免受限速困扰! 下载: speedpan 2.http下载工具 百度网盘破解下载器:prox ...
- STM32通用定时器实现LED灯闪烁
刚才看了一下STM32通用定时器的教程,其实和51的定时器使用差不多.只是因为32的时钟更复杂,可操控的寄存器更多,所以写的时候可能更复杂. 使用通用定时器中断的一般步骤:1.使能定时器时钟 这个需要 ...
- 【转】【python】装饰器的原理
写在前面: 在开发OpenStack过程中,经常可以看到代码中的各种注解,自己也去查阅了资料,了解了这是python中的装饰器,因为弱类型的语言可以将函数当成返回值返回,这就是装饰器的原理. 虽然说知 ...
- HTTP Slow Attack测试工具SlowHTTPTest
HTTP Slow Attack测试工具SlowHTTPTest Slow Attack是HTTP常见的一种拒绝服务攻击方式.它通过消耗服务器的系统资源和连接数,导致Web服务器无法正常工作.常见 ...
- angularjs学习笔记2—运行phonecat项目
如果你去angularjs中文网看它的教程,你会发现一开始它提供了一个phonecat的引导项目,这个项目是angular官方给出的一个类似于demo的教程项目,并配有相应文档,按照这个项目并配合文档 ...
- 【推导】【NTT】hdu6061 RXD and functions(NTT)
题意:给定一个n次多项式f(x)的各项系数,让你求f(x-Σai)的各项系数. http://blog.csdn.net/v5zsq/article/details/76780053 推导才是最关键的 ...
- 【Miller-Rabin算法】
存个板子,应该是对的吧……没太试 http://www.cnblogs.com/Norlan/p/5350243.html Matrix67写的 根据wiki,取前9个素数当base的时候,long ...
- 【优先队列+贪心】POJ2431-Expedition
解题方法详见<挑战程序设计竞赛(第二版)>P74-75.注意首先要对加油站以位置为关键字快排,不要遗忘把终点视作一个加油量为0的加油站,否则最终只能到达终点前的加油站. /*优先队列*/ ...