Nginx配置多个服务共用80端口

最新推荐文章于 2025-10-12 23:12:52 发布

原创最新推荐文章于 2025-10-12 23:12:52 发布 · 6.1k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍如何通过Nginx的代理转发功能实现在同一台服务器上多个服务共用80端口的方法，详细解释了如何配置Nginx以支持vue.msg.com和react.msg.com两个二级域名分别访问不同的项目。

对于Web而已，80端口和443端口是十分重要的，原则上需要输入http://domain.com:80才可以浏览网页的，但由于默认端口是80，所以‘:80’可以忽略。同理对于https的443端口也一样。

随着服务器性能的提升和业务的需求，一台服务器上往往会同时有多个服务，这些服务都希望监听80端口，比如有vue.msg.com和react.msg.com。这时候我们可以使用nginx的代理转发功能帮我们实现共用80端口的需求。

http

首先我们先在两个空闲的端口上分别部署项目（非80，假设是8080和8081），nginx.conf配置如下：

$ vim /ect/nginx/nginx.conf

// nginx.conf
# vue项目配置
server {
    listen       8080;
    root         /web/vue-base-demo/dist/;
    index        index.html;
    location / {
        try_files $uri $uri/ /index.html; # 路由模式history的修改
    }
}

# react项目配置
server {
    listen       8081;
    root         /web/react-base-demo/build;
    index        index.html;
    location / {}
}

上面就是常规的配置，紧接着如果已经做好域名解析，希望vue.msg.com打开vue项目，react.msg.com打开react项目。我们需要再做两个代理，如下:

// nginx.conf
# nginx 80端口配置 （监听vue二级域名）
server {
    listen  80;
    server_name     vue.msg.com;
    location / {
        proxy_pass      http://localhost:8080; # 转发
    }
}

# nginx 80端口配置 （监听react二级域名）
server {
    listen  80;
    server_name     react.msg.com;
    location / {
        proxy_pass      http://localhost:8081; # 转发
    }
}

nginx如果检测到vue.msg.com的请求，将原样转发请求到本机的8080端口，如果检测到的是react.msg.com请求，也会将请求转发到8081端口。

这样nginx对外就有四个服务，我们只需要公布80端口的就可以了，这样就实现了多个服务共用80端口。