React Azure Web App error 504 on deploy pipeline

Question

im trying to deploy mi first web page with React on Azure Web App using CI/CD (Azure pipelines). The React web page is simply, only use react material and react-router-dom. I have 2 pages, 404 not found and home page. On npm start the app shows in my local my 404 page (this is correct):

A fraction of my code on App.js:

import './App.css';
import {Routes, Route} from "react-router-dom"
import HomePage from './Pages/Home/HomePage';
import NotFoundPage from './Pages/Default/NotFoundPage';
import { AppSettings } from './appsettings';

function App() {
  const root= AppSettings.Root.length>0 ? "/" + AppSettings.Root: "/"
  return (
    <div className="App">
      <Routes>
        <Route exact path={root} element={<HomePage/>}/>
        <Route path="*" element= {<NotFoundPage/>}/>
      </Routes>
    </div>
  );
}
export default App;

But in my deployed azure web app i have this (pass over 3 minutes charging)(sometimes is 503 and sometimes is a error page):

I have my git repo in github (i dont know if is a problem the use of container folder by the react app(react-portfolio)): [

My yaml file for the CI/CD is:

trigger:
- main

pool:
 vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'
  workingDirectory: '$(Build.SourcesDirectory)/react-portfolio'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.BinariesDirectory)'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile:'$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

I have a canalization to deploy in Azure Web App (F1 plan, linux):

In my task config i have:

Someone knows which is the problem?

Answer 1

Thanks for posting this question.

Apologies you’re experiencing this issue and for delayed response from over the weekend.

To narrow down the issue:

1.You may try to scale up to a higher ASP tier and then check (as a quick step)

2. If the Always On setting is off, please enable it from Azure Portal – Your WebApp > Configuration blade (> General settings).

 To fetch more details about the issue, you may try these:

3. You may leverage App Service diagnostics from Azure Portal> Navigate to your App Service app in the Azure Portal. (screenshot below).

In the left navigation, click on Diagnose and solve problems - Review -
“Configuration and Management and “Availability and Performance”  options.

4. Navigate through Kudu site on: https://<sitename>.scm.azurewebsites.net/api/logs/ , to fetch info.

5.Review - Review CI/CD Pipelines | check right port is configured.

6.By default, if your container does not respond after 230 seconds, it will time out. (This time out can be increased by with the WEBSITES_CONTAINER_START_TIME_LIMIT app setting.) (up to a maximum of 1800)
Kindly let us know how it goes, I'll follow-up with you.