Unable to deploy a React WebApp (VS-Code) to Azure App Service

Question

I am developing a WebApp in React in VS-Code and I want to deploy it on Azure Web App Services.

First I tried using the github pipelines, it builded and deployed successfully, but seems not to work with free plans. Indeed, If I try to set up the pipeline using VS-Code UI, my app service is not visible.
Then I tried to use Docker, created the Dockerfile. First I tried to use serve as web server with the following Dockerfile:

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

When I navigate to my website I get a 404.

Last try, using nginx, with the following Dockerfile:

FROM node:14-alpine as build  
WORKDIR /app  
COPY package*.json ./  
RUN npm ci  
COPY . ./  
RUN npm run build  
  
FROM nginx:1.20-alpine  
ENV NGINX_PROTOCOL http2  
COPY --from=build /app/public /usr/share/nginx/html  
COPY nginx-config /etc/nginx  

Here I get :( Application Error. If you are the application administrator, you can access the diagnostic resources.

Why is Azure so complicated?
Please need help.

I also tried to follow this, it deploys, but if I browse the app I get:

And in the logs I find:

2021-07-07T08:26:19.215Z ERROR - Container XXXXXXX for site XXXXXXX did not start within expected time limit. Elapsed time = 230.9546994 sec 2021-07-07T08:26:19.233Z ERROR - Container XXXXXXX didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.

Answer 1

The problem were the NGINX settings, i had to remove the http2 from the listen property of the server settings in the default.conf.template:

server {
    listen      80 ${NGINX_PROTOCOL};
    root        /usr/share/nginx/html;

    # security
    include     /etc/nginx/nginxconfig.io/security.conf;

    # index.html fallback
    location / {
        try_files $uri $uri/ /index.html;
    }

    # additional config
    include /etc/nginx/nginxconfig.io/general.conf;
}

Edit the following line:

listen      80 ${NGINX_PROTOCOL}; ->  listen      80;

and accordingly remove the line from the Dockerfile:

ENV NGINX_PROTOCOL http2

Answer 2

You may troubleshoot WebApp and check logs here

You can try this Dockerfile

 FROM node:14-alpine as build  
 WORKDIR /app  
 COPY package*.json ./  
 RUN npm ci  
 COPY . ./  
 RUN npm run build  
      
 FROM nginx:stable  
 ENV NGINX_PROTOCOL http2  
 COPY --from=build /app/public /usr/share/nginx/html  
 COPY nginx-config.conf /etc/nginx/conf.d/default.conf  

EXPOSE 80  

CMD ["nginx","-g","daemon off;"]