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,930 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.