部署 Laravel 和 React spa

Question

How can I deploy these two together, I don't like the Laravel React preset, I want to separate both, bundle the React app and deploy them together with any web server (apache, nginx...)

EDIT

This is my config for Laravel, but it isn't loading the routes

server {
    listen 8000;
    server_name 127.0.0.1
    root "..\..\Proyecto\Backend\JWT\public";

    add_header 'Access-Control-Allow-Origin' '*';
    add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";

index index.html index.htm index.php;

charset utf-8;

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

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 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
    include fastcgi_params;
}

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

Answer 1

This was proving to be very tricky and it took me at least 3 days to put everything together. Here is what you have to do.

Run npm run build in the react project.

Copy the contents of the build folder to the server

scp react_project/build/* <server name or ip>:/var/www/html/react

Change the ownership of the project folders to the user www-data or add your user id to the group www-data .

Now. set up the Laravel project in a different directory (in /var/www/html/laravel, for example). Set up the database, environment variables. Run

php artisan key:generate
php artisan config:clear
php artisan config:cache

Now, proceed with nginx configuration. Create 2 configs for react and laravel projects as given below. Make sure that the listen ports are different for both projects. Create configuration files for react and laravel projects under /etc/nginx/sites-available Create symlinks to the created configs under /etc/nginx/sites-enabled as given below

sudo ln -s /etc/nginx/sites-available/react_conf /etc/nginx/sites-enabled/react_conf
sudo ln -s /etc/nginx/sites-available/laravel_conf /etc/nginx/sites-enabled/laravel_conf

And for the contents, react_conf:

server {
    listen     80;
    server_name <server_ip or hostname>;
    charset utf-8;
    root /var/www/html/react;
    index index.html index.htm;
    # Always serve index.html for any request
    location / {
        root /var/www/html/react;
        try_files $uri /index.html;
    }
    error_log /var/log/nginx/react-app-error.log;
    access_log /var/log/nginx/react-app-access.log;

}

laravel_conf:

server {
    listen     90;
    server_name <server ip or hostname>;
    charset utf-8;
    root /var/www/html/laravel/public;
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html index.htm;
    # Always serve index.html for any request
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    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;
    }

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

}

Now, delete the default config present in /etc/nginx/sites-enabled

Also, verify that /etc/nginx/nginx.conf contains the following include directive where the server configs are expected(under http)

include /etc/nginx/sites-enabled/*;

Verify that the config is fine by running

sudo nginx -t

Restart the server

sudo service nginx restart

Now, you should be up and running.

Answer 2

You can run them separately using nginx

you run each on separate ports and use methods (POST/GET) to push/get data

use pm2 ( http://pm2.keymetrics.io/ ) for running React (I recommend it because you can monitor the activity of the react app and if you want to do maintenance you can stop the current app process and run a "under maintenance" app process)

you can read more about running laravel on nginx here ( https://www.digitalocean.com/community/tutorials/how-to-deploy-a-laravel-application-with-nginx-on-ubuntu-16-04 )

as for running react without pm2, you have to build the project yarn build and tell nginx that the file you want to load is the index.html inside of the build file

assuming that you are using an ubuntu server and you uploaded your code to github or gitlab

server {
  listen 50;
  root /var/www/[Your repo name]/build;
  server_name [your.domain.com] [your other domain if you want to];
  index index.html;
  location / {
    try_files $uri /index.html;
  }
}

you write this inside of your nginx configuration along with the laravel configuration on a separate port

hope my answer helped a bit

Answer 3

You can approach it by two ways .

First one is when the you are creating react-app in different folder than the laravel project folder . In such case just deploy laravel app and react app in two different url .

The second condition is when the react-app is inside the laravel app . In such case build the react project and put the dist folder in views folder of the laravel project . So in routes/web.php add this

//Used for handling the html file of react project
 View::addExtension('html', 'php');

Route::get('/{any}', function () {
   //path to dist folder index.html inside the views directory
   return view('build/index');
})->where('any', '.*');

Laravel will not server the required js and css file from inside the views folder . So you need copy and paste all the content of the dist folder to public folder of the laravel project . No need to copy paste index.html file but other file need to placed in the pubic folder .

After that visit the root url of the laravel project in the browser the react app should be working