After Deploying on Azure NextJs App wrapped in Express, app loads forever

Question

Hi I am trying to deploy nextjs app using devOps project with server.js which looks like that:

 const express = require('express') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() app.prepare() .then(() => { var port = process.env.port || 3001 const server = express() server.get('*', (req, res) => { return handle(req, res) }) server.listen(port, (err) => { if (err) throw err console.log('> Ready on http://localhost:433') }) }) .catch((ex) => { console.error(ex.stack) process.exit(1) }) 

For devOPs project I set up github, vsts and then it goes off to azure.

I used the default set up for nodejs, only what I did additionaly in VSTS pipelines I added npm script "npm run build".

My agent job in buld looks like this:

• -User node version
• -Npm install application dependencies
• -Npm custom (Added by me, run build)
• -Archive Files
• -Public Artifact drop.

And in release:

• Azure Deployment: Create Azure App
• Deploy Azure App Service

The problem is that Build succedes same as release, but then when I try to access the website it loads forever. I did my research but found nothing.

I have been trying to make it work for 3 days now... Please help

Answer 1

Yesterday I successfully deployed NextJs App to Azure App service by using Azure Devops build and release pipelines.

Below are three issues I faced. I am also sharing solution screenshots for each issue.

1. Azure App service Node version should be compatible with your nextjs.

   https://i.imgur.com/UPDc9GE.png

2. Missing web.config file at root

   https://i.imgur.com/EZRTT4P.png

3. Incorrect port number in server.js and incorrect script tags in package.json

   https://i.imgur.com/PJadc7b.png

My build pipeline looks similar like you. https://i.imgur.com/0Y8m2wH.png