部署 Laravel 和 React spa

Question

如何将这两个部署在一起，我不喜欢 Laravel React 预设，我想将两者分开，捆绑 React 应用程序并将它们与任何 Web 服务器（apache、nginx...）一起部署

编辑

这是我的 Laravel 配置，但它没有加载路由

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

事实证明，这非常棘手，我至少花了 3 天的时间将所有东西放在一起。 这是你必须做的。

在 react 项目中运行npm run build 。

将 build 文件夹的内容复制到服务器

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

将项目文件夹的所有权更改为用户www-data或将您的用户 ID 添加到组www-data 。

现在。 在不同的目录（例如 /var/www/html/laravel）中设置 Laravel 项目。 设置数据库，环境变量。 跑

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

现在，继续进行 nginx 配置。 为 react 和 laravel 项目创建 2 个配置，如下所示。 确保两个项目的监听端口不同。 在/etc/nginx/sites-available下为 react 和 laravel 项目创建配置文件在/etc/nginx/sites-enabled下创建指向已创建配置的符号链接，如下所示

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

对于内容，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;

}

现在，删除/etc/nginx/sites-enabled的默认配置

此外，验证/etc/nginx/nginx.conf包含以下包含指令，其中需要服务器配置（在 http 下）

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

通过运行验证配置是否正常

sudo nginx -t

重启服务器

sudo service nginx restart

现在，您应该启动并运行了。

Answer 2

您可以使用 nginx 单独运行它们

您在单独的端口上运行每个并使用方法（POST/GET）来推送/获取数据

使用 pm2 ( http://pm2.keymetrics.io/ ) 来运行 React（我推荐它，因为你可以监控 React 应用程序的活动，如果你想进行维护，你可以停止当前的应用程序进程并运行一个“under维护”应用程序过程）

您可以在此处阅读有关在 nginx 上运行 laravel 的更多信息（ https://www.digitalocean.com/community/tutorials/how-to-deploy-a-laravel-application-with-nginx-on-ubuntu-16-04 ）

至于在没有pm2的情况下运行react，您必须构建项目yarn build并告诉nginx您要加载的文件是构建文件中的index.html

假设您使用的是 ubuntu 服务器并将代码上传到 github 或 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;
  }
}

你把它写在你的 nginx 配置中，以及在一个单独的端口上的 laravel 配置

希望我的回答有点帮助

Answer 3

您可以通过两种方式来处理它。

第一个是当您在与 laravel 项目文件夹不同的文件夹中创建 react-app 时。 在这种情况下，只需在两个不同的 url 中部署 laravel app 和 react app。

第二个条件是 react-app 位于 laravel app 内。 在这种情况下，构建 react 项目并将 dist 文件夹放在 laravel 项目的 views 文件夹中。 所以在 routes/web.php 添加这个

//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 不会从 views 文件夹中提供所需的 js 和 css 文件。 所以你需要将dist文件夹的所有内容复制粘贴到laravel项目的public文件夹中。 无需复制粘贴 index.html 文件，但其他文件需要放置在公共文件夹中。

在浏览器中访问 laravel 项目的根 url 之后，react 应用程序应该可以正常工作