同一个服务器上不同的域名跳往不同的前端项目页面,不显示端口号 ngnix根据不同域名跳转

在同一个服务器上，通过 Nginx 配置多个域名访问不同的前端项目页面，并隐藏端口号，是常见的部署需求。核心原理是利用 Nginx 的 ‌反向代理‌ 或 ‌静态资源根目录‌ 功能，根据请求的域名（server_name）将流量转发到不同的后端服务或项目目录。

以下是两种主流的实现方案：

方案一：前端项目为静态文件（推荐）

如果您的前端项目是构建后的静态文件（如 Vue、React、Angular 生成的 dist 目录），最简单高效的方式是让 Nginx 直接作为静态文件服务器，为每个域名指定不同的根目录。

‌准备项目文件‌：将每个前端项目的构建结果（如 project1/dist 和 project2/dist）上传到服务器的不同目录，例如 /var/www/project1 和 /var/www/project2。

‌配置 Nginx‌：编辑 Nginx 配置文件（通常为 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/ 下的独立文件），添加多个 server 块，每个块监听 80 端口，但 server_name 不同，并指向各自的项目目录。

nginx

Copy Code

项目1：访问 www.project1.com 时，返回 /var/www/project1 下的文件

server {

listen 80;

server_name www.project1.com project1.com; # 支持带 www 和不带 www

复制代码

root /var/www/project1; # 指定项目1的静态文件根目录
index index.html;

location / {
    try_files $uri $uri/ /index.html; # 支持前端路由（如 Vue Router 的 history 模式）
}

}

项目2：访问 www.project2.com 时，返回 /var/www/project2 下的文件

server {

listen 80;

server_name www.project2.com project2.com; # 支持带 www 和不带 www

复制代码

root /var/www/project2; # 指定项目2的静态文件根目录
index index.html;

location / {
    try_files $uri $uri/ /index.html; # 支持前端路由
}

}

‌重启 Nginx‌：保存配置后，执行 sudo nginx -t 测试配置语法，然后执行 sudo systemctl reload nginx 重启服务。

‌域名解析‌：确保两个域名（www.project1.com 和 www.project2.com）的 DNS 解析都指向该服务器的公网 IP 地址。

方案二：前端项目运行在独立端口（如开发环境）

如果前端项目是通过 Node.js 等服务在后台运行的（例如 npm run dev 启动的开发服务器，监听在特定端口如 3000、4000），则需要使用 Nginx 的反向代理功能。

‌启动前端服务‌：确保每个前端项目都在服务器上运行，并监听在不同的端口，例如项目1运行在 http://localhost:3000，项目2运行在 http://localhost:4000。

‌配置 Nginx‌：在 Nginx 配置中，为每个域名配置一个 server 块，监听 80 端口，并使用 proxy_pass 将请求转发到对应的服务端口。

nginx

Copy Code

项目1：访问 www.project1.com 时，将请求反向代理到本地的 3000 端口

server {

listen 80;

server_name www.project1.com project1.com;

复制代码

location / {
    proxy_pass http://localhost:3000; # 转发到项目1的服务
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

}

项目2：访问 www.project2.com 时，将请求反向代理到本地的 4000 端口

server {

listen 80;

server_name www.project2.com project2.com;

复制代码

location / {
    proxy_pass http://localhost:4000; # 转发到项目2的服务
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

}

‌重启 Nginx‌：同样，测试配置并重启 Nginx 服务。

‌域名解析‌：确保域名 DNS 解析正确。

‌总结‌：对于生产环境，‌方案一‌（静态文件）性能更好、更稳定，是首选。‌方案二‌（反向代理）更适合开发环境或需要后端服务动态渲染的场景。两种方案都能实现通过域名直接访问，完全隐藏后端端口号