Nginx - Laravel and Reactjs in single config - php

Question

I need to setup staging for my react/laravel project.The laravel serves as api and the react is an stand alone reactjs create-react-app.
What I want to achieve is to have a domain like this
project.staging-site.com // as the main site
project.staging-site.com/backend // as the laravel site
Inside laravel, I have also a dashboard that is also built with reactjs(not by create-react-app) but by the default configuration by running the laravel built in frontend scaffolding.
So in my localhost, backend looks likes this
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)
And my frontend looks like this
localhost:3000
I tried this nginx config, the frontend works, but the backend part returns 404
project.staging-site.com/backend
project.staging-site.com/backend/admin
file not found.
Here is my 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;
}
}
And here's my route for the backend dashboard
Route::get('/', function () {
return view('index');
});
///////React
Route::group(["prefix" => "admin"], function () {
/*
|---------------------------------------------------------------------------
| React Routes
|---------------------------------------------------------------------------
*/
Route::view('/{path?}', 'index');
});

Answer 1

I had similar configuration in one of my projects - with front-end react app, and back-end in Laravel(no React in back-end though).
Here is what I did to deploy them on nginx.
I created separate server configs for front-end and back-end, with different listen ports for each.
Verify the route configs and ensure that the front-end hits the right back-end urls.
Also, add log configs in nginx config as given below so that you have some more information when you get some errors.
error_log /var/log/nginx/laravel-app-error.log;
access_log /var/log/nginx/laravel-app-access.log;
Hope this gives you some idea to find the root cause for the 404 error.