Docker环境下VueJS应用如何通过80端口调用PHP后端？

核心问题分析 #

当前你的Vue容器（todo-app）占用了主机80端口，但npm run serve默认监听容器内8080端口，导致端口映射不匹配；同时浏览器中运行的Vue应用发起AJAX请求时，会直接请求主机80端口（即Vue容器），而非PHP后端容器，因此返回404错误。下面分两种场景给出配置方案：

方案一：开发环境（基于Vue开发服务器） #

1. 修正Vue开发服务器端口 #

在Vue项目根目录创建/修改vue.config.js，指定开发服务器监听80端口并配置代理规则：

module.exports = {
  devServer: {
    port: 80, // 让Vue开发服务器监听容器内80端口
    proxy: {
      '/api': { // 匹配所有以/api开头的请求，根据你的实际接口前缀调整
        target: 'http://php-backend:80', // 通过Docker内部服务名直接访问PHP容器
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 如果PHP接口没有/api前缀，自动移除该前缀
        }
      }
    }
  }
}

2. 调整Vue容器的Docker配置 #

确保docker-compose.yml中todo-app的端口映射正确：

services:
  todo-app:
    build: ./app # 注意改为相对路径，避免Docker找不到构建目录
    ports:
      - "80:80"
    depends_on:
      - php-backend

3. 修改AJAX请求路径 #

将原来指定端口的请求（如http://localhost:8080/get-data）改为相对路径，比如/api/get-data，代理会自动转发到PHP后端。

方案二：生产环境（基于Nginx反向代理） #

如果是部署生产版本，建议用Nginx托管Vue静态文件并反向代理API请求：

1. 修改Vue项目的Dockerfile #

替换为多阶段构建，用Nginx替代开发服务器：

# 构建静态文件
FROM node:19.7-alpine3.16 as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 用Nginx托管静态文件并代理API
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 创建Nginx配置文件（nginx.conf） #

放在Vue项目根目录，配置静态文件托管和API反向代理：

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # 处理Vue单页应用路由，避免刷新页面404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理API请求到PHP后端
    location /api {
        proxy_pass http://php-backend:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

3. 调整docker-compose.yml #

优化PHP后端配置（无需对外暴露8080端口，仅内部访问即可）：

services:
  todo-app:
    build: ./app
    ports:
      - "80:80"
    depends_on:
      - php-backend

  php-backend:
    build:
      context: ./php # 指定Dockerfile所在目录
      dockerfile: Dockerfile
    # 注释掉对外端口映射，仅通过内部网络访问
    # ports:
    #   - "8080:80"
    depends_on:
      - db
    environment:
      - DB_HOST=db
      - DB_PORT=3306
      - DB_DATABASE=todo
      - DB_USERNAME=todo-app-user
      - DB_PASSWORD=default

4. 同步AJAX请求路径 #

同样将请求改为相对路径/api/xxx，Nginx会自动转发到PHP后端。

额外注意事项 #

• Docker Compose会自动创建内部网络，服务之间可通过服务名（如php-backend）直接通信，无需使用localhost或IP。
• 确保主机80端口未被其他服务占用，否则会导致映射失败。
• 根据PHP后端的实际接口前缀，调整代理规则中的/api匹配符和pathRewrite配置。

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