reactjs - 如何在Azure应用服务中部署SSR React应用？

Question

我使用 razzle 设置了一个简单的应用程序和 react 。它在我的本地机器上完美运行，甚至在生产版本上也是如此。当我尝试将应用程序部署到 Azure 时，遇到错误 500。我检查了日志，应用程序确实已启动，但永远无法到达服务器(“/”路线)。

我试过这个web.config文件并使用简单的 Express 应用程序对其进行了测试，效果很好，但对我来说不起作用。

这是我的 server.js

const server = express();
 server
   .disable('x-powered-by')
   .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
   .get('/*', (req, res) => {
    console.log("This should trigger")

这是index.js

import http from 'http';

let app = require('./server').default;

const server = http.createServer(app);

let currentApp = app;

server.listen(process.env.PORT || 3000, error => {
  if (error) {
    console.log(error);
   }

   console.log('🚀 started in port ', process.env.PORT || 3000);
 });

此代码编译为单个 server.js 文件(我已经在 web.config 文件中指出了该文件)

我检查日志，这行出现在日志中

console.log('🚀 started in port ', process.env.PORT || 3000);

但不是这个

console.log("This should trigger")

服务器上没有任何内容或响应。

希望能帮到你。这让我发疯。

Answer 1

我尝试遵循 GitHub 存储库的自述文件 jaredpalmer/razzle构建并运行简单的项目 my-app，然后发现命令 npm run build 将编译代码 process.env.PORT || 的值3000 的 src/index.js 到 build/server.js 如下图。

注意:如果我在 Windows 上通过命令 set PORT=5000 或 export PORT= 将 PORT 环境端口设置为值 5000 5000 在 Linux 上，build/server.js 中的端口 "3000" 将代替 "5000"，而不是process.env.PORT 代码。

但是，要在 Azure WebApp 上运行 Node.js 应用程序，您必须使用 process.env.PORT 从环境变量 PORT 读取端口，然后将 build 中的所有文件和 web.config 文件上传到 Azure，以使应用程序使用 WebApp 设置的 PORT 环境变量的值来运行.

因此，要解决此问题，您需要通过搜索 "3000" 手动将 "3000" 替换为 process.env.PORT 或PORT环境的值，如下图，然后进行部署。