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

事实证明，这非常棘手，我花了至少三天的时间才能将所有内容放在一起。这就是您要做的。

运行 npm run build在react项目中。

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

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包含以下include指令，用于期望服务器配置（在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应用的活动，并且如果要进行维护，则可以停止当前应用进程并运行“维护中”。应用程序进程

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

对于在没有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;
  }
}

您可以将此代码与laravel配置一起写在nginx配置内部

希望我的回答有所帮助

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项目的公共文件夹中。无需复制粘贴index.html文件，但其他文件需要放置在pubic文件夹中。

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

部署Laravel和React spa

3 个答案: