Reactjs 部署反应水疗中心

我对react一无所知，但一直在使用

create react app

软件包开发react SPA。我还一直在使用Laravel和Laravel Sanctum开发API。我的API的端点都位于

API.example.com

。我想在

example.com

上进行水疗。目前，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功能

正在阅读

---

因此，运行

npm run script build

将运行

craco build

，并在build目录中创建缩小和编译的js和css文件。我现在需要知道如何获取这个构建目录并将其部署到

example.com

，以便与

api.example.com

通信。我是否将此目录添加到API存储库的某个位置？

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

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

1。构建应用程序

当您运行

cracao build

时，您会得到一个

build

文件夹，其中包含“生产就绪”版本。该构建进行了一些优化（例如为不支持模块的浏览者绑定应用程序、缩小空间等），并在构建文件夹中提供输出

2。托管应用程序

一旦构建完成，你可以在任何你有固定IP访问权的服务器上托管你的应用程序（甚至像S3这样的服务器也可以）。现在你应该可以直接访问IP并查看站点了

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

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

3。连续输出部署（可选）

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

你能维持这两份回购协议吗？

---

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

那么您的问题是什么？