How to deploy nextjs application from monorepo built using Turborepo to Azure Web Apps?

Question

I have monorepo with multiple nextjs apps built with Turborepo. I am looking to deploy this to Azure Web App. Each app should be able to deploy independently on Azure Web App and additionaly how can I host them on single Azure Web Apps. I am okay to Containerise the apps if required.

Here GitHub Actions workflow file

# This workflow will build and push a node.js application to an Azure Web App when a commit is pushed to your default branch.
#
# This workflow assumes you have already created the target Azure App Service web app.
# For instructions see https://docs.microsoft.com/en-us/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-cli
#
# To configure this workflow:
#
# 1. Download the Publish Profile for your Azure Web App. You can download this file from the Overview page of your Web App in the Azure Portal.
#    For more information: https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials
#
# 2. Create a secret in your repository named AZURE_WEBAPP_PUBLISH_PROFILE, paste the publish profile contents as the value of the secret.
#    For instructions on obtaining the publish profile see: https://docs.microsoft.com/azure/app-service/deploy-github-actions#configure-the-github-secret
#
# 3. Change the value for the AZURE_WEBAPP_NAME. Optionally, change the AZURE_WEBAPP_PACKAGE_PATH and NODE_VERSION environment variables below.
#
# For more information on GitHub Actions for Azure: https://github.com/Azure/Actions
# For more information on the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# For more samples to get started with GitHub Action workflows to deploy to Azure: https://github.com/Azure/actions-workflow-samples

on:
  push:
    branches: [ "main" ]
  workflow_dispatch:

env:
  AZURE_WEBAPP_NAME: turbo-app    # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: 'next.zip'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '18.x'                # set this to the node version to use

permissions:
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'
        cache-dependency-path: 'with-npm/package-lock.json'
    
    - run: npm i [email protected]

    - name: npm install, build, and test
      run: |
        cd with-npm/apps/web
        npm install
        npm run build --if-present
        npm run test --if-present
      
    - name: Zip all files for upload between jobs
      # IMPORTANT: .next is a hidden folder and will NOT be included in the zip unless we specify it
      run: |
        cd with-npm/apps/web
        zip next.zip ./* .next -qr

    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v3
      with:
        name: node-app
        path: with-npm/apps/web/next.zip

  deploy:
    permissions:
      contents: none
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Development'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v3
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
    
    - name: Delete zip file
      run: rm next.zip

The Folder structure looks like this:

When I am deploying to Azure Web Apps, getting below error: 2023-09-09T12:13:34.652196296Z Starting OpenBSD Secure Shell server: sshd.

2023-09-09T12:13:34.685373702Z Starting periodic command scheduler: cron.

2023-09-09T12:13:34.691680812Z Could not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'

2023-09-09T12:13:34.691708313Z Could not find operation ID in manifest. Generating an operation id...

2023-09-09T12:13:34.691712313Z Build Operation ID: 5172c5e2-f8bf-4bc6-9d00-bfaf80f4bb94

2023-09-09T12:13:34.794298832Z Environment Variables for Application Insight's IPA Codeless Configuration exists..

2023-09-09T12:13:34.824696145Z Writing output script to '/opt/startup/startup.sh'

2023-09-09T12:13:34.863717845Z Running #!/bin/sh

2023-09-09T12:13:34.863744746Z

2023-09-09T12:13:34.863749646Z # Enter the source directory to make sure the script runs where the user expects

2023-09-09T12:13:34.863753746Z cd "/home/site/wwwroot"

2023-09-09T12:13:34.863766047Z

2023-09-09T12:13:34.863770447Z export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH

2023-09-09T12:13:34.863774347Z if [ -z "$PORT" ]; then

2023-09-09T12:13:34.863778247Z export PORT=8080

2023-09-09T12:13:34.863782447Z fi

2023-09-09T12:13:34.863786147Z

2023-09-09T12:13:34.863789847Z npm start

2023-09-09T12:13:35.533637467Z npm info using [email protected]

2023-09-09T12:13:35.533676268Z npm info using [email protected]

2023-09-09T12:13:35.580865840Z

2023-09-09T12:13:35.580913142Z > [email protected] start

2023-09-09T12:13:35.580919442Z > next start

2023-09-09T12:13:35.580923342Z

2023-09-09T12:13:35.597937109Z sh: 1: next: not found

2023-09-09T12:13:32.217Z INFO - 18-lts_20230810.1.tuxprod Pulling from appsvc/node

2023-09-09T12:13:32.227Z INFO - Digest: sha256:2c01cbacc5a8e23f05480159064212c959026cbf7c7abd88a1993fc36901c3d8

2023-09-09T12:13:32.228Z INFO - Status: Image is up to date for mcr.microsoft.com/appsvc/node:18-lts_20230810.1.tuxprod

2023-09-09T12:13:32.238Z INFO - Pull Image successful, Time taken: 0 Minutes and 0 Seconds

2023-09-09T12:13:33.999Z INFO - Starting container for site

2023-09-09T12:13:34.000Z INFO - docker run -d --expose=8080 --name turbo-app_0_80941f37 -e WEBSITE_SITE_NAME=turbo-app -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=turbo-app.azurewebsites.net -e WEBSITE_INSTANCE_ID=0aa548ea0f4ea47436874f2be441b45effba82346c7c36c96ad8174f8862466e -e HTTP_LOGGING_ENABLED=1 -e WEBSITE_USE_DIAGNOSTIC_SERVER=True appsvc/node:18-lts_20230810.1.tuxprod

2023-09-09T12:13:34.313Z INFO - Initiating warmup request to container turbo-app_0_80941f37 for site turbo-app

2023-09-09T12:13:36.351Z ERROR - Container turbo-app_0_80941f37 for site turbo-app has exited, failing site start

2023-09-09T12:13:36.385Z ERROR - Container turbo-app_0_80941f37 didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.

2023-09-09T12:13:36.388Z INFO - Stopping site turbo-app because it failed during startup.

Answer 1

• Each Next.js app can be individually deployed on Azure Web App by being given its own Azure Web App. The apps can be containerized such that they can all be hosted on a single Azure Web App. For each app, You can generate a Docker image and a Dockerfile to accomplish this. After that, you may upload the Docker images to a container registry, such Azure Container Registry. A single Azure Web App can then receive the Docker images using Azure Web App for Containers.

• The Azure/webapps-deploy action can be used to deploy the apps using GitHub Actions. By supplying the app name and package path for each app, you may set the action to deploy each app separately. By giving the Docker image for each project, you can also define the operation to deploy all the apps to a single Azure Web project.

Github action workflow:-

name: Deploy Next.js app to Azure Web App

on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: my-app-name
  AZURE_WEBAPP_PACKAGE_PATH: 'next.zip'
  NODE_VERSION: '14.x'

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: Install dependencies
        run: npm install
      - name: Build app
        run: npm run build
      - name: Zip app files
        run: zip -r next.zip .next/* package.json package-lock.json
      - name: Deploy app to Azure Web App
        uses: Azure/webapps-deploy@v2
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

I also tried the deployment via Azure Web app Deployment center and selected Github as the source code like below:-

name: Build and deploy Node.js app to Azure Web App - siliconwebapp97

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'siliconwebapp97'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_xxxxxxx3A7B }}
          package: .

Refer my SO thread answer1 and SO thread answer2 to make the Nodejs app deployment successful via Github Actions.