Troubleshooting: Next.js application deployment on Azure Web App encountering file discrepancies

Question

Troubleshooting: Next.js application deployment on Azure Web App encountering file discrepancies

I'm currently facing an issue while attempting to deploy a next.js (with typescript) application on Azure using Bitbucket pipelines. As part of my pipeline process, I build the next.js app with the following build configuration:

// next.config.js

/**@type {import('next').NextConfig} */
const nextConfig = {
   output: 'standalone',
}
module.exports = nextConfig

After building, I proceed to deploy it to Azure.

    - step: &deploy-preview
        caches:
          - node
          - nextcache
        script:
          - zip -r files.zip .next/ public/
          - pipe: microsoft/azure-web-apps-deploy:1.0.4
            variables:
              AZURE_APP_ID: $AZURE_APP_ID
              AZURE_PASSWORD: $AZURE_PASSWORD
              AZURE_TENANT_ID: $AZURE_TENANT_ID
              AZURE_RESOURCE_GROUP: $AZURE_RESOURCE_GROUP
              AZURE_APP_NAME: $AZURE_APP_NAME
              ZIP_FILE: 'files.zip'
        artifacts:
          - "files.zip"

Upon inspection of the artifacts folder, I can confirm that all the expected files are present. However, when I check the Azure web app, the startup command .next/standalone/server.js starts a next.js server but is unable to locate the files under .next/static. The console displays 404 errors even though the files exist.

I'm seeking advice and insights on what might be causing this issue and how I can potentially resolve it. Any help or suggestions would be greatly appreciated.

azure next.js azure-web-app-service

Answer 1

Answer №1

If you're facing a similar problem, fear not! I managed to resolve it by delving into the Next.js documentation.

Here is where I found the solution:

The guide specifies that for the standalone configuration:

This basic server doesn't automatically copy the public or .next/static folders as they are ideally handled by a CDN. However, you can manually copy these folders to standalone/public and standalone/.next/static folders, after which the server.js file will serve them automatically.

While your local machine serves as the CDN during development, Azure web apps do not. Therefore, it's crucial to transfer these files over, a process that can be executed in a Bitbucket script.

A snippet of a Bitbucket script for this purpose:

image: node:18

definitions:
  steps:
    - step: &deploy-production
        name: 'Deploy'
        deployment: Production
        script:
          - apt-get update
          - apt-get install zip
          - "mkdir .next/standalone/.next/static"
          - "cp -r .next/static/* .next/standalone/.next/static"
          - "mkdir .next/standalone/public"
          - "cp -r public/* .next/standalone/public"
          - zip -r standalone.zip .next/* 
          - pipe: microsoft/azure-web-apps-deploy:1.0.4
            variables:
              AZURE_APP_ID: $AZURE_APP_ID
              AZURE_PASSWORD: $AZURE_PASSWORD
              AZURE_TENANT_ID: $AZURE_TENANT_ID
              AZURE_RESOURCE_GROUP: 'frontend'
              AZURE_APP_NAME: $AZURE_APP_NAME
              ZIP_FILE: 'standalone.zip'
        artifacts:
          - "standalone.zip"
pipelines:
  # Build, test and deploy on master branch.
  branches:
    master:
      - step: *deploy-production

Additional configurations made were:

I opted for Node 18 LTS on Linux servers as my runtime environment choice.
The startup command specified under Settings > Configuration > General Settings is node ./next/standalone/server.js.
If any .env variables are integrated, ensure to configure them on Azure under Configuration > Application Settings.

Answer 2

If you're facing a similar problem, fear not! I managed to resolve it by delving into the Next.js documentation.

Here is where I found the solution:

The guide specifies that for the standalone configuration:

This basic server doesn't automatically copy the public or .next/static folders as they are ideally handled by a CDN. However, you can manually copy these folders to standalone/public and standalone/.next/static folders, after which the server.js file will serve them automatically.

While your local machine serves as the CDN during development, Azure web apps do not. Therefore, it's crucial to transfer these files over, a process that can be executed in a Bitbucket script.

A snippet of a Bitbucket script for this purpose:

image: node:18

definitions:
  steps:
    - step: &deploy-production
        name: 'Deploy'
        deployment: Production
        script:
          - apt-get update
          - apt-get install zip
          - "mkdir .next/standalone/.next/static"
          - "cp -r .next/static/* .next/standalone/.next/static"
          - "mkdir .next/standalone/public"
          - "cp -r public/* .next/standalone/public"
          - zip -r standalone.zip .next/* 
          - pipe: microsoft/azure-web-apps-deploy:1.0.4
            variables:
              AZURE_APP_ID: $AZURE_APP_ID
              AZURE_PASSWORD: $AZURE_PASSWORD
              AZURE_TENANT_ID: $AZURE_TENANT_ID
              AZURE_RESOURCE_GROUP: 'frontend'
              AZURE_APP_NAME: $AZURE_APP_NAME
              ZIP_FILE: 'standalone.zip'
        artifacts:
          - "standalone.zip"
pipelines:
  # Build, test and deploy on master branch.
  branches:
    master:
      - step: *deploy-production

Additional configurations made were:

I opted for Node 18 LTS on Linux servers as my runtime environment choice.
The startup command specified under Settings > Configuration > General Settings is node ./next/standalone/server.js.
If any .env variables are integrated, ensure to configure them on Azure under Configuration > Application Settings.

Troubleshooting: Next.js application deployment on Azure Web App encountering file discrepancies

Answer №1

Similar questions