nginx将多个服务代理到同一域名

发表于 2022-10-13 更新于 2022-10-14 分类于服务器，运维阅读次数：本文字数： 1.4k 阅读时长 ≈ 5 分钟

前言

前言
在现代的web开发中，我们通常会遇到一个很常见的场景，那就是需要在同一台服务器上运行多个服务。例如，你可能有一个API服务运行在3000端口，一个管理面板运行在4000端口，还有一个静态资源服务器运行在5000端口。这种情况下，一个非常实用的解决方案就是使用Nginx的反向代理功能，将这些服务都代理到同一个域名下的不同路径。

场景需求

假设我们有以下三个服务：

API服务：http://localhost:3000
管理面板：http://localhost:4000
静态资源服务器：http://localhost:5000

我们希望用户能通过如下方式访问这些服务：

解决方案

使用Nginx的反向代理功能，我们可以很容易地实现这个需求。以下是一个基本的Nginx配置文件示例：

server {
    listen 80;
    server_name www.mydomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name www.mydomain.com;

    ssl_certificate /etc/ssl/www.mydomain.com.crt;
    ssl_certificate_key /etc/ssl/www.mydomain.com.key;

    location /api/ {
        proxy_pass http://localhost:3000/;
    }

    location /admin/ {
        proxy_pass http://localhost:4000/;
    }

    location /static/ {
        proxy_pass http://localhost:5000/;
    }
}

在这个配置中，我们首先将所有HTTP请求重定向到HTTPS。然后，我们针对每个服务设置了一个location块，将请求代理到相应的本地端口。

注意事项

请确保你已经为你的域名配置了SSL证书，否则用户可能会在访问你的服务时收到安全警告。
在配置反向代理时，一定要在目标URL后面添加斜杠（/），否则Nginx可能无法正确地转发路径和查询参数。
为了提高服务的可用性和稳定性，你可以考虑为每个location块配置错误页面和重试策略。
记得定期更新和维护你的Nginx和服务，以防止安全漏洞。

通过以上的配置和注意事项，我们就可以使用Nginx将多个服务代理到同一域名下，提供更加整洁和专业的服务接口。不仅如此，这种方式还能增强服务的安全性，提高用户体验。总的来说，使用Nginx作为反向代理是一种非常高效和实用的方法，值得在实际的开发和运维中应用。

静态资源路径问题

当我们使用Nginx将多个服务代理到同一域名下时，有可能会遇到静态资源路径错误的问题。这是因为原服务可能会使用相对路径来引用静态资源，但在反向代理后，这些相对路径可能就无法正确地指向资源了。

例如，如果你的管理面板在 /admin/index.html 中引用了一个CSS文件：

<link rel="stylesheet" href="styles.css">。

在没有反向代理的情况下，浏览器会去

http://localhost:4000/styles.css

获取这个文件。但是在反向代理后，浏览器会去

https://www.mydomain.com/styles.css

获取文件，而不是我们预期的

https://www.mydomain.com/admin/styles.css。

为了解决这个问题，我们有以下两种常见的解决办法：

修改服务中的路径引用

修改服务中的路径引用：最直接的办法就是修改你的服务，让它使用绝对路径或正确的相对路径来引用静态资源。
这种办法的好处是不需要额外的配置，但可能需要修改大量的代码。

使用Nginx的sub_filter指令

使用Nginx的sub_filter指令：Nginx提供了一个叫做sub_filter的指令，可以用来修改HTTP响应中的内容。我们可以利用这个功能，将所有的静态资源路径替换为正确的路径。例如：

location /admin/ {
    proxy_pass http://localhost:4000/;
    sub_filter 'href="styles.css"' 'href="/admin/styles.css"';
    sub_filter_once off;
}

修改静态资源的基路径

如果你的应用支持设置静态资源的基路径，那么这将是一个很好的解决方案。例如，在HTML文档中，你可以使用标签来设置相对URL的基础URL。或者在某些前端框架（如React和Vue）中，你可以在配置文件中设置公共路径。然后，你就可以按照这个新的基路径来引用静态资源。

使用URL重写

Nginx的rewrite指令可以修改请求的URI，并根据需要进行重定向。我们可以利用这个功能，将错误的资源请求重写到正确的路径。例如，如果你知道所有的.css文件都在/static/css/目录下，你可以使用以下配置将所有的.css请求重定向到这个目录：

这种办法的好处是不需要修改服务的代码，但可能需要一些复杂的配置，并且可能不适用于所有的情况。

location ~* \.css$ {
    rewrite ^(.*)$ /static/css/$1 break;
}

总结

通过以上的配置，我们就实现了将多个服务代理到同一域名下的不同路径。这样，用户可以通过一个统一的域名访问我们的所有服务，而无需记住每个服务的端口号。这不仅提高了用户的使用体验，还大大提升了我们服务的安全性和专业性。