Nginx - Laravel и Reactjs в одной конфигурации

Question

Мне нужно настроить постановку для моего проекта response / laravel. laravel служит api, а реакция - автономным reactjs create-response-app.

Что я хочу Достижение заключается в том, чтобы иметь такой домен

   project.staging-site.com // as the main site
   project.staging-site.com/backend // as the laravel site

Внутри laravel, у меня также есть панель инструментов, которая также построена с помощью reactjs (не с помощью приложения create-response-app), но с конфигурацией по умолчанию от запуск laravel встроенных строительных лесов внешнего интерфейса.

Итак, на моем локальном хосте серверная часть выглядит так

   localhost:8000 // where the dashboard lives
   localhost:8000/api/V1 //where the api routes lives(consumed by the reactjs frontend)
   localhost:8000/admin/V1 // where the admin routes lives(consumed by the reactjs dashboard)

И мой интерфейс выглядит так

   localhost:3000

I попробовал эту nginx конфигурацию, интерфейс работает, но бэкэнд возвращает 404

    project.staging-site.com/backend
    project.staging-site.com/backend/admin
    file not found.

Вот мой nginx

    server {
           listen 80;
           server_name project.staging-site.com;
           root /portal/front/build;

           add_header X-Frame-Options "SAMEORIGIN";
           add_header X-XSS-Protection "1; mode=block";
           add_header X-Content-Type-Options "nosniff";

           charset utf-8;

           location /backend/ {
              root /portal/backend/current/public;
              try_files $uri $uri/ /index.php?$query_string;
           }

           location / {
              root /portal/front/build;
              try_files $uri /index.html;
           }
           location = /favicon.ico { access_log off; log_not_found off; }
           location = /robots.txt  { access_log off; log_not_found off; }

           error_page 404 /index.php;

           location ~ \.php$ {
               fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
               fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
               include fastcgi_params;
           }

           location ~ /\.(?!well-known).* {
               deny all;
           }
      }

И вот мой маршрут для бэкэнд-панели

      Route::get('/', function () {
          return view('index');
      });
      
      ///////React
      Route::group(["prefix" => "admin"], function () {
           /*
           |---------------------------------------------------------------------------
           | React Routes
           |---------------------------------------------------------------------------
           */

           Route::view('/{path?}', 'index');
      });

Answer 1

У меня была аналогичная конфигурация в одном из моих проектов - с клиентским приложением для реагирования и с серверной частью в Laravel (хотя в серверной части React нет).

Вот что я сделал с разверните их на nginx.

Я создал отдельные конфигурации серверов для внешнего и внутреннего интерфейса, с разными портами прослушивания для каждого. Проверьте конфигурацию маршрута и убедитесь, что внешний интерфейс соответствует правильным внутренним URL.

Кроме того, добавьте конфигурации журнала в конфигурацию nginx, как указано ниже, чтобы у вас была дополнительная информация при появлении некоторых ошибок .

 error_log /var/log/nginx/laravel-app-error.log;
 access_log /var/log/nginx/laravel-app-access.log;

Надеюсь, это даст вам представление о поиске root причины ошибки 404.