How to deploy NextJs (SSR) using "Output File Tracing" feature to Azure App Service?

Question

I have deployed my Next.js project to the Azure App service that needs to include "node_modules" to run the production ("npm start").

But.. I found that the "node_modules" size is so big (354,3 MB on disk).

And then I saw that we could use the "Output File Tracing" feature to reduce the size of deployments drastically.

So how can I use that feature? I think that will affect my Azure Pipeline and Release

Answer 1

Below are the steps of solution how I deploy my Next.js project to Azure App Service with the "Output File Tracing" feature.

Project Setup

1. Your Next.js version should be version 12.2.x or higher. So upgrade your Next.js first to the required version.

2. Add output: "standalone in 📄 next-config.js

// example
const nextConfig = {
  output: "standalone",
};

module.exports = nextConfig;

3. And you can try to build it. npm run build

4. There will be a folder called 📁 standalone inside 📁.next

5. Inside the 📁 standalone, there is a 📄 server.js.

6. Open your cmd/terminal and then change the directory to 📁 standalone with cd .next/standalone. You can run the 📄 server.js using node. Example: node server.js. And then it will be run in port 3000. You can open it in the browser and then access localhost:3000.

7. There will be some errors of "some files are missing" (404). You need to copy the 📁 static inside 📁 .next to /.next/standalone/.next/ and re-run the node server.js.

7.1. You can update your script to copy it automatically when you run the build script. First install cpy-cli as dev-dependencies npm i cpy-cli -D.

7.2. In 📄 package.json. Update build script

"build": "next build && ./node_modules/.bin/cpy '.next/static/**' '.next/standalone/.next/static/'"

7.3. Try to build again and then the 📁 static will be copied automatically.

Pipelines

Archive only 📁 standalone.

azure-pipelines.yml

# Node.js
# Build a general Node.js project with npm.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: "./.next/standalone/"
    includeRootFolder: false
    archiveType: "zip"
    archiveFile: "$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip"
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: "$(Build.ArtifactStagingDirectory)"
    ArtifactName: "drop"
    publishLocation: "Container"

Release

Done 🌟

If you facing a problem like the public content is missing, you need to copy your 📁 public to 📁 standalone. You can do it manually or update your build script to be like this:

package.json

"build": "next build && ./node_modules/.bin/cpy '.next/static/**' '.next/standalone/.next/static/' &&  ./node_modules/.bin/cpy './public/**' '.next/standalone/public/'",