-1

I created an Angular universal app which is working fine in local but when I try to deploy it in Azure App Service its deploying successfully but not running the app. Getting 403 forbidden.

`# Node.js with Angular

trigger:

  • development

pool: vmImage: "ubuntu-latest"

stages:

  • stage: Build displayName: Build stage jobs:

    • job: Build pool: vmImage: "ubuntu-latest" steps:

      • task: NodeTool@0 inputs: versionSpec: "18.x" displayName: "Install Node.js 18.x"

      • script: | cd app/ npm install -g @angular/cli npm install --legacy-peer-deps npm run build:dev:ssr

        displayName: "npm install and build" workingDirectory: "$(Build.SourcesDirectory)"

      • task: CopyFiles@2 inputs: SourceFolder: "$(Build.SourcesDirectory)/dist/app/browser" TargetFolder: "$(Build.ArtifactStagingDirectory)/dist/app" displayName: "Copy dist browser folder to artifact staging directory"

      • task: CopyFiles@2 inputs: SourceFolder: "$(Build.SourcesDirectory)/dist/app/server" Contents: main.js TargetFolder: "$(Build.ArtifactStagingDirectory)/dist/app" displayName: "Copy main.js to artifact staging directory"

      • task: PublishTestResults@2 condition: succeededOrFailed() inputs: testResultsFormat: "JUnit" testResultsFiles: "**/TESTS-*.xml" displayName: "publish unit test results"

      • task: ArchiveFiles@2 displayName: "Archive files" inputs: rootFolderOrFile: "$(System.DefaultWorkingDirectory)" includeRootFolder: false archiveType: zip archiveFile: $(Build.ArtifactStagingDirectory)/drop.zip replaceExistingArchive: true

      • task: PublishBuildArtifacts@1 inputs: PathtoPublish: "$(Build.ArtifactStagingDirectory)/drop.zip" ArtifactName: "drop" publishLocation: "Container"

  • stage: Development displayName: "Deploy to Development" dependsOn: Build condition: succeeded() jobs:

    • deployment: DeploymentDevelopment pool: vmImage: "ubuntu-latest" environment: Development strategy: runOnce: deploy: steps: - task: AzureWebApp@1 displayName: "Deploy App Service" inputs: azureSubscription: "xxxxxxxxxxx" appName: "app" package: "$(Pipeline.Workspace)/drop/drop.zip" runtimeStack: "NODE|16-lts" `

this is my pipline and even tried manual deployment using FTP server in azure app service nothing seems to be working.** I think the issue is with the dist directory structure. It would be helpful if someone can help.**

Manikandan Thangapandiyan
  • 1
  • 1

1 Answers1

0

I modified my Azure App service folder structure like this

  • wwwroot
    • browser folder
      • browser contents
    • server contents
    • webconfig

this is my webconfig

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <webSocket enabled="false" />
        <handlers>
            <add name="iisnode" path="main.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
            <rules>
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^main.js\/debug[\/]?" />
                </rule>
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                    </conditions>
                    <action type="Rewrite" url="main.js"/>
                </rule>
                <rule name="Angular Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
        <security>
            <requestFiltering>
                <hiddenSegments>
                    <remove segment="bin"/>
                </hiddenSegments>
            </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough" />
    </system.webServer>
</configuration>
Manikandan Thangapandiyan
  • 1
  • 1