nginx初识
什么是nginx？为什么要用这个？为什么要用反向代理？
Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器。
总的来说就是可以把你的纯前端项目放到服务器上，让外界访问。
什么是反向代理？
如下图
-
正向代理
-
反向代理
反向代理对比正向代理的优势是什么？
看图可以知道，正向代理是收到所有请求然后直接交给网络。 但是反向代理是代理服务器，可以根据你的请求，找到想要的服务器。好处是什么类型请求找到什么类型的服务器。
Nginx可以根据不同的正则匹配，采取不同的转发策略，比如图片文件结尾的走文件服务器，动态页面走web服务器，只要你正则写的没问题，又有相对应的服务器解决方案，你就可以随心所欲的玩。 并且Nginx对返回结果进行错误页跳转，异常判断等。如果被分发的服务器存在异常，他可以将请求重新转发给另外一台服务器，然后自动去除异常服务器。
使用场景
前端的vue2.0项目(vue-cli4x搭建)，打包后部署到服务器，提供独立的服务。后端也是独立的服务。
最终目标：外网能正常访问多个项目。
使用步骤
-
下载nginx。在window系统服务器上下载安装该软件。
-
打包上传项目。将vue项目利用脚手架打包
npm run build,将生成的dist文件夹里面的所有内容放进nginx目录下的html文件夹里面。一个项目放一个文件夹，例如匹配/manager路径的放manager文件夹，/invoice路径的放invoice文件夹，再在配置文件nginx.conf里面修改其对应关系即可。
-
nginx配置。nginx目录下--->conf文件夹--->nginx.conf文件
配置文件大体结构如下：
... #全局块：配置影响nginx全局的指令 events { #events块：配置影响nginx服务器或与用户的网络连接 ... } http #http块：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置 { ... #http全局块 server #server块：配置虚拟主机的相关参数，一个http中可以有多个server { ... #server全局块 location [PATTERN] #location块：配置请求的路由，以及各种页面的处理情况 { ... } location [PATTERN] { ... } } server { ... } ... #http全局块 }菜鸟教程上面的配置项解释挺清晰的，www.runoob.com/w3cnote/ngi…
一些重点字段：
location： 配置请求的路由，以及各种页面的处理情况。
server { keepalive_requests 120; #单连接请求上限次数。 listen 4545; #监听端口 server_name 127.0.0.1; #监听地址 #location后面接正则，对该正则页面进行处理，~ 为区分大小写，~* 为不区分大小写 location ~*^.+$ { #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。 #root path; #根目录 root html; #根目录，项目文件放的地方，默认从nginx.exe所在目录开始找的，所以写html文件夹即可 index index.html #设置默认页，项目打包后，会有个index.html try_files $uri $uri/ /index.html; #后端支持 hash 变为 history 的关键代码，这个不是很懂，应该是支持vue项目路由的字段。 proxy_pass http://mysvr; #请求转向mysvr 定义的服务器列表，proxy_pass: 请求转向该键值 deny 127.0.0.1; #拒绝的ip allow 172.18.5.54; #允许的ip } } -
配置完需要重新启动nginx,完全结束nginx服务的方法有多种，我用的是任务管理器结束掉所有nginx服务。然后点击nginx.exe文件重启。或者写个脚本。
-
重启完可以看下logs文件夹下面的error.log是否有报错，有错改错。
注意事项
- 找运维开一下外网可用端口(需要外网能访问的话，有些公司是有限制的)。
- 防火墙设置，端口不放开的话一般是拦截了的。
- 需要域名，使用域名才能外网访问，ip地址只能内网使用，接口也是。
nginx相关资源地址
源码：trac.nginx.org/nginx/brows…
参考链接：
-
juejin.cn/post/684490… （Nginx 从入门到实践，万字详解）
同一域名同一端口下配置多个VUE项目
参考链接：www.cnblogs.com/sxdtzhaoxin…
步骤
- 将项目都使用vue-cli打包
- 将项目放入到服务器的nginx中，项目1--->html文件夹，项目2--->html/manager文件夹
- 修改配置文件
server {
listen 8009;
server_name aaa.xxx.com;
location / {
root html;
index index.html;
try_files $uri $uri/ /index.html; #后端支持 hash 变为 history 的关键代码
}
location /manager {
alias html/manager;
index index.html;
try_files $uri $uri/ /manager/index.html; #后端支持 hash 变为 history 的关键代码
}
}
注意：location后面的会拼接到uri中去，第二个location中是alias，不是很懂是什么东西。
- 重启nginx
- 访问aaa.xxx.com:8009/manager即可访问到第二个项目了
仅个人东拼西凑的理解，没有系统认知nginx。
