next.js with custom express/node.js deployment on azure

Question

I was trying to deploy an app that uses Next.js on the frontend (with some getStaticProps function) and a custom express/node.js backend on azure. it uses MySQL as well (but I don't think that's related to the issue im having). The problem is that when I deploy it on azure I get "You do not have permission to view this directory or page." on the web page. My express file which contains all the routes and requests is in a folder named server and the file itself is called index.js. I also have a web.config file which looks like this:

    <configuration>
      <system.webServer>
        <handlers>
          <add name="iisnode" path="server/index.js" verb="*" modules="iisnode" />
        </handlers>
        <rewrite>
          <rules>
            <rule name="NodeServer" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="server/index.js" />
              <action type="Rewrite" url="server/index.js" />
            </rule>
            <rule name="NextJsRouting" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="^(.*)$" ignoreCase="false" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="server/index.js" />
            </rule>
          </rules>
        </rewrite>
        <iisnode nodeProcessCommandLine="&quot;C:\Program Files\nodejs\node.exe&quot;" />
      </system.webServer>
    </configuration>

and I have a iisnode.yml file which looks like this:

nodeProcessCommandLine: "node server/index.js"

the package.json file looks like this:

    {
      "name": "endelig",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "nodemon server/index.js",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
      },
      "dependencies": {
        "@next/font": "13.1.6",
        "@stripe/react-stripe-js": "^2.1.0",
        "@stripe/stripe-js": "^1.52.0",
        "bcrypt": "^5.1.0",
        "cookie-parser": "^1.4.6",
        "dotenv": "^16.0.3",
        "express": "^4.18.2",
        "jsonwebtoken": "^9.0.0",
        "micro": "latest",
        "micro-cors": "latest",
        "mysql": "^2.18.1",
        "next": "^13.1.6",
        "nodemailer": "^6.9.1",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "stripe": "^11.17.0"
      }
    }

the jsconfig.js file looks like this:

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["./*"]
        }
      }
    }

I have configured all the env variables as well in the web app in azure as well btw. I've been stuck for a few days and eny help would be greatly appreciated.

Deploying it on azure. Failed and got (You do not have permission to view this directory or page). on the web page

Answer 1

I tried to deploy Next.js Web app in Azure Web app with nodejs with Azure DevOps pipeline and it was successful:-

Make sure when you're building the Artifact it is getting zipped correctly in correct directory structure as your local Code. And none of the files are missing while pushing the artifact to deployment:-

trigger:
- main

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: 'xxxxxxxx94e94d93'

  # 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: NodeTool@0
      inputs:
        versionSpec: '18.x'
      displayName: 'Install Node.js'

    - script: |
        npm install
        npm run build --if-present
        npm run test --if-present
      displayName: 'npm install, build and test'

    - 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: AzureWebApp@1
            displayName: 'Azure Web App Deploy: siliconwebapp655'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|18.10'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'next start'

In the above pipeline, I am building the app and then Archiving it from System.DefaultWorkingDirectory to $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip and uploading the build artifact to drop folder and using the same folder $(Pipeline.Workspace)/drop/$(Build.BuildId).zip in my AzureWebApp@1 deployment task

You do not have permission to view this directory or page

In order to resolve this error refer my SO thread answer here

According to the answer:-

Check if the files are deployed correctly by visiting Development Tools > Advanced Tools > Kudu > Go > Site wwwroot >

Validate if all your files are deployed correctly above. If not, Re run the deployment again in a new Azure Web app.

Check the Logs by clicking on deployments in Kudu tool and inspect:-

URL:-

https://azure-webapp-name.scm.azurewebsites.net/api/deployments

My app settings:-

Also, Refer the answers from this SO thread