如何正确配置NGINX服务Vite-React前端容器和CakePHP API后端容器

Question

我目前正在尝试配置我的 NGINX docker 实例来为前端和后端服务提供服务，以创建一个全新的应用程序：

• CakePHP 作为我的后端 RestAPI；
• ReactJs 作为我的前端；
• MySQL 作为数据库；
• NGINX 作为 Web 服务器和反向代理。

我正在努力解决 NGINX 配置问题，因为我寻求一种所有四个容器同时运行的设置...虽然 NGINX 为前端应用程序提供服务，但前端会将请求发送到 API（CakePHP/PHP-FPM）容器）通过 NGINX 容器和后端容器会对 MySQL 容器进行一些查询。

源代码在此存储库中：https://github.com/eddyyxxyy/cake-react-nginx

今天（2023 年 7 月 19 日）我尝试进行此配置：

docker-compose.yml

：

version: '3.9'
name: cake-react-template
services:
  mysql:
    image: mysql:latest
    container_name: db-mysql
    volumes:
      - ./backend/database:/var/lib/mysql
    restart: always
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=fictional_db
      - MYSQL_USER=eddyxide
      - MYSQL_PASSWORD=leandoer

  fpm:
    build: ./backend/app
    container_name: app-php-fpm
    volumes:
      - ./backend/app:/var/www/html/api
      - ./backend/app/config/php.ini:/usr/local/etc/php/php.ini
    ports:
      - "9000:9000"
    links:
      - mysql

  nginx:
    image: nginx:latest
    container_name: server-nginx
    volumes:
      - ./backend/app:/var/www/html/api
      - ./frontend/:/var/www/html/app
      - ./backend/app/logs/nginx.log:/var/log/nginx
      - ./backend/server/nginx:/etc/nginx
    ports:
      - "8765:80"
      - "443:443"
    links:
      - fpm

server {
    listen 80;
    listen [::]:80;
    server_name localhost;

    root /var/www/html/app;
    index index.html;

    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;

    location / {
        index index.htm index.html;
    }

    location ~ ^/api(.*) {
    root /var/www/html/api/webroot/;
    rewrite ^/api/(.*)$ /$1 break;
    try_files $uri /api/webroot/index.php$args;

    location ~ \.php$ {
        rewrite ^/api/(.*)$ /$1 break;
        include fastcgi_params;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass fpm:9000;
            fastcgi_index index.php;
            fastcgi_intercept_errors on;
            fastcgi_read_timeout 240;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
    }
}

但最终访问 /api 时找不到文件：

按照我提到的方式，我可以为这个设置/模板工作做些什么？我应该更改什么才能使其作为我的新标准 Cake-React 启动项目？

而且，此设置适合生产服务器吗？如果没有，为什么？

Answer 1

Nginx 配置的根部分必须指向 Laravel 公共目录。 所以基于你的 docker-comose 卷：

root /var/www/html/api/public;
try_files $uri index.php$args;