Application Error after React Deployment to Azure Service

Question

After successfully deploying the react app to a newly created azure service, I get the following error message:

The output of the Azure Log Stream is:

2024-02-27T17:53:27.614155353Z
2024-02-27T17:53:27.614932473Z npm start
2024-02-27T17:53:29.925891478Z npm info using npm@9.6.4
2024-02-27T17:53:29.926435630Z npm info using node@v18.17.1
2024-02-27T17:53:29.959556490Z
2024-02-27T17:53:29.959645778Z > my-app@0.1.0 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 ---

and this is my 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"]

I already wasted several hours trying to fix the issue but without any progress. Any advises would be really appreciated!

Answer 1

Ensure that react-scripts is listed as a dependency in your package.json.

If you are using an old version of Node.js, try to update it.

I tried the simple code, containerized it with Docker, and successfully deployed it to the Azure App Service.

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"
    ]
  }
}

Use the commands below to build and run the ReactApp in a Docker image:

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

Local Output:

I ran the following command to push the image to Azure Container Registry:

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

While creating an Azure web app, I selected the "Publish" option as "Docker Container," as shown below.

It was Successfully deployed as shown below:

Azure Log Stream:

Azure App Service Output: