Docker中Nuxt前后端分离：serverMiddleware容器链接配置求助

问题背景 #

我将Nuxt应用拆分为前后端分离的目录结构，分别对前端（Nuxt.js）和后端（Express.js）进行容器化，项目结构如下：

my_nuxt_app
|-backend
|-frontend
docker-compose.yaml

本地环境下，通过以下serverMiddleware配置可正常运行：

serverMiddleware: [
  {path: '/api', handler:'../backend'}
],

但在Docker环境中无法沿用该配置，不清楚如何通过serverMiddleware链接后端容器，已编写基础的docker-compose.yaml及前后端Dockerfile，寻求解决方案。

现有配置文件 #

docker-compose.yaml #

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: ./frontend
    ports:
      - 8080:8080
  backend:
    container_name: backend
    build:
      context: ./backend
    ports:
      - 3000:3000

（注：原配置中forntend为拼写错误，已修正）

后端Dockerfile #

FROM node:16.16.0-alpine

RUN npm i --location=global --force pm2
RUN npm i --location=global --force yarn

WORKDIR /backend

COPY . .

CMD ["pm2-runtime", "backend.js","--json","--no-auto-exit","--only","backend"]

前端Dockerfile #

FROM node:16.16.0-alpine
 
RUN npm i --location=global --force yarn

WORKDIR /mmc

COPY . .

CMD ["yarn","dev"]

解决方案 #

1. 修改Nuxt的serverMiddleware配置 #

Docker容器是独立运行环境，前端容器无法直接访问后端容器的文件系统，因此不能再用相对路径../backend作为handler，需改为通过HTTP请求转发到后端容器。

方式一：原生http模块转发

在nuxt.config.js中修改配置：

serverMiddleware: [
  {
    path: '/api',
    handler: (req, res) => {
      const http = require('http');
      const options = {
        hostname: 'backend', // docker-compose中定义的后端服务名
        port: 3000, // 后端服务的容器内端口
        path: req.url,
        method: req.method,
        headers: req.headers
      };

      const proxyReq = http.request(options, (proxyRes) => {
        res.writeHead(proxyRes.statusCode, proxyRes.headers);
        proxyRes.pipe(res, { end: true });
      });

      req.pipe(proxyReq, { end: true });
    }
  }
],

方式二：使用http-proxy-middleware（更简洁）

1. 先安装依赖：

yarn add http-proxy-middleware --dev

2. 修改nuxt.config.js：

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

serverMiddleware: [
  {
    path: '/api',
    handler: createProxyMiddleware({
      target: 'http://backend:3000',
      changeOrigin: true
    })
  }
],

2. 确保后端服务监听正确地址 #

后端Express应用必须监听0.0.0.0而非localhost，否则其他容器无法访问。检查backend.js：

// 错误写法（仅容器内部可访问）
app.listen(3000, 'localhost', () => { ... });

// 正确写法（允许外部容器访问）
app.listen(3000, '0.0.0.0', () => { ... });

3. 优化docker-compose配置（可选） #

• 移除不必要的container_name，默认生成的命名格式更规范
• 后端端口映射3000:3000可删除，前端通过内部网络访问，无需暴露给宿主机
• 添加depends_on确保后端先启动

优化后的配置：

version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - 8080:8080
    depends_on:
      - backend
  backend:
    build: ./backend

4. 优化Dockerfile构建效率（可选） #

后端Dockerfile可先复制依赖配置文件，利用Docker缓存加速构建：

FROM node:16.16.0-alpine

RUN npm i --location=global --force pm2 yarn

WORKDIR /backend

# 先复制依赖文件，缓存安装层
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# 再复制项目代码
COPY . .

CMD ["pm2-runtime", "backend.js","--json","--no-auto-exit","--only","backend"]

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