node.js - 如何连接 webpack dev server 来表达？

Question

我正在同时运行 express 和 create-react-app 应用程序。它们在开发过程中是独立的实体，而 express 只是一个端点，我们通过 package.json proxy: 'http://localhost:5000 中的“proxy”字段进行通信。在生产期间，我运行 yarn build 并通过 Express 中的 catch-all-route 为构建文件夹内的静态 index.html 提供服务。

// RENDER REACT STATIC INDEX.HTML FROM BUILD
if(process.env.NODE_ENV === 'production') {
  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'))
  })
}

好吧，在生产和开发过程中存在巨大差异。例如，如果我在 production 期间导航到/pages/plainhtmlfile，如果路由匹配，我可以提供 .EJS 文件。因为在生产期间只有 Express 运行，它提供静态文件，包括 React 构建文件夹 index.html。

//THIS WORKS DURING PRODUCTION, NOT WORKING DURING DEVELOPMENT.
app.get('/plainhtmlfile', (req, res) => {
  res.render('nonreactpage')
})

如何在可以提供“/plainthtmlfile”的地方进行开发？现在 create-react-app 是一个单独的进程，在开发期间运行在端口 3000 和快速端口 5000。

Answer 1

使用 webpack-dev-server 代理。它在开发环境中工作，将 URL 重定向到您指向的服务器。

例如，您的配置应如下所示，因为 express 服务器位于端口 5000

proxy: {
  "/plainhtmlfile": "http://localhost:5000"
}

键可以包含通配符，所以这个键将重定向所有以/api/开头的 URL

proxy: {
  "/api/**": "http://localhost:5000"
}

https://webpack.js.org/configuration/dev-server/#devserverproxy