在同一服务器中创建-react-app + Laravel答案

【问题标题】：Create-react-app + Laravel in the same server在同一服务器中创建-react-app + Laravel
【发布时间】：2018-07-17 17:52:23
【问题描述】：

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

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

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

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

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

【问题讨论】：

制作两个项目并将它们部署在同一台服务器上。

标签： laravel reactjs frontend backend create-react-app

【解决方案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 的配置和其他目录暴露给外界。

【讨论】：

【解决方案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;

}

Laravel：

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;

}

【讨论】：

【解决方案3】：

我知道这是很久以前的一个问题，但如果有人在寻找答案时偶然发现这个问题，现在可以在 Laravel 中使用 Create React App（无需弹出）：https://github.com/mjsarfatti/create-react-app-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。

【讨论】：