部署 React SPA

Question

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

它可能与我的localhost:3000无关

这个问题可能过于宽泛，但任何指向相关信息或示例的链接都值得赞赏。

I need to know how to properly use npm / craco build to package the SPA and then how to combine this with my Laravel API. 我假设我可以将这些保存在不同的存储库中。

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

目前正在阅读本文档

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

Answer 1

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

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

1. 构建应用程序

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

2. 托管应用程序

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

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

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

3. Continuouts Deployment（可选）

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

你能维护这两个回购吗？

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