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