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:

SuryasriKamini-MT · Accepted Answer · 2022-06-16 08:27:53Z

3

"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

answered Jun 16, 2022 at 8:27

SuryasriKamini-MT

9554 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mgpmul Over a year ago

Nice answer, though it did not fix the "You do not have permission..." problem for me. (1) Should the solution work for both Nexjs with Pages routing and App routing? (I use App routing) (2) What is the procedure to add the web.config and server.js file in the root directory while deploying? The reference you added does not answer that question either. I added these files to my repository, but they did not end up in the package for publishing. I added the files by hand (using the App Service Editor), but that shouldn't be the way to go. Any tips?

Collectives™ on Stack Overflow

Cannot deploy Nextjs application on app service using Azure Pipleline

1 Answer 1

Follow workaround to fix the issue:

Reference

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Follow workaround to fix the issue:

Reference

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related