码迷,mamicode.com
首页 > 其他好文 > 详细

谈谈渲染,玩玩nginx——前后端分离,转发请求到Tomcat的尝试

时间:2017-02-03 20:00:20      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:监听   term   import   exe   基于   test   ase   开始   new   

一、谈谈“渲染”

相信好多人都挺听过“渲染”这个词,但不清楚它是什么意思?前端开发以为这是后端的活儿,后端开发以为是前端的事儿,推着推着就不了了之。其实渲染很简单,不说概念,直接举例:

1、 后端渲染:以JSP为例,可以分成三步
a、编写标签或Java代码(可以称之为模板)
b、在JSP编译阶段被转换成Servlet编译为Servlet Class
c、执行编译后的代码,将响应(模板执行结果)返回给页面

优势:减少前端工作,前端只需要设计纯页面,其他的都由后端来做;

缺点:依赖于服务器端,增大服务器压力,前后端职责分工不明确;

应用场景:在页面不太多、渲染压力不大、服务器端能够承受范围内可以使用后端渲染。

2、 前端渲染:以基于JS的模板引擎为例
a、编写模板代码
b、通过模板引擎将模板转化为脚本语言,拼接在JS中(第一次拼接,以后使用缓存)
c、页面加载执行JS


优势:减少服务器压力,前后端职责可以很好地分开,后端只做Json数据接口,前端进行渲染;

缺点:前端渲染依赖于客户端,增大的前端压力,需要代理服务器、末班渲染引擎的支持;

应用场景:在前端页面较多,前端开发人员能力较强,需要前后端分离的场景可以使用前端渲染(前端渲染是趋势)。


二、谈谈nginx

1、谈谈为什么会用到nginx?

首先明确一件事,浏览器可以发出请求吗?可以!那我们为什么要用到服务器呢?因为我们的前端如果不依赖服务器,页面就只能访问本地资源而不能访问服务器上的资源,而我们的后台一定是写在服务器上的。所以举个例子,我们在使用Tomcat服务器时,就必须把前端资源架在Tomcat上,才能访问后台的servlet。如下图所示:

技术分享

所以当我们希望前后端分离时,前端的资源就不能放在Tomcat上面,那如何获得Tomcat的资源的?这就用到了nginx,如下图所示:

技术分享

2、谈谈nginx的反向代理

有反向代理必有正向代理,先谈谈正向代理:一般默认的代理都是正向代理,用户访问不了一个资源,然后通过代理服务器去访问这个资源,将响应带回给用户。关键在于用户知道自己访问的是其他服务器的资源,代理服务器不会掩饰URL

反向代理是,代理服务器也是在中间层,但是用户不知道自己访问的资源是其他服务器的资源,代理服务器会掩饰URL


3、谈谈如何使用nginx反向代理tomcat

(1)首先打开nginx,两种方式,一种是直接点击ngnix.exe,一种是使用命令行,cd到nginx目录下,start nginx,无报错即启动成功

技术分享


(2)启动成功后,如何验证,因为ngnix.conf核心配置文件默认配置监听80端口,所以浏览器打开localhost,看到如下显示:

技术分享


(3)下一步就是配置反向代理Tomcat,打开conf目录下的nginx.conf文件,主要看35行左右开始的代码,下面是我修改过的代码:

主要修改lacation属性,使所有的请求都被转发到http://localhost:8080的Tomcat服务器下处理:

技术分享

listen:是监听的端口,即用户访问nginx服务的端口

server_name:服务名,经过测试并不会影响到什么

location:定义资源类型与服务器中资源地址url的映射关系,可在/后面定义资源类型,可设置多个location

其中proxy_pass代表要反向代理的服务器资源url,只要资源类型匹配,在这个url下的子路径资源都可以访问到,

其中root代表本地的资源路径,同样只要资源类型匹配,这个路径下的子目录资源都可以被访问到,

一个location中只能配置一个root或proxy_pass。


(4)修改后ngnix.conf文件后,使用nginx -s reload指令,重启ngnix,如果没有报错即重启成功

技术分享


(5)发出请求,获得Json,url显示依然是80端口的资源,即我们说的反向代理的特点,掩饰url,效果如下图所示:

技术分享

事实上,nginx是将请求转发到Tomcat服务器,是8080端口下的资源,如下图所示:

技术分享

(6)如果不光有Tomcat服务器的资源,那么就需要定义多个location,比如,jsp资源请求就转发到Tomcat服务器下,PHP、html、js、css等资源资源可以转到Apache服务器目录下,如下图配置示例:

[html] view plain copy
 技术分享技术分享
  1. location ~ \.jsp$ {    
  2.         proxy_pass http://localhost:8080;    
  3. }    
  4.             
  5. location ~ \.(html|js|css|png|gif)$ {    
  6.     root D:/software/developerTools/server/apache-tomcat-7.0.8/webapps/ROOT;    
  7. }   

ngnix的功能远不止于此,它的高效也同样被称道,有兴趣可以更深入了解!


谈谈渲染,玩玩nginx——前后端分离,转发请求到Tomcat的尝试

标签:监听   term   import   exe   基于   test   ase   开始   new   

原文地址:http://blog.csdn.net/lovestudy_girl/article/details/54848278

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!