【JS】Nginx从入门到实践（ 记一篇nginx 同一端口下部署多个vue项目）

前言

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。

【JS】Nginx从入门到实践（ 记一篇nginx 同一端口下部署多个vue项目）

2. Nginx 配置

nginx的目录位置
cd /usr/local/nginx/conf
vim nginx.conf

server {
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绝对是必修技能之一。

以上是 【JS】Nginx从入门到实践（ 记一篇nginx 同一端口下部署多个vue项目） 的全部内容， 来源链接： utcz.com/a/90400.html

回到顶部