nginx一个端口启动两个项目

两个项目通过nginx一个配置,一个端口去进行启动

1.通过nginx给项目加前缀

通过重写的方式去给项目加前缀,如第一个项目的在访问时,是/project1/html页面

那可以在配置中加上

local ~^/p1/project/* {

  rewrite /p1/project/(.*) /project/$1 break;

  root /Users/projectLocaltion

}

这种配置就相当于在你去访问第一个项目的页面时,需要在访问路径前加上/p1才可以在网页上访问到,而在访问后段资源路径时,会通过重写的方式,找到新的地址下的资源路径

通过这种方式来进行页面访问,如现在地下有两个项目,要么配置就是

local ~^/p1/project1/* {

  rewrite /p1/project1/(.*) /project1/$1 break;

  root /Users/projectLocaltion1

}

local ~^/p2/project2/* {

  rewrite /p2/project/(.*) /projec2t/$1 break;

  root /Users/projectLocaltion2

}

通过重写的方式去进行重定向

但是这种方式无法去更改js的引入,除非在项目中去更改js的原码路径

如果js有两个不同路径

如/ant/*引入的js是第一个项目下的

/and/*引入的js是第二个项目下的

那么就可以在nginx中写两个localion配置项去进行js的引入

location ~ ^/ant/.*\.(js|css|png|jpg|woff|woff2|ttf|otf|eot|svg|map|gif|swf|xls|xlsx|pdf|json|zip|msi|xml)$ { root /Users/ant/; rewrite ^/(.*)$ /$1 break; }

location ~ ^/and/.*\.(js|css|png|jpg|woff|woff2|ttf|otf|eot|svg|map|gif|swf|xls|xlsx|pdf|json|zip|msi|xml)$ { root /Users/and/; rewrite ^/(.*)$ /$1 break; }

Nginx 是一款高性能的 Web 服务器,同时也是一款反向代理服务器,支持负载均衡、动静分离、HTTP 缓存等多种功能。在实际项目中,我们经常需要部署多个 Vue 项目,利用 Nginx 可以简单地实现这个功能。 在部署两个 Vue 项目时,我们需要在服务器上分别部署两个不同的 Vue 项目,并分别启动它们的服务端口。同时,在 Nginx 的配置文件中添加两个 server 配置,分别配置两个 Vue 项目所使用的域名或者 IP 地址、端口和访问路径等相关信息,如下: ``` server { listen 80; server_name vueproject1.com; location / { proxy_pass http://localhost:3000; ... } } server { listen 80; server_name vueproject2.com; location / { proxy_pass http://localhost:4000; ... } } ``` 以上面的配置为例,我们可以看到,在 Nginx 的配置文件中,我们针对这两个 Vue 项目分别配置了 server 块,代表了两个不同的虚拟主机。每个 server 块中包含了监听的端口和域名信息,以及访问路径的配置,其中 location / 表示默认的访问路径。 对于每个 server 块中的 location 配置,我们可以使用 proxy_pass 参数来指定要代理的服务地址,即代表 Vue 项目服务的端口号。这样就可以在 Nginx 中实现两个 Vue 项目的反向代理和访问了。 最后,需要注意的是,在 Nginx 的配置文件修改完成后,需要重新加载配置,使其生效。可以使用 nginx -s reload 命令来重新加载 Nginx 的配置文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值