前言
Nginx是什么
Nginx (engine x)是一个应用c语言开发的轻量级、高性能的http及反向代理服务器。由俄罗斯的程序设计师Igor Sysoev所开发，官网测试nginx可能支撑持5万并发链接，并且cpu、内存等资源耗费却非常低，运行十分稳固。nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。Nginx能做什么
- HTTP服务器（动静拆散）
Nginx能够作为动态页面的 web 服务器，同时还反对 CGI 协定的动静语言，比方 perl、php等。 示例（ mac本地配置 ）： server { listen 8080; server_name 127.0.0.1; # 拜访http://127.0.0.1:8080/assets # 相当于拜访 # http://127.0.0.1:8080/data/huodong/src/assets location /assets { root /data/huodong/src/ autoindex on; # 列出目录文件列表 } # 拜访127.0.0.1:8080，则加载huodong我的项目 location / { index index.html; root /data/huodong/dist/; } } - 反向代理
反向代理，其实客户端对代理是无感知的，因为客户端不须要任何配置就能够拜访，咱们只须要将申请发送到反向代理服务器，由反向代理服务器去抉择指标服务器获取数据后，在返回给客户端，此时反向代理服务器和指标服务器对外就是一个服务器，裸露的是代理服务器地址，暗藏了实在服务器IP地址。示例（ mac本地配置 ）： 应用 nginx 反向代理，拜访 www.huodong.com 间接跳转到 127.0.0.1:8080 1.本机需配置hosts： sudo vi /etc/hosts 192.168.1.106 www.huodong.com 2. nginx配置 server { listen 80; server_name www.huodong.com; location / { # 192.168.1.106 为本机ip，拜访www.huodong.com的时候，通过proxy_pass 代理到了本机ip的80端口上 proxy_pass http://192.168.1.106; index index.html index.htm; } }- 负载平衡
负载平衡也是 Nginx罕用的一个性能，当一台服务器的单位工夫内的访问量越大时，服务器压力就越大，大到超过本身承受能力时，服务器就会解体。为了防止服务器解体，让用户有更好的体验，咱们通过负载平衡的形式来分担服务器压力。保障服务器集群中的每个服务器压力趋于均衡，分担了服务器压力，防止了服务器解体的状况。负载平衡配置个别都须要同时配置反向代理，通过反向代理跳转到负载平衡。示例（ mac本地配置 ）： 应用 nginx 配置负载平衡，次要用到了 upstream、proxy_pass， 负载平衡调配策略次要有以下几种： 1.轮询 upstream upstream_huodong { server 192.168.1.106:8001; server 192.168.1.106:8002; } 2.权重 upstream upstream_huodong { server 192.168.1.106:8001 weight=1; server 192.168.1.106:8002 weight=2; } 3.iphash upstream upstream_huodong { iphash; server 192.168.1.106:8001 weight=1; server 192.168.1.106:8002 weight=2; } 4.起码连贯(least_conn) upstream upstream_huodong { least_conn; server 192.168.1.106:8001 weight=1; server 192.168.1.106:8002 weight=2; } 5.响应工夫 (fair) upstream upstream_huodong { server 192.168.1.106:8001 weight=1; server 192.168.1.106:8002 weight=2; fair; } 拜访 www.huodong.com，nginx会把咱们的申请摊派到多个服务上 1.本机需配置hosts： sudo vi /etc/hosts 192.168.1.106 www.huodong.com 2.在本地新建测试目录文件 mkdir huodong1 touch index.html (I im huodong1) mkdir huodong2 touch index.html (I im huodong2) 3. nginx配置 server { listen 80; server_name www.huodong.com; localtion / { # http://upstream_huodong 为下面的调配策略 proxy_pass http://upstream_huodong; } } server { listen 8001; server_name localhost; localtion / { index index.html; root /data/huodong1/; } } server { listen 8002; server_name localhost; localtion / { index index.html; root /data/huodong2/; } } 这样拜访www.huodong.com，nginx就会依据咱们的调配策略把申请别离打到2个服务下面。- 正向代理
正向代理服务器位于客户端和服务器之间，为了向服务器获取数据，客户端要向代理服务器发送一个申请，并指定指标服务器，代理服务器将指标服务器返回的数据转交给客户端。注释
应用Nginx在同一端口下部署多个vue我的项目
比方咱们一个域名端口下有多个我的项目，都是流动相干的，不必每个我的项目都独自起一个端口。示例：
http://localhost:80/huodong1 拜访 huodong1我的项目http://localhost:80/huodong2 拜访 huodong2我的项目##### 1. 我的项目配置
- huodong1
vue2.0 router.js配置 new Router({ routes, mode: 'history', base: '/huodng1' });vue.config.js配置 const cdnDomain = '/huodong1' module.exports = { publicPath: process.env.ENV === 'production' ? cdnDomain : '/' }- huodong2
vue3.0 router.js配置 createRouter({ history: createWebHistory('/huodong2'), routes })vue.config.js配置 const cdnDomain = '/huodong1' module.exports = { publicPath: process.env.ENV === 'production' ? cdnDomain : '/' }打包实现后，查看dist文件下，对应资源目录是否正确增加huodong1/huodong2。
2. Nginx 配置
nginx的目录地位 cd /usr/local/nginx/confvim nginx.confserver { listen 80; # 监听的端口号 server_name localhost; # ip 域名 location / { root html; index index.html index.htm; } location /huodong1/ { add_header Cache-Control no-cache; add_header Cache-Control private; # huodong1 服务器文件目录 # 应用alias时，开端必须加 '/'，否则找不到文件 alias /code/huodong1/dist/; # 这里是须要留神的，vue官网给的是 # try_files $uri $uri/ /index.html; # 这样写刷新的时候加载不到咱们的动态资源 try_files $uri $uri/ /huodong1/index.html; } location /huodong2/ { add_header Cache-Control no-cache; add_header Cache-Control private; alias /code/huodong2/dist/; #huodong2 服务器文件目录 try_files $uri $uri/ /huodong2/index.html; } }nginx -s reload 重启nginx这样就功败垂成了！总结
上述只是通过一个日常开发的小例子，心愿可能引起宽广前端童靴对Niginx的趣味。事实上，Nginx不仅仅局限于这些渺小的工作，在理论生产中作用其实更加微小。对于有志于“大前端”的童靴，理解和相熟Nginx相对是必修技能之一。
本文由博客群发一文多发等经营工具平台 OpenWrite 公布