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

Question

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

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

我还希望在同一个网站上在 /embed/* 上提供一个 React 应用程序(其中 React 应用程序的基本 URL 为 https://mywebsite.com/embed/，并且有很多由react-router处理的子页面)。

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

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

Answer 1

你不需要对 package.json 和其他东西做任何事情。只要您有图像、字体等任何 Assets ，它们就应该包含在构建文件夹中(如果您使用 dist 而不是 build，则应包含在 dist 文件夹中)，其中包括捆绑.js。

通过使用create-react-app，您将在构建文件夹中包含这些文件:

• Assets list .json
• 网站图标
• index.html
• manifest.json
• 静态文件夹
• 以及您可能在应用中使用的其他静态文件，并在开发模式下将它们放入公共(public)文件夹中

您的所有代码都将捆绑在一起，并且您不需要 package.json，...

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

但是使用 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();
 });

希望这对你有帮助