如何在静态服务器上部署 React 应用程序

Question

我有一个使用 create-react-app 构建的 react 应用程序。它使用 octoberCMS 作为后端，使用来自前端的 Axios 调用来获取数据。到目前为止，我正在开发将 react 的构建内容保存在 octoberCMS 安装根目录中名为“react”的目录中。因此，我点击的 URL 是 http://example.com/react/。

问题是现在我已经完成了开发阶段并期待部署。但我希望我的前端服务于http://example.com，而后端服务于http://example.com/backend（后端服务于我想要的）。我怎样才能做到这一点？我对这两个框架都很陌生。

我已尝试将构建内容与 octoberCMS 的其余部分一起保留

Answer 1

首先构建您的 react 应用程序，它将为您提供 vendor.js[第三方脚本] 和您的 app.js[您的实际应用程序]

将它们放入主题目录assets something

然后在 Ocotber CMS 中使用 URL /:url? 制作页面并将您的 index.html 内容粘贴到那里。 它将是您的root div 和including js html，更改js 的路径，它指向您放入主题目录的构建js。

现在当有人来到站点时会发生什么 - 我们提供与开发版本相同的内容 - 带有根标签的 index.html 和需要的 js

现在，如果使用点击任何其他 url，如 https://www.example.com/test/etc，它也将被 /:url?（和所有其他请求）捕获，并且提供主页，我们的 react 应用程序将按照我们的需要运行。

如有任何问题，请发表评论。