在同一台服务器上创建-react-app + Laravel

Question

• 我开发了一个Laravel支持的 RESTful API。
• 我想通过使用create-react-app UI 工具包创建的ReactJS应用程序来使用它。

前端和后端两种不同的技术，到目前为止都很好。

问题（反过来，这是最常见的情况）是前端和后端都必须从同一个域（或服务器/文件结构）提供服务。

使两个项目在同一服务器中共存的最佳方法是什么？

编辑：这里的主要问题是 Laravel Mix 和任何 Laravel 前端功能都不能使用，因为 create-react-app 堆栈。 它强加的规则使得在不首先弹出应用程序的情况下进行集成非常困难，从维护的角度来看这是不推荐的。

Answer 1

如果您使用的是 Apache HTTPd，您有两个选择。

假设您已按如下方式复制了前端和后端目录：

/var/www/yourappname/api/下的后端（假设为 Laravel 5.x）

/var/www/yourappname/frontend/

您可以使用app.yourdomain.com访问您的应用。 （出于安全和性能原因，我通常更喜欢www.yourdomain.com作为单独的服务器/Apache 实例）。

1. 两个子域

有指向同一个IP地址的两个子域，说app.yourdomain.com的前端，并api.yourdomain.com为Laravel后端。 在您的 Apache 配置和文档根目录中创建两个虚拟主机，如下所示

对于api.yourdomain.com

/var/www/yourappname/api/public

对于app.yourdomain.com

/var/www/yourappname/frontend/

要包含在前端应用程序中的后端基本 URL 将是api.yourdomain.com/

优点：如果你想在未来将你的前端和后端拆分到两个不同的 Apache 实例或单独的服务器上，你可以很容易地做到。 此外，前端是静态内容，因此可以使用其他低成本选项（如基于 S3 的站点）提供服务。

警告：您必须处理 CORS ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ) 问题。 此外，您将需要两个 SSL 证书或多域证书或通配符 SSL 证书。

我更喜欢这个选项，考虑到未来的负载，我在我的设置之一中使用了它。

2. 单域和别名

将文档根设置为

/var/www/yourappname/frontend

添加别名如下（ http://httpd.apache.org/docs/2.4/mod/mod_alias.html#alias ）

Alias "/api/" "/var/www/yourappname/api/public/

要包含在前端应用程序中的后端基本 URL 将是app.yourdomain.com/api/

（我还没有在我的设置中验证这一点）

优点：您有一个域，并且需要一个 SSL 证书。

警告：所有命中都将在同一个 Apache 服务上，因此难以分离计算密集型 API 请求和静态内容的负载。

注意：无论哪种情况，我都指向 Laravel 框架的“public”目录，以避免将 Laravel 的配置和其他目录暴露给外界。

Answer 2

我不得不花费大量时间来解决在使用 React 前端和 Laravel 作为 API 部署我的项目时遇到的问题。 希望这可以帮助那些试图将类似堆栈部署到生产中的人。

总而言之，我为 react 和 laravel 项目设置了单独的配置，每个配置都有不同的监听端口和不同的location 。

由于我使用 Laravel 作为我的 API，我使用/api作为 Laravel 的位置配置和/作为反应的位置配置。

请找到我用作参考的 nginx 配置

反应：

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;

}

拉拉维尔：

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;

}

Answer 3

我知道这是前一段时间的问题，但如果有人在寻找答案时偶然发现了这个问题，现在可以在 Laravel 中使用 Create React App（无需弹出）： https : //github.com/mjsarfatti/create-反应-应用-laravel/

create-react-app-laravel本质上是在 Laravel 项目中运行的 Create React App 的一个分支。

您可以查看https://github.com/mjsarfatti/create-react-app-laravel/wiki/获取安装指南，以及https://dev.to/mjsarfatti/introducing-cral-create-react-app-laravel -4n90为公告。