Docker Compose中如何通过服务名访问Mercure容器替代IP端口调用

Docker Compose 为同个配置下的所有容器自动创建了专属内部网络，容器之间可以直接通过服务名做DNS解析互相访问，但你的React代码是运行在用户本地浏览器中，浏览器不在Docker内部网络里，默认无法直接解析mercure这个服务名。

方案1：Node.js 容器内调用 Mercure #

如果是运行在nodejs容器内的后端代码调用Mercure，不需要额外修改任何配置，直接用你期望的地址http://mercure/.well-known/mercure即可，同网络下的容器默认可以直接通过服务名访问。

方案2：浏览器端 React 代码用mercure域名调用 #

有两种实现方式可选：

方式A：修改本地hosts + 调整端口映射 #

1. 修改本地操作系统的hosts文件，添加解析规则：

127.0.0.1 mercure

不同系统hosts文件路径：

• Windows：C:\Windows\System32\drivers\etc\hosts
• Mac/Linux：/etc/hosts

2. 调整Docker Compose中Mercure的端口映射：
   如果希望调用时不带端口，将原来的- 3001:80改为- 80:80，即可直接用http://mercure/.well-known/mercure访问。
   如果不想占用本地80端口，端口映射保持不变，前端调用地址改为http://mercure:3001/.well-known/mercure即可。

方式B：通过Node.js服务反向代理（更推荐，适配多环境） #

在你的Node.js前端开发服务中添加反向代理规则，将Mercure相关请求转发到容器内的Mercure服务，不需要修改hosts，也不需要暴露Mercure端口到宿主机。
以Vite为例，修改vite.config.ts添加代理配置：

export default defineConfig({
  server: {
    proxy: {
      '/.well-known/mercure': {
        target: 'http://mercure',
        changeOrigin: true,
        ws: true, // 开启WebSocket支持，Mercure需要
      }
    }
  }
})

配置完成后，前端可以直接用相对路径调用：

const url = new URL('/.well-known/mercure', window.origin);

这种方式不需要写死任何域名，开发和生产环境都可以直接复用，不需要额外调整代码。

内容的提问来源于stack exchange，提问作者ThomasM