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

Question

After succesfull pipeline run to deploy my Next.js Ts React app to my AppService when Im trying to go to the url of the app I see **"**You do not have permission to view this directory or page."
My pipeline:

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '
  displayName: 'Install Node.js'

- task: Cache@2
  displayName: 'Cache .next/cache'
  inputs:
    key: next | $(Agent.OS) | yarn.lock
    path: '$(System.DefaultWorkingDirectory)/.next/cache'

- script: |
    yarn install
    yarn build
  displayName: 'yarn install and build'
  
- script: ls -R $(System.DefaultWorkingDirectory)/.next
  displayName: 'List build contents'

# Archive the build artifacts into a .zip file
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/.next' # Adjust this path to the folder you want to archive, e.g., your build output directory
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/build.zip'
    replaceExistingArchive: true

# Publish the build artifact
- task: PublishBuildArtifacts@1
  inputs:
    PathToPublish: '$(Build.ArtifactStagingDirectory)/build.zip'
    ArtifactName: 'drop'
    publishLocation: 'Container'
    

# Deploy the .zip file to Azure App Service
- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'Azure paid as you go subscription xxxxx'
    appType: 'webApp'
    WebAppName: 'poland-prod-app'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/build.zip'

Also I have downloaded the Artifact to see folder structure and when I unzip Artifact I see :

And chatGPT is saying that the folder structure could be wrong but I don't know how to change it because I'm just zipping the file that's it hmm
Any Advices hints how approach solving it will be much appretiated!
Im trying to solve it 2 weeks now ...

Answer 1

I was wondering if its possible that its failing because on my App Service I have windows but here in pipeline Im installing "ubuntu-latest" instead of "windows-latest"
and I have changed my pipelines:

trigger:
- main

pool:
  vmImage: 'windows-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.18.0'
  displayName: 'Install Node.js'

- task: Cache@2
  displayName: 'Cache .next/cache'
  inputs:
    key: next | $(Agent.OS) | yarn.lock
    path: '$(System.DefaultWorkingDirectory)/.next/cache'

- script: |
    echo "Displaying the current directory:"
    pwd
    echo "Listing contents of the current directory:"
    dir
  displayName: 'Check current directory and list contents'
  
  
- script: |
    yarn install --frozen-lockfile --network-timeout 1000000
    yarn build
  displayName: 'yarn install and build'

- task: CmdLine@2
  inputs:
    script: 'dir "$(System.DefaultWorkingDirectory)" /B'
  displayName: 'List working directory contents after build'
  
- script: |
    if exist "$(System.DefaultWorkingDirectory)\.next" (
      dir "$(System.DefaultWorkingDirectory)\.next" /S /B
    ) else (
      echo "Directory .next does not exist."
    )
  displayName: 'Check and list build contents'



# Archive the build artifacts into a .zip file
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/.next' # Adjust this path to the folder you want to archive, e.g., your build output directory
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/build.zip'
    replaceExistingArchive: true

# Publish the build artifact
- task: PublishBuildArtifacts@1
  inputs:
    PathToPublish: '$(Build.ArtifactStagingDirectory)/build.zip'
    ArtifactName: 'drop'
    publishLocation: 'Container'
    

# Deploy the .zip file to Azure App Service
- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'Azure paid as you go subscription XXXXX'
    appType: 'webApp'
    WebAppName: 'poland-prod-v4'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/build.zip'
    StartupCommand: 'npx next start -p %PORT%'

    

And what's intresting is that when I have checked with this step from my pipelines :

- task: CmdLine@2  inputs:    script: 'dir "$(System.DefaultWorkingDirectory)" /B'  displayName: 'List working directory contents after build'

I see ( there is no next. like next is not installed :/ ):

.editorconfig

.eslintignore

.eslintrc

.gitignore

.prettierignore

.prettierrc

azure-pipelines-1.yml

azure-pipelines-2.yml

azure-pipelines-3.yml

azure-pipelines.yml

next-env.d.ts

next.config.js

node_modules

package-lock.json

package.json

public

README.md

src

tsconfig.json

yarn.lock

if anything my package.json has:

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

ehh Im wondering what's happening why there is no next after yarn install and yarn build

Answer 2

1. Zip up both .next and node_modules and then deploy.
2. Call .\node_modules\next\dist\bin\next start to launch your web app (on Linux).

If you choose Windows, follow my post to configure IIS and HttpPlatformHandler via web.config.