在部署代码到生产环境时会用到Nginx(反向代理服务器),一般由运维和后端部署处理。作为前端人员也想了解下Nginx的工作机制，下面记录下对Nginx的简单学习成果。首先了解一下代理服务器与反向代理服务器：

代理服务器: 一般是指局域网内部的机器通过代理服务器发送请求到互联网上的服务器,代理服务器一般作用在客户端。应用比如: GoAgent | 翻墙神器
反向代理服务器：在服务器端接受客户端的请求,然后把请求分发给具体的服务器进行处理,然后再将服务器的响应结果反馈给客户端。Nginx就是其中的一种反向代理服务器软件。

下面是总的学习思维导图：

Nginx的特点

跨平台---Nginx 可以在大多数 Unix Linux OS 上编译运行，并有 Windows 移植版
配置简单易上手
非阻塞、高并发连接---非阻塞、高并发连接:数据复制时,磁盘/O的第一阶段是非阻塞的。官方测试能够支撑5万并发连接,在实际生产环境中跑到2~3万并发连接数.
内存消耗小---处理大并发的情求内存消耗非常小。在3万并发连接下，开启的10个Ng×进程才消耗150M内存(15M*10=150M)。
成本低---开源软件
节省宽带---支持 GZIP压缩,可以添加浏览器本地缓存的Header头
内置的健康检查功能---如果Nginx Proxy后端的某台Web服务器容机了,不会影响前端访问
稳定性高---用于反向代理,宕机的概率微乎其微

配置

下载Nginx 2.将前端项目资源文件放置在下载下来的Nginx根目录如图：双击nginx.exe即启动了Nginx服务,查看nginx.config里面的server_name（服务器名称）+listen（端口号），网页地址栏输入服务器名称和端口号，就会打开配置好的页面

3.根据需求修改conf文件下的nginx.config配置即可

下面简单学习2种资源的配置：

一、静态资源配置

http {
    proxy_intercept_errors on; #启用Nginx自定义的错误页面
    
    #一个server就是一个服务器
    # No1: 静态资源配置
    server {
        listen       8089;
        server_name  localhost;
        location / { #访问路径的配置
            root   myWeb; #根目录的前端web项目文件
            index  index.html index.htm; #默认的首页---myWeb文件里的index文件
        }

        error_page  404              /404.html;
        location = /404.html {
                root myWeb;
        }
    }
}

修改nginx.config文件后需要重启Nginx：打开命令提示符cmd,进入nginx的文件目录，执行nginx -s reload, 如果不是以管理员身份操作会报错：

解决办法是用管理员身份运行、再重新执行nginx -s reload：

启动后打开页面如下：

二、动态资源配置（搭建node服务集群）

简单搭建node服务 npm init npm i express 项目文件如下： app.js文件： node app.js启动服务 http://localhost:3000/

var express = require('express')
var app = express()

app.get('/', function(req, res) {
	res.send('是Node 默认 页面')
})

// 服务报错模拟
app.get('/sub', function(req, res) {
	res.end(8/0)
})

// 集群
app.get('/userInfo', function(req, res) {
	res.send({name: '服务器1'})
})

app.use("/static", express.static("public"));

app.listen(3000, function() {
	console.log('启动Node监听了')
})

app2.js文件：node app2.js启动服务 http://localhost:3002/

var express = require('express')
var app = express()

app.get('/', function(req, res) {
	res.send('是Node2 默认 页面')
})

// 服务报错模拟
app.get('/sub', function(req, res) {
	res.end(8/0)
})

// 集群
app.get('/userInfo', function(req, res) {
	res.send({name: '服务器2'})
})

app.use("/static", express.static("public"));

app.listen(3002, function() {
	console.log('启动Node2监听了')
})

nginx.config配置：

http {
    proxy_intercept_errors on; #启用Nginx自定义的错误页面
    #服务器的集群
    upstream netListName.com { # netListName.com服务集群的名字
       # 192.168.20.88:3000 服务器地址；weight 权重越大，分配的概率越大
        server 192.168.20.88:3000 weight=2; 
        server 192.168.20.88:3002 weight=1;
    }
    # No2: node动态资源配置
    server {
        listen       8086;
        server_name  localhost;

        location / { #访问路径的配置
            proxy_pass http://netListName.com; #node服务集群的名称
            # proxy_pass http://localhost:3000; #node服务的地址
        }

        # 动态网站配置的图片等静态资源需要指明路径
	location ~ .*\.(jpg|jepg|gif|css|png|ico)?$ {
            root myWeb;
            # 设置限制访问资源
            # none 表示允许地址栏输入访问；blocked允许cmd命令窗口访问；允许192.168.20.88:8086域名和端口号下访问
            valid_referers none blocked 192.168.20.88:8086;
            if ($invalid_referer) {
                return 403;
            }
        }
        
	# 访问静态资源出错时的提示页面
        error_page  404              /404.html;
		location = /404.html {
			root myWeb;
		}

        # redirect server error pages to the static page /50x.html
        # 访问的服务器出错时的提示页面
        error_page   500 502 503 504  /500.html;
        location = /500.html {
            root   error;
        }
    }
}

在真实使用场景中，是需要配合Linux vim等来操作的，具体还不会，后面再去学习了解。。。

前端学习nginx

Nginx的特点

配置

一、静态资源配置

二、动态资源配置（搭建node服务集群）