CODEWITHSUNDEEP
reactjsazurenext.jsazure-pipelines
Vo Nhu Khang
Vo Nhu Khang

Reputation: 51

Cannot deploy Nextjs application on app service using Azure Pipleline

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: enter image description here

Upvotes: 1

Views: 2946

Answers (1)

SuryasriKamini-MT
SuryasriKamini-MT

Reputation: 915

"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 enter image description 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 enter image description here

Reference

Upvotes: 3

Related Questions