React Azure Web App error 504 on deploy pipeline

OSCAR LOZANO PADILLA 0 Reputation points
2023-01-14T18:11:23.3533333+00:00

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): enter image description here

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): enter image description here

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)): [enter image description here

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):
enter image description here

In my task config i have: enter image description here

Someone knows which is the problem?

Windows for business | Windows Client for IT Pros | Devices and deployment | Set up, install, or upgrade
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
8,937 questions
{count} votes

1 answer

Sort by: Most helpful
  1. ajkuma 28,036 Reputation points Microsoft Employee Moderator
    2023-01-24T11:01:25.92+00:00

    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)

    1. 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:

    1. 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.

    1. 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.

    User's image

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.