Azure auto deploy frontend webapp port 8080 problem

Question

I'm using Azure to auto deploy from my staging branch my React/Vite app. But I keep getting this error

2024-07-30T15:16:13.774Z ERROR - Container my-app-staging-front_0_e908af59 for site clear-me-staging-front has exited, failing site start
2024-07-30T15:16:13.839Z ERROR - Container my-app-staging-front_0_e908af59 didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.

After looking around for a solution, I added an environnement variable inside Azure doing WEBSITES_PORT=8080 and I also changed my vite.config.js file:

import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import checker from 'vite-plugin-checker';

// ----------------------------------------------------------------------

export default defineConfig({
  plugins: [
    react(),
    checker({
      eslint: {
        lintCommand: 'eslint "./src/**/*.{js,jsx,ts,tsx}"',
      },
      overlay: {
        initialIsOpen: false,
      },
    }),
  ],
  resolve: {
    alias: [
      {
        find: /^~(.+)/,
        replacement: path.join(process.cwd(), 'node_modules/$1'),
      },
      {
        find: /^src(.+)/,
        replacement: path.join(process.cwd(), 'src/$1'),
      },
    ],
  },
  server: {
    port: 8080,
  },
  preview: {
    port: 8080,
  },
});

Here is the my-app-staging-front.yml file

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - my-app-staging-front

on:
  push:
    branches:
      - staging
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'my-app-staging-front'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_SOMESECRETNUMBERS }}
          package: .

And finally my script in package.json:

  "scripts": {
    "dev": "vite --mode development",
    "start": "vite preview",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:staging": "vite build --mode staging",
    "build:prod": "vite build --mode production",
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "rm:all": "rm -rf node_modules .next out dist build",
    "re:start": "yarn rm:all && yarn install && yarn dev",
    "re:build": "yarn rm:all && yarn install && yarn build",
    "re:build-npm": "npm run rm:all && npm install && npm run build",
    "dev:host": "vite --host",
    "dev:dev": "vite --mode development",
    "dev:staging": "vite --mode staging",
    "dev:prod": "vite --mode production"
  },

I'm running out of ideas on what to add/modify to make it run or at least have more details about the reason of this ERROR.

Thank you in advance

P.S: Extra, if anyone knows why it takes 30 minute to deploy it would also help me.

Answer 1

React with Vite app be default run on 5173 port.

To serve React with Vite frontend application in Azure App service on Linux you need to serve it by running command pm2 serve /home/site/wwwroot/<path to your build/dist folder> --spa --no-daemon.

This worked for me.

OUTPUT:

pm2 serve /home/site/wwwroot<path to your build/dist folder> --spa --no-daemon serves app on port 8080