时间戳

首页 > 解决方案 > 如何将 create-react-app 作为大型网站的子目录提供服务？

node.js - 如何将 create-react-app 作为大型网站的子目录提供服务？

问题描述

在使用 React 创建应用程序时，我有一个关于如何构造 javascript 代码的相对基本的问题。

我想在多页网站中嵌入一个单页应用程序。例如，我可能有一个主页、一个关于页面、一个注册页面等，所有这些都由运行 Express 的节点服务器提供服务。它们与 React 无关。我也在使用护照，它为自己的身份验证页面提供服务（本地登录、社交登录、注销等）。此外，我在服务器上的 /api/ 处运行了一个 graphql API。

我还希望在同一个网站上提供一个反应应用程序/embed/*（反应应用程序的基本网址是https://mywebsite.com/embed/，并且反应路由器处理了许多子页面）。

如何create-react-app在开发和生产中将使用 创建的 React 应用程序作为更大站点的子目录提供服务？（cookies 应该在 react 应用程序和主站点之间共享。）

我已成功使用“代理”选项create-react-app从反应应用程序（在端口 3000 上运行）连接到 API（在端口 3001 上运行）。但是，代理似乎无法转发用户在浏览器中输入的 URL。（例如：如果我在我的代码中访问localhost:3000/api/using fetch，它会根据需要转发localhost:3001/api/。但是，如果我在地址栏中输入相同的 URL，它不会被重定向。相反，我的反应应用程序会加载。这是有道理的，但是不是我想要的行为。）

标签： node.jsreactjsexpresscreate-react-app

解决方案

你不需要对 package.json 和其他东西做任何事情。如果您有任何资产，如图像、字体……它们应该包含在包含 bundle.js的 build 文件夹（或 dist 文件夹，如果您使用dist而不是build ）中。

通过使用 create-react-app 您将在构建文件夹中拥有这些文件：

  • 资产清单.json
  • 网站图标
  • 索引.html
  • 清单.json
  • 静态文件夹
  • 和您可能在您的应用程序中使用的其他静态文件，并在开发模式下将它们放在公共文件夹中

您的所有代码都将捆绑，您不需要 package.json，...

但是如果你不使用 creat-react-app 它会有所不同，你需要在你的 index.html 中包含你的 bundle.js

但是使用 CRA，您并非所有事情都会自动进行，您也不需要做额外的事情。

此链接可帮助您进行路由： Create-React-App in production: Routes not found

在服务器中，您可以像这样提供 index.html：

let root = path.join(__dirname, 'client', 'build');
app.use(express.static(root));
app.use(function(req, res, next) {
if (req.method === 'GET' && req.accepts('html') && !req.is('json') && 
 !req.path.includes('.')) {
   res.sendFile('index.html', { root });
 } else next();
 });

希望这对你有帮助

推荐阅读