After SUccessful deployment of Azure Static Web App, when I go to the web site, it shows server error. The console says its a 502 error

Question

I am deploying an hybrid Next.js app (using .next/standalone as output_directory) in azure static web app platform. The CI/CD pipeline in github says the Deployment was successful, but when I go the designated URL, the page says following

There is no issue in github ci/cd deployment
My github actions file is as follows

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PURPLE_DESERT_0EDF8ED00 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          api_build_command: "yarn install --production" # Forces oryx to use yarn
          output_location: ".next/standalone" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PURPLE_DESERT_0EDF8ED00 }}
          action: "close"

Answer 1

@Suparth Ghimire Thanks for reaching here! It seems like there is an issue with the deployment of your Next.js app to Azure Static Web Apps. The error message you posted says that the page cannot be found.

Based on the GitHub Actions file you provided, the app_location is set to "/" and the output_location is set to ".next/standalone". This means that the source code for the app is located in the root directory of the repository and the built app content is located in the ".next/standalone" directory.

It is possible that the issue is with the app_location or output_location settings. You may want to double check that the source code and built app content are located in the correct directories.

You can also try to review the detailed logs of your workflow's run in GitHub Actions to see if there are any error messages or issues with the deployment.

If you are still having trouble, you may want to consult the Azure Static Web Apps documentation for more information on deploying Next.js apps.

See: https://github.com/MicrosoftDocs/azure-docs/blob/main/articles/static-web-apps/deploy-nextjs-static-export.md

https://github.com/MicrosoftDocs/azure-docs/blob/main/articles/static-web-apps/build-configuration.md

Let us know.