部署 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 天时间才把所有东西放在一起。这是你必须做的。

运行 npm run build 在 react 项目中。

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

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

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

现在。在不同的目录中设置 Laravel 项目（例如，在 /var/www/html/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

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

第一个是当您在与 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 应用程序应该可以工作了

Answer 3

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

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

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

您可以在此处阅读有关在 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 配置在一个单独的端口上

希望我的回答能有所帮助