部署 React SPA

Question

我对 react 完全陌生，但一直在使用 create-react-app 包开发 React SPA。我也一直在使用 Laravel 和 Laravel Sanctum 开发一个 API。我的 API 端点都在 api.example.com。我想在example.com 获得我的SPA。目前 API 和 SPA 位于不同的存储库中。我从未部署过 React 应用程序，我不确定如何将它们结合起来才能正常工作。

这可能与我的 Laravel API 是在 Homestead vagrant box 上创建和运行无关，而 SPA 目前只是在 localhost:3000 上运行。

这个问题可能过于宽泛，但我们感谢任何指向相关信息或示例的链接。

我需要知道如何正确使用npm/craco build 来打包 SPA，然后如何将其与我的 Laravel API 结合使用。我假设我可以将它们保存在不同的存储库中。

我的 SPA 需要位于 example.com 才能与 api.example.com 通信才能使用 Sanctums CSRF 功能。

正在阅读this document

所以运行npm run-script build 将运行craco build 并在构建目录中创建缩小和编译的js 和css 文件。我现在需要知道如何获取这个构建目录并将其部署到example.com，以便与api.example.com 通信。我会在 API 存储库中的某处添加此目录吗？

Answer 1

单页应用程序基本上只是网页。

因此，您需要获取构建输出，将它们托管在服务器中，最后设置域以使其指向该服务器。

1.构建应用程序

当您运行cracao build 时，您将获得一个带有“生产就绪”构建的build 文件夹。该构建进行了一些优化（例如为不支持模块的浏览器捆绑应用程序、缩小空间等）并在构建文件夹中提供输出。

2。托管应用程序

构建后，您可以将应用托管在您可以通过固定 IP 访问的任何服务器上（即使是像 S3 这样的服务器也可以正常工作）。现在您应该可以直接访问 IP 并查看站点了！

但应用程序功能可能会中断，因为（如您所述）CORS 会阻止来自不同域的访问。

要解决此问题，您需要设置域名服务器以将域指向新 IP。

3. Continuouts 部署（可选）

您可能会设置一个 CI/CD 管道来自动化应用程序构建和上传过程，因为它可能会变得乏味。这个过程将运行 cracao buld 并将输出上传到正确的目录。

你能维护这两个仓库吗？

是的！尽管它们需要共享同一个域，但您可以将应用程序保存在两个存储库中，并使用两个不同的 CI/CD 管道将您的应用程序部署到正确的位置。