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

Question

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

当我使用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

我正在使用 package 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

演示应用程序的 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 而不是生产的测试/演示。

Answer 1

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

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

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

注意：这个答案解释了如何运行它，但没有解释为什么。

有关原因，请参阅另一个问题。