1.什么是nginx？为什么要用这个？为什么要用反向代理？
Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器。
-
什么是反向代理？
看图 
-
反向代理对比正向代理的优势是什么？
看图可以知道，正向代理是收到所有请求然后直接交给网络。
但是反向代理是代理服务器，可以根据你的请求，找到想要的服务器。好处是什么类型请求找到什么类型的服务器。
Nginx可以根据不同的正则匹配，采取不同的转发策略，比如图片文件结尾的走文件服务器，动态页面走web服务器，只要你正则写的没问题，又有相对应的服务器解决方案，你就可以随心所欲的玩。
并且Nginx对返回结果进行错误页跳转，异常判断等。如果被分发的服务器存在异常，他可以将请求重新转发给另外一台服务器，然后自动去除异常服务器。
2.使用场景
前端的vue2.0项目(vue-cli4x搭建)，打包后部署到服务器，提供独立的服务。后端也是独立的服务。
最终目标，外网能正常访问该项目。
3.使用步骤
- 登录上服务器，服务器是window系统。
- 下载nginx
- 将项目放进html文件夹里面。
- 对nginx进行配置
- conf文件夹的nginx.conf文件有nginx的默认配置
-
大体结构如下：
... #全局块：配置影响nginx全局的指令 events { #events块：配置影响nginx服务器或与用户的网络连接 ... } http #http块：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置 { ... #http全局块 server #server块：配置虚拟主机的相关参数，一个http中可以有多个server { ... #server全局块 location [PATTERN] #location块：配置请求的路由，以及各种页面的处理情况 { ... } location [PATTERN] { ... } } server { ... } ... #http全局块 } - 菜鸟教程上面的配置项解释挺清晰的，https://www.runoob.com/w3cnote/nginx-setup-intro.html
- 一些重点字段：
location：配置请求的路由，以及各种页面的处理情况。-
#location后面接正则，对该正则页面进行处理，~ 为区分大小写，~* 为不区分大小写
location ~*^.+$ { root html; #根目录，项目文件放的地方，默认从nginx.exe所在目录开始找的，所以谢html文件夹即可 index index.html #设置默认页，项目打包后，会有个index.html
try_files $uri $uri/ /index.html; #后端支持 hash 变为 history 的关键代码，这个不是很懂，应该是支持vue项目路由的字段。 #proxy_pass http://xxxxxxxx; #请求转向xxxxxxxx 定义的服务器列表，这个没有用到 #deny 127.0.0.1; #拒绝的ip #allow 172.18.5.54; #允许的ip }
-
- listen：监听的端口号
- server_name: 监听的地址
- proxy_pass: 请求转向该键值，没有用到。
- 配置完需要重新启动nginx,完全结束nginx服务的方法有多种，我用的是任务管理器结束掉所有nginx服务。然后点击nginx.exe文件重启。
- 重启完可以看下logs文件夹下面的error.log是否有报错，有错改错。
- 外网可以访问
4.注意事项
- 需要外网能访问的话，有些公司是由限制的，找运维开一下外网可用端口。
- 防火墙设置，端口不放开的话一般是拦截了的。
- 需要外网能访问的话，需要用到的是域名，ip地址只能内网使用，接口也是。
- 公司内网访问白屏问题，项目中的路由需要添加一个根路径，即path:'/',不然刷新后会出现空白页。
5.nginx相关地址