部署React SPA

Question

我是一个全新的react新手，但一直在使用create-react-app包开发React SPA。我还一直在使用Laravel和Laravel Sanctum开发API。我的API的端点都在api.example.com。我想让我的水疗中心在example.com。目前，API和SPA位于不同的存储库中。我从来没有部署过React应用程序，我不确定如何将它们组合在一起才能正常工作。

这可能与我的Laravel API并不相关，因为它是在一个Homestead流浪盒子上创建和运行的，而SPA目前只是在localhost:3000上运行。

这个问题可能太宽泛了，但任何相关信息或例子的链接都是值得赞赏的。

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

我的SPA需要在example.com才能与api.example.com通信，以使用communicate功能。

当前正在读取this document

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

Answer 1

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

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

1.构建应用程序

当你运行cracao build时，你会得到一个包含'production ready‘构建的build文件夹。构建过程做了一些优化(比如为不支持模块的浏览器构建应用程序，缩小空间等)。并给出了build文件夹中的输出。

2.托管应用程序

一旦构建好，你就可以在任何服务器上托管你的应用程序(即使是像S3这样的东西也可以很好地工作)，只要你有固定的IP地址就可以了。现在您应该可以直接访问IP并查看站点了！

但应用程序的功能性可能会被破坏，因为(正如您所提到的) CORS将阻止来自不同域的访问。

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

3.连续部署(可选)

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

您能维护这两个repos吗？

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