Question 413646 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – Next JS deployment on Azure – Virtual path

I am very new to NextJS and deploying my first app onto Azure. Although the deployment is successful but I am unable to load the website. I get loads of 404 for JS, CSS and image files.

The path of static file seems to be referring to "_next/static" but "_next" directory has not been deployed. I am copying my yml and nextJS.config files.

Also, what should be the "physical path" of Virtual path inside Azure Configuration setting?

enter image description here

enter image description here
Any help is much appreciated

url is : https://friendsofthecommunity-gna8amh6cdfvcwd0.centralindia-01.azurewebsites.net/

name: Build and deploy Next.js app to Azure Web App

on: push: branches: - mainworkflow_dispatch:

env: APPLICATION_PUBLISH_PROFILE: ${{ secrets.xxxxxxxxxxxxxx }} WEBAPP_NAME: "xxxxxxxx"

jobs: build: runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Set up Node.js version
    uses: actions/setup-node@v4
    with:
      node-version: "20.x"

  - name: npm install, build, and test
    run: |
      npm install
      npm run build
      mv ./build/static ./build/standalone/build
      mv ./app ./build/standalone
      mv ./next ./build/standalone

  - name: "Deploy to Azure Web App"
    id: deploy-to-webapp
    uses: azure/webapps-deploy@v3
    with:
      app-name: ${{ env.WEBAPP_NAME }}
      slot-name: "Production"
      publish-profile: ${{ env.APPLICATION_PUBLISH_PROFILE }}
      package: ./build/standalone

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, distDir: 'build', output: 'standalone', };

module.exports = nextConfig;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Move to latest version of NextJS and use the Github templates for deployment


  2. 0

    I tried your next.config.mjs configuration as shown below, but I got the same error:

    const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',       
  output: 'standalone',  
};

export default nextConfig;

    To reslove it remove the following below lines from your YAML file:

    mv ./app ./build/standalone
mv ./next ./build/standalone

    Then, update your YAML file as shown below.

    I referred to this link for deploying a Next.js 14 app to Azure App Service using GitHub Actions.

    

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

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

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

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
          mv ./public ./build/standalone/public

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

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

  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@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

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

    Additionally, add the Startup Command to node server.js in the Configuration.There is no need to add/change physical path in Virtual path.

    enter image description here

    Deployment status:
    enter image description here

    Output:
    enter image description here

    For Windows, use the YAML configuration shown below. Refer to this git for the complete YAML file.

    run: |
          npm install
          npm run build --if-present
          npm run test --if-present
          mv ./public ./build/standalone/public
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search