如何配置NGINX对接Vite-React前端与CakePHP API后端容器？

核心问题定位 #

访问/api出现「文件未找到」，本质是NGINX没有正确将API请求转发到PHP-FPM容器，或者CakePHP的入口文件路径映射错误。下面是修正后的完整配置，以及架构的生产环境适配分析。

修正后的配置文件 #

1. docker-compose.yml 配置 #

确保各服务网络互通，PHP-FPM挂载CakePHP代码，MySQL配置与后端匹配：

version: '3.8'

services:
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./react-app/dist:/usr/share/nginx/html  # 挂载React构建产物
    depends_on:
      - php-fpm
    networks:
      - app-network

  php-fpm:
    build: ./cakephp  # CakePHP目录需包含Dockerfile
    volumes:
      - ./cakephp:/var/www/html  # 挂载CakePHP源码到容器工作目录
    environment:
      - DATABASE_URL=mysql://user:password@mysql:3306/cakephp_db
    depends_on:
      - mysql
    networks:
      - app-network

  mysql:
    image: mysql:8.0
    environment:
      - MYSQL_ROOT_PASSWORD=root_pass
      - MYSQL_DATABASE=cakephp_db
      - MYSQL_USER=user
      - MYSQL_PASSWORD=password
    volumes:
      - mysql-data:/var/lib/mysql  # 持久化MySQL数据
    networks:
      - app-network

  vite-react:
    image: node:18-alpine
    working_dir: /app
    volumes:
      - ./react-app:/app
    command: npm run dev  # 开发环境用dev，生产环境替换为npm run build
    ports:
      - "5173:5173"  # 开发环境预览端口，生产环境可删除
    networks:
      - app-network

volumes:
  mysql-data:

networks:
  app-network:
    driver: bridge

2. NGINX 配置（./nginx/conf.d/default.conf） #

重点处理API转发规则和React SPA路由：

server {
    listen 80;
    server_name localhost;

    # React静态文件服务
    root /usr/share/nginx/html;
    index index.html;

    # React SPA路由兼容：非API请求都返回index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API请求转发到PHP-FPM
    location /api {
        root /var/www/html/webroot;  # 指向CakePHP的入口文件目录
        index index.php;

        # 移除/api前缀，匹配CakePHP原生路由
        rewrite ^/api/(.*)$ /$1 break;

        # 转发到PHP-FPM容器
        fastcgi_pass php-fpm:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

3. CakePHP Dockerfile（./cakephp/Dockerfile） #

构建满足CakePHP依赖的PHP-FPM环境：

FROM php:8.2-fpm-alpine

# 安装CakePHP必需的PDO扩展
RUN docker-php-ext-install pdo_mysql

# 安装Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html

# 安装项目依赖（首次启动时执行）
RUN composer install

验证步骤 #

1. 启动容器：docker-compose up -d
2. 检查PHP-FPM容器内CakePHP路径：docker exec -it <php-fpm容器ID> ls /var/www/html/webroot，确认存在index.php
3. 访问前端：http://localhost，验证页面加载正常
4. 测试API：http://localhost/api/你的接口路径，确认请求能正确触达CakePHP

架构生产环境适用性分析 #

这个NGINX + PHP-FPM + React + MySQL的容器化架构完全适用于生产环境，理由如下：

• 解耦性：各服务独立容器化，便于单独更新、扩容和故障隔离
• 性能：NGINX作为反向代理+静态文件服务器性能优异，PHP-FPM实现PHP请求的资源隔离
• 可扩展性：PHP-FPM可水平扩容，MySQL可配置主从集群或切换云数据库
• 安全性：容器天然隔离，NGINX可配置HTTPS、限流、WAF等安全策略

生产环境额外优化建议 #

• 启用HTTPS：配置NGINX SSL证书（推荐Let's Encrypt）
• 静态资源缓存：为React的JS/CSS文件设置NGINX缓存规则
• PHP-FPM调优：根据业务负载调整php-fpm.conf的进程数、内存限制等参数
• MySQL优化：开启binlog、配置定期备份，使用InnoDB存储引擎
• 日志统一收集：将各容器日志汇总到ELK或类似系统，便于排查问题
• 容器编排：用Kubernetes替代docker-compose，实现自动扩容、滚动更新等高级功能

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