React 部署到 Azure 服务后出现应用程序错误

Question

成功将React应用程序部署到新创建的Azure服务后，我收到以下错误消息：

Azure 日志流的输出是：

2024-02-27T17:53:27.614155353Z
2024-02-27T17:53:27.614932473Z npm start
2024-02-27T17:53:29.925891478Z npm info using [email protected]
2024-02-27T17:53:29.926435630Z npm info using [email protected]
2024-02-27T17:53:29.959556490Z
2024-02-27T17:53:29.959645778Z > [email protected] start
2024-02-27T17:53:29.959657440Z > react-scripts start
2024-02-27T17:53:29.959663391Z
2024-02-27T17:53:29.983131237Z sh: 1: react-scripts: not found
/home/LogFiles/2024_02_27_10-30-0-178_docker.log  (https://1001goldservice.scm.azurewebsites.net/api/vfs/LogFiles/2024_02_27_10-30-0-178_docker.log)
2024-02-27T17:53:23.038Z INFO  - 18-lts_20230908.2.tuxprod Pulling from appsvc/node
2024-02-27T17:53:23.050Z INFO  -  Digest: sha256:f968f5d09a5e36f4e447bb8e3073f284b3ecc4bb60cf72d1243c35dc6fd5b29e
2024-02-27T17:53:23.050Z INFO  -  Status: Image is up to date for 10.1.0.4:13209/appsvc/node:18-lts_20230908.2.tuxprod
2024-02-27T17:53:23.412Z INFO  - Pull Image successful, Time taken: 0 Seconds
2024-02-27T17:53:24.545Z INFO  - Starting container for site
2024-02-27T17:53:24.546Z INFO  - docker run -d --expose=8080 --name 1001goldservice_0_765d5d47 -e WEBSITE_USE_DIAGNOSTIC_SERVER=true -e WEBSITES_PORT=443 -e WEBSITE_SITE_NAME=1001GoldService -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=1001goldservice.azurewebsites.net -e WEBSITE_INSTANCE_ID=ae907ce840c6b95b786870ca4c1362dc92f4733f1b7145fe24a6c8a07a0d5ff4 -e HTTP_LOGGING_ENABLED=1 -e NODE_OPTIONS=--require /agents/nodejs/build/src/Loader.js appsvc/node:18-lts_20230908.2.tuxprod
2024-02-27T17:53:26.979Z INFO  - Initiating warmup request to container 1001goldservice_0_765d5d47 for site 1001goldservice
2024-02-27T17:53:31.051Z ERROR - Container 1001goldservice_0_765d5d47 for site 1001goldservice has exited, failing site start
2024-02-27T17:53:31.056Z ERROR - Container 1001goldservice_0_765d5d47 didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.
2024-02-27T17:53:31.080Z INFO  - Stopping site 1001goldservice because it failed during startup.Ending Log Tail of existing logs ---Starting Live Log Stream ---

这是我的 DOCKERFILE

# Use an official Node runtime as a parent image
FROM node:14

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install any needed packages specified in package.json
RUN npm install

# Bundle app source inside the Docker image
COPY . .

# Build the app
RUN npm run build

# Install `serve` to run the application
RUN npm install -g serve

# The container will listen on port 8080, aligning with Azure's default
EXPOSE 8080

# Command to run the app, specifying to serve on port 8080
CMD ["serve", "-s", "build", "-l", "8080"]

我已经浪费了几个小时试图解决这个问题，但没有任何进展。任何建议将非常感激！

Answer 1

确保

react-scripts

在您的

package.json

中被列为依赖项。

如果您使用的是旧版本的 Node.js，请尝试更新它。

我尝试了简单的代码，使用 Docker 将其容器化，并成功将其部署到 Azure 应用服务。

Dockerfile：

FROM node:18
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
RUN npm install -g serve
EXPOSE 8080
CMD ["serve", "-s", "build", "-l", "8080"]

.dockerignore:

node_modules
/build

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

使用以下命令在 Docker 镜像中构建并运行 ReactApp：

docker build -t <ImageName> . 
docker run -p 8000:8000 <ImageName>

本地输出:

我运行了以下命令将映像推送到 Azure 容器注册表：

az acr login -n <ContainerUserName> -u <userName> -p <Password>
docker tag <ImageName> <AzureContainerRegistryName>.azurecr.io/<imageName>:<tagName>
docker push <AzureContainerRegistryName>.azurecr.io/<ImageName>:<tagName>

在创建 Azure Web 应用程序时，我选择“发布”选项作为“Docker 容器”，如下所示。

部署成功如下图：

Azure 日志流:

Azure 应用服务输出：