2

Currently, I am working on a multi-stage pipeline for a react web app. When I push from VScode my pipeline in Azure Devops runs fine without any issues. However, i am receiving an error message that reads "You do not have permission to view this directory or page." when trying to access the app through its URL. the detailed log reads "403.14 Forbidden error message - The Web server is configured to not list the contents of this directory." I do see my package in Kudu in site/wwwroot/mywebapp

Below I added the web.config and the yaml pipeline files. I've tried setting a default document in web app configuration and modifying the webconfig, but the issue still remains.

web.config

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <directoryBrowse enabled="true" />
        <modules runAllManagedModulesForAllRequests="true"></modules>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <customErrors mode="Off" />
        <httpErrors errorMode="Detailed"></httpErrors>
    </system.webServer>
</configuration>

pipeline-build.yml

jobs:
  - job: 'Build'
    displayName: "Build Ale Azure Functions"
    pool:
      vmImage: 'windows-latest'
    
    steps:    
    - task: NodeTool@0
      displayName: 'Install Node.js'
      inputs:
        versionSpec: '12.x'
      
    - script: 
        npm install
      displayName: 'npm install'
    
    - script:
        npm build
      displayName: 'npm build'

    - task: CopyFiles@2
      displayName: 'Copy files'
      inputs:
        sourceFolder: '$(Build.SourcesDirectory)' 
        Contents: '**/*'
        TargetFolder: '$(Build.ArtifactStagingDirectory)'
        cleanTargetFolder: true
    
    - task: ArchiveFiles@2
      displayName: Archive files
      inputs:
        rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true
      
    - task: PublishBuildArtifacts@1
      displayName: 'Publish Build Artifacts'
      inputs:
        pathtoPublish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

pipeline-release.yml

jobs:
  - deployment: Deploy
    displayName: 'Deploy Ale Azure Functions'
    environment: TEST
    pool:
      vmImage: 'windows-latest'
    strategy:
      runOnce:
        deploy:
          steps:
          - task: DownloadBuildArtifacts@0
            displayName: 'Download the build artifacts'
            inputs:
              buildType: 'current'
              downloadType: 'single'
              artifactName: 'drop'
              downloadPath: '$(Build.ArtifactStagingDirectory)'

          - task: AzureWebApp@1
            displayName: Release package to Azure WebApp
            inputs:
              azureSubscription: app-test-service-connection
              AppName: 'my-app-prod'
              appType: WebApp
              resourceGroupName: my-app-rg
              package: '$(System.ArtifactsDirectory)/**/*.zip'
RSP
  • 21
  • 2

0 Answers0