Azure Pipelines - Code keeps going under wwwroot/s instead of wwwroot

Question

trigger:
  branches:
    exclude:
      - "*"

pool:
  vmImage: 'ubuntu-latest'

stages:
- stage: BuildAndPublish
  displayName: 'Build and Publish'
  jobs:
  - job: BuildAndPublishJob
    displayName: 'Build and Publish'
    steps:
    - task: NodeTool@0
      displayName: 'Install Node.js'
      inputs:
        versionSpec: '14.x'
        checkLatest: true

    - script: |
        npm install
        npm run build:dev
      displayName: 'Build React App'

    - task: PublishPipelineArtifact@1
      displayName: 'Publish Artifact'
      inputs:
        artifact: 'drop'
        publishLocation: 'pipeline'

- stage: DeployFunctionApp
  displayName: 'Deploy Function App'
  dependsOn: BuildAndPublish
  jobs:
  - job: DeployFunctionAppJob
    displayName: 'Deploy Function App'
    steps:
    - task: DownloadPipelineArtifact@2
      displayName: 'Download Artifact'
      inputs:
        artifactName: 'drop'
        downloadPath: '$(Pipeline.Workspace)/drop'
    - task: AzureWebApp@1
      displayName: 'Azure App Service Deploy'
      inputs:
        azureSubscription: $(serviceConnection)
        appName: $(webAppName)
        package: '$(Pipeline.Workspace)/drop'
        deploymentMethod: 'runFromPackage'
        appType: 'webApp'
        appSettings: '-appServicePlan $(appServicePlan)'

I'm trying to publish a app service to azure with this pipeline. The pipeline runs successfully, but I get a "You do not have permission to view this directory or page." error when accessing the page. After looking at the site on kudo, I noticed that all the code is under the source directory wwwroot/s instead of wwwroot. Any help would be appreciated.

SiddheshDesai · Answer 1 · 2023-06-21T10:28:21.917

I tried deploying one React app via Azure DevOps pipeline and it was successful:-

I have used Nodejs react template like below:-

enter image description here

trigger:
- master

variables:

 
  azureSubscription: 'xxxxxxxxxxa86d831'

  # Web app name
  webAppName: 'siliconwebapp655'

  # Environment name
  environmentName: 'siliconwebapp655'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureRmWebAppDeployment@4
            displayName: 'Azure App Service Deploy: siliconwebapp655'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              WebAppName: $(webAppName)
              packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              RuntimeStack: 'NODE|18.10'
              StartupCommand: 'npm run start'
              ScriptType: 'Inline Script'
              InlineScript: |
                npm install
                npm run build --if-present

Output:-

enter image description here

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

In order to resolve this error, Refer my SO thread answer on the same issue.

Your React application is placed in output directory build:dev but the Build Artifact is not saved to the drop folder correctly, Make sure your drop folder has correct zip file uploaded.

You can modify your pipeline like below:-

trigger:
  branches:
    exclude:
      - "*"

pool:
  vmImage: 'ubuntu-latest'

stages:
- stage: BuildAndPublish
  displayName: 'Build and Publish'
  jobs:
  - job: BuildAndPublishJob
    displayName: 'Build and Publish'
    steps:
    - task: NodeTool@0
      displayName: 'Install Node.js'
      inputs:
        versionSpec: '14.x'
        checkLatest: true

    - script: |
        npm install
        npm run build:dev
        echo $(Build.SourcesDirectory)
        ls $(Build.SourcesDirectory)/build:dev # Verify that the build output exists
      displayName: 'Build React App'

    - task: PublishPipelineArtifact@1
      displayName: 'Publish Artifact'
      inputs:
        artifact: 'drop'
        publishLocation: 'pipeline'
        targetPath: '$(Build.SourcesDirectory)/build:dev' # Publish the build output

- stage: DeployFunctionApp
  displayName: 'Deploy Function App'
  dependsOn: BuildAndPublish
  jobs:
  - job: DeployFunctionAppJob
    displayName: 'Deploy Function App'
    steps:
    - task: DownloadPipelineArtifact@2
      displayName: 'Download Artifact'
      inputs:
        artifactName: 'drop'
        downloadPath: '$(Pipeline.Workspace)/drop'
        
    - task: AzureWebApp@1
      displayName: 'Azure App Service Deploy'
      inputs:
        azureSubscription: $(serviceConnection)
        appName: $(webAppName)
        package: '$(Pipeline.Workspace)/drop/build:dev' # Set the deployment package path to the build output
        deploymentMethod: 'runFromPackage'
        appType: 'webApp'
        appSettings: '-appServicePlan $(appServicePlan)'

Make sure your Build.SourcesDirectory includes your code file correctly.

Also, Check if your repository file structure is correct. My Azure Repo React file structure:-

enter image description here

I tried accessing my folder via Kudu tool and my wwwroot file looked like below:-

ls
cd site
cd wwwroot
ls

enter image description here

Azure Pipelines - Code keeps going under wwwroot/s instead of wwwroot

1 Answers1

Linked