reactjs - Publish Next JS as NON-static files to my Azure web App is not working

Question

We have already been running a next js site as static files for the past few months and it has been running great. We want to add some of the functionality that is blocked by the next export function so we decided to run next js as non-statically rendered pages. There is almost no documentation on this so we had to make up some of the steps. It runs fine locally using the next start command. We tried setting up a pipeline in Azure Devops following the steps we had seen in another post. We added a server.js file, we set it up to run npm install, then next build, then next start. This publishes with no errors to localhost:3000 but nothing shows up on the web app.(we testd this with adding the port in the url as well as with no port added) We experimented with changing the port to 80 then to 443 as they are both opened by default on Azure. We tried 8080 and it didn't blow up but again nothing showed up on the page. We tried transferring over all of the files from the project and running the commands in the Kudu Diagnostic Console (in case the problem was the pipeline. In Kudu, we ran next start alone, next build and then next start back to back and none of these worked. Does anyone know something we are missing? Thank you for taking the time to read this as well as for any of your help!

question from:https://stackoverflow.com/questions/65894090/publish-next-js-as-non-static-files-to-my-azure-web-app-is-not-working

Answer 1

You can try setting up the start up command as npm run start:prod instead of next start.

You can add the start up command in the Azure App Service Deploy task.

- task: AzureRmWebAppDeployment@4
  displayName: deploy
  inputs: 
   azureSubscription: 'mysubscription'
   ...
   StartupCommand: 'npm run start:prod'

Or you can set the start up command in Startup Command under General Settings` in the Configuration blade in your azure web app portal.

When you use npm run start:prod. You need to make sure the start:prod command is defined in the scripts section in the package.json file. See below:

"scripts": {
    "build": "tsc -p tsconfig.build.json",
    "start": "ts-node -r tsconfig-paths/register src/main.ts",
    "start:prod": "node dist/main.js"

Please try archiving your whole project and deploy to azure app service, not just the /dist folder. See this thread.