Cannot deploy Nextjs application on app service using Azure Pipleline

Question

I try to depoyed nextjs app to appservice using azure pipeline. First Build Stage and Deploy stage are worked. But when I go to console on app service, it don't create web.config and when I access the url it shows text like: "You do not have permission to view this directory or page." My app work perfectly on Local.

Is there any steps I do wrong? Please help me,thank you.

Configuration: appservice: OS-Windows, Node 16 / Agents: OS Windows

# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
  branches:
    include:
    - master
    - releases/*
    - develop

pool: 'window-agent-fe'
stages:
  - stage: BuildStage
    jobs:
      - job: BuildJob
        steps:
        - task: CmdLine@2
          displayName: 'Instal Zip file Supported'
          inputs:
            script: 'sudo apt-get -y install zip'
        - task: NodeTool@0
          inputs:
            versionSpec: '16.x'
            checkLatest: true
          displayName: 'Install Node.js'
        - script: npm i --force
          displayName: 'Install Node Packages'
        - script: npm run lint
          displayName: Lint
        - script: npm run build
          displayName: 'Build'
        - task: ArchiveFiles@2
          inputs:
            rootFolderOrFile: '$(System.DefaultWorkingDirectory)/.next/'
            includeRootFolder: false
            archiveType: 'zip'
            archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
            replaceExistingArchive: true
            verbose: true
        - publish: "$(Build.ArtifactStagingDirectory)"
          artifact: package
  - stage: 'DeployStage'
    dependsOn: BuildStage
    condition: succeeded()
    jobs:
      - deployment: 'DevDeployJob'
        environment: DEV
        strategy:
          runOnce:
            deploy:
              steps:
                - download: current
                  displayName: Download build file
                  artifact: package
                - task: AzureRmWebAppDeployment@4
                  inputs:
                    ConnectionType: 'AzureRM'
                    azureSubscription: '***********'
                    appType: 'webApp'
                    WebAppName: 'fpt-capstone-client'
                    packageForLinux: '$(System.WorkFolder)/1/package/$(Build.BuildId).zip'

Error page from Log stream:

score 2 · Accepted Answer · answered Jun 16 '22 at 08:27

"You do not have permission to view this directory or page."

enter image description here

Follow workaround to fix the issue:

The issue happens because of if we not added any of the server.js or web.config files.

In your package.json file make sure to add the below line of code.

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT",
    "now-build": "next build"

Instead of above you can use the below.

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js",
    "now-build": "next build"
    }

enter image description here

While deploying your nextjs application into azure you have to add the web.config file in root directory. Refer here

In your Server.js file if you are using

const  port = parseInt(process.env.PORT, 10) || 3000;

this try to change it like below

const port = process.env.PORT || 3000;

enter image description here

If still you are facing the issue after deployed in a azure app service. Try to change your virtual Applications and Directories Physical Path like \site\wwwroot\ into some your landing page like \site\wwwroot\pages\index.html

Reference

Next js deployment on azure app service

Cannot deploy Nextjs application on app service using Azure Pipleline

1 Answers1

Follow workaround to fix the issue:

Reference