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

Question

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

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

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

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

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

Answer 1

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

假设您已复制前端和后端目录，如下所示：

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

前端下/var/www/yourappname/frontend/

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

1. 两个子域

有两个子域指向相同的 IP 地址，例如app.yourdomain.com前端和api.yourdomain.comLaravel 后端。在 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 的配置和其他目录暴露给外界。