I’m using Azure to auto deploy from my staging branch my React/Vite app. But I keep getting this error
<code>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.
</code>
<code>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.
</code>
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:
<code>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,
},
});
</code>
<code>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,
},
});
</code>
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
<code># 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: .
</code>
<code># 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: .
</code>
# 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:
<code> "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"
},
</code>
<code> "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"
},
</code>
"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.