nginx

下载地址:http://nginx.org/en/download.html

nginx - 静态资源[html,css,javascript,图片,视频等]服务器[具备高性能的计算机]

tomcat服务器 - 可以作为静态资源服务器,作为java后端服务器[java应用程序]

网站的架构 - B/S Brower[浏览器]/Server[服务器]

客户端发送请求到服务器

服务器接收并且处理来自于客户端的请求

服务器端响应数据给客户端

应用场景

反向代理,正向代理

负载均衡

静态资源的服务器

为什么需要nginx

当发送一个请求到服务器的时候,比如www.taobao.com

实际上背后它会发送N条请求[其中静态资源占了大量的请求的]

如果静态资源和java-app如果全部部署在tomcat服务器上的话,那么必然会给tomcat服务器增加很多压力.

为了保证服务器tomcat[适合中小型企业,并发量不是特别大的]能够快速即时处理客户端请求,解决方案

纵向的优化 - 砸钱 - 购买性能更加高的服务器

横向的优化 - nginx服务器 + tomcat服务器 - 意味着项目需要分别去部署.前端项目部署在nginx服务器,后端项目部署在tomcat服务器 - 前后端分离.

启动nginx

进入到nginx的安装目录,执行
start nginx
或者
nginx.exe

打开浏览器输入http://localhost

停止nginx

nginx.exe -s stop

nginx.exe -s quit

stop是快速停止nginx，可能并不保存相关信息；quit是完整有序的停止nginx，并保存相关信息。

部署前端项目

nginx/html目录 - 前端项目部署的目录

前端项目直接复制到该目录下即可.

假设html部署了一个前端项目-oo/views/login.html

http://localhost/oo/views/login.html

前后端分离的体系

前端项目和后端项目肯定是单独进行部署的

web服务器

nginx服务器 - 静态资源服务器

tomcat服务器[中小型公司,免费,高并发不好200~400] - 静态资源服务器/后端程序代码的服务器[java]

servlet容器,jsp容器

jboss,jetty,weblogic服务器…

Easy Mock

https://mock.mengxuegu.com/login

伪造数据的 - 语法 - mockjs

success - success@@
{
"code": 200,
"msg": "操作成功",
"data|3": [{
 "id|+1": 1,
 "username": "@cname",
 "email": "@email",
}]
}

跨域问题

Access to XMLHttpRequest at ‘http://localhost:8081/boot/uuu' from origin ‘http://localhost' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

产生原因

不满足浏览器的同源策略.

协议

ip地址

端口号

只要有一个不一致,那么都会产生跨域问题.

ngnix - http://localhost:80

内置tomcat - http://localhost:8081

解决方案

使用@CrossOrigin - 允许跨域请求 - 不推荐
需要在ngnix中配置反向代理

正向代理和反向代理

客户端是非常清楚自己请求的服务器在哪里.但是就是请求不了.

服务器可以委托一个代理服务器

翻墙的过程 - 请求 - 代理服务器 - 目标服务器

正向代理代理的是客户端. 服务器端不知道客户端在哪里.

反向代理

比如: www.taobao.com - 背后肯定有N个服务为我们服务.

对于客户端而言,不知道服务器端到底是在哪里的. - 安全

反向代理代理的服务器端.

架构

client -> 前端服务器 ->反向代理服务器 ->后端服务器

client-> 前端/代理一台服务器 -> 后端服务器

反向代理的一个配置

配置文件是在nginx -conf/nginx.conf文件

location /bt {
    root   html;
    index  index.html index.htm;
    proxy_pass http://localhost:8081/boot;
    #  proxy_pass http://backserver/;
}

 $(function(){
   $.get('http://localhost/bt/uuu',null,function(res){
     console.log(res.data);
     let arr = res.data;
     let tbody = $("#tb");
     let str = "";
     for(let i = 0;i<arr.length;i++){
       str+="<tr>";
       str+="<td>"+arr[i].id+"</td>";
       str+="<td>"+arr[i].username+"</td>";
       str+="<td>"+arr[i].email+"</td>";
       str+="</tr>";
     }
     tbody.html(str);
   })
 })