为啥我的 ReactJS 应用程序在本地运行但不在 Azure 中运行？

Posted 2023-03-27

【中文标题】为啥我的 ReactJS 应用程序在本地运行但不在 Azure 中运行？

【英文标题】：Why Does My ReactJS App Run Locally But Not In Azure?为什么我的 ReactJS 应用程序在本地运行但不在 Azure 中运行？

【发布时间】：2021-03-12 00:18:11

【问题描述】：

我有一个 ReactJS 应用程序，它作为假 API 连接到 json-server。 我已将其部署到 Azure using VSCode 和 F1 Free Linux 层。

当我使用 npm start 在本地运行它时，一切正常。

  "scripts": 
      "start": "npm-run-all --parallel mock web",
      "web": "cross-env PORT=8080 react-scripts start",
      "mock": "node index.js"
    ,

index.js 包含 json-server 配置等，因为它比 json-server --watch db.json 多一点

我正在使用包 npm-run-all 同时运行 json-server 和 react 应用程序。

这在本地运行良好，但是当我尝试将其部署到 Azure 时，容器无法启动：

INFO  - Starting container for site
INFO  - docker run -d -p 7307:8080 --name demo_0_8cd -e WEBSITE_SITE_NAME=demo -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=demo.azurewebsites.net -e WEBSITE_INSTANCE_ID=8fe4512f9f -e HTTP_LOGGING_ENABLED=1 appsvc/node:12-lts_20200918.1
INFO  - Initiating warmup request to container demo_0_8cd for site demo
ERROR - Container demo_0_8cd for site demo has exited, failing site start
ERROR - Container demo_0_8cd didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.
INFO  - Stopping site demo because it failed during startup.

我在容器日志中看不到太多可以调试的内容。

我也不知道 Azure 使用什么命令来启动，因为它在日志中显示的只是 docker run。

是在调用npm start吗？ （见编辑 - tldr：是的） 为什么它可以在本地运行，但不能在 Azure 中运行？ 为什么不响应 ping？ 这与作为一个 React 应用程序而不是“只是”一个节点应用程序有关吗？

编辑：

本教程生成的 docker 容器在 /opt/startup 中有脚本。

模板是/opt/startup/init_container.sh，其中包含：

STARTUP_COMMAND_PATH="/opt/startup/startup.sh"
STARTUPCOMMAND=$(cat $STARTUP_COMMAND_PATH)
echo "Running $STARTUPCOMMAND"
$STARTUP_COMMAND_PATH

/opt/startup/startup.sh 包含

# Enter the source directory to make sure the script runs where the user expects
cd "/home/site/wwwroot"
npm start

demo 应用的 package.json 中的启动脚本有 "start": "node ./bin/www"

然后有：

var http = require('http');
var server = http.createServer(app);
server.listen(port);

所以这里的关键是它运行npm start，然后创建一个 nodejs 服务器来为端口 8080 上的应用程序提供服务。

我的应用程序中的npm start 最终调用react-scripts start，它使用WebpackDevServer

虽然您不应该将开发服务器用于生产，但这是否也意味着您出于某种原因不能在服务器上使用它？

这只是一个测试/演示，让自己熟悉 Azure，不是生产。

【问题讨论】：

你是如何编译你的 react 应用的？或者您是否出于某种奇怪的原因尝试在云虚拟机上运行开发服务器？一旦你的应用程序被编译，你根本不需要节点，（除了你的假后端）使用 nginx 或 apache 提供你的 React 东西。

我很确定它正在做npm run build。该链接中的快速演示在没有 nginx 或 apache 的情况下也可以正常工作。

检查***.com/a/60594983/13791953

@opticyclic 不，你不使用 nginx 运行 express，你怎么能？ npm build 会创建您的静态资产，但是您如何服务它们？

【参考方案1】：

最终结果是npm run 正在运行 WebpackDevServer。

这不是为生产而设计的，因此我们需要另一种在 Azure 上运行的方式。

将 Azure webapp 启动命令更改为 npx serve -l 8080 build 将在 Azure 中运行 ReactJS 应用程序。

注意：这个答案解释了如何运行它，而不是为什么。

查看other question 了解原因。