如何将Docker Compose中message-broker服务的IP/主机名传递给前端？

Great question! When you're working with a Node.js app serving frontend code that needs to call a separate message-broker service in Docker Compose, there are a few practical approaches to make this work smoothly. Let's walk through each one:

1. Use Docker Compose's Built-In DNS (Simplest for Containerized Frontends) #

Docker Compose automatically sets up an internal DNS network where each service is reachable by its service name. So if your frontend is being served from within the app container (e.g., your Node.js app acts as a static file server for the frontend), you can directly use the service name message-broker in your frontend requests.

For example, in your frontend JS:

fetch('http://message-broker:8080/api/messages') // Replace 8080 with your broker's internal port
  .then(res => res.json())
  .then(data => console.log(data));

This works because the request originates from the app container, which can resolve Docker's internal DNS entries.

2. Inject the Address via Environment Variables (For Browser-Based Frontends) #

If your frontend runs directly in the user's browser (not inside a container), it can't access Docker's internal DNS. In this case, you'll need to pass the broker's external address (your host machine's IP + exposed port) to the frontend via environment variables.

Step 1: Update docker-compose.yml #

Add an environment variable to your app service that holds the broker's external URL:

app:
  build: ./app
  environment:
    - MESSAGE_BROKER_URL=http://localhost:5678 # Use your host's IP if accessing from another device
  ports:
    - "3000:3000"
message-broker:
  build: ./message-broker
  ports:
    - "5678:5678" # Map the broker's internal port to your host

Step 2: Inject the Variable into Your Frontend #

In your Node.js app, pass this environment variable to your HTML template. For example, using EJS:

<!-- In your HTML template -->
<script>
  // Make the broker URL available to frontend JS
  const MESSAGE_BROKER_URL = '<%= process.env.MESSAGE_BROKER_URL %>';
  
  // Use it in requests
  fetch(`${MESSAGE_BROKER_URL}/api/messages`)
    .then(res => res.json())
    .then(data => console.log(data));
</script>

If you're using a frontend build tool like Vite or Webpack, you can also inject environment variables during the build process (e.g., VITE_MESSAGE_BROKER_URL in Vite) to bake the URL into your bundled code.

3. Set Up a Reverse Proxy (Best for Production & Cross-Domain) #

A cleaner approach (especially for production) is to have your Node.js app act as a reverse proxy for requests to the message-broker. This way, your frontend only needs to make requests to the same domain as the app, avoiding cross-origin issues and hiding the broker's internal address.

Step 1: Add Proxy Middleware to Your Node.js App #

Use a library like http-proxy-middleware to route requests:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// Proxy requests starting with /broker to the message-broker service
app.use('/broker', createProxyMiddleware({
  target: 'http://message-broker:8080', // Docker internal service address
  changeOrigin: true,
  pathRewrite: { '^/broker': '' } // Optional: Strip /broker from the request path
}));

// Serve your frontend static files
app.use(express.static('public'));

app.listen(3000, () => console.log('App running on port 3000'));

Step 2: Update Frontend Requests #

Now your frontend can make requests to the app's domain, and the proxy will forward them to the broker:

// Frontend JS
fetch('/broker/api/messages')
  .then(res => res.json())
  .then(data => console.log(data));

This method keeps your frontend configuration simple and avoids exposing internal service details to the client.

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