如何在Azure App Services中部署SSR React App？

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将编译代码{{1}的值如下图所示，将process.env.PORT || 3000中的}插入src/index.js中。

请注意：如果我通过Windows上的命令build/server.js或{Linux上的PORT将5000环境端口设置为值set PORT=5000，则{ {1}}将代替export PORT=5000，而不是"3000"代码。

但是，要在Azure WebApp上运行Node.js应用程序，必须使用build/server.js从环境变量"5000"中读取端口，然后上传process.env.PORT中的所有文件，并将process.env.PORT文件放到Azure上，以使用WebApp设置的PORT环境变量的值使应用程序正常工作。

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