azure - 如何使用 "Output File Tracing"功能将 NextJs (SSR) 部署到 Azure 应用服务？

Question

我已将 Next.js 项目部署到 Azure 应用服务，该服务需要包含“node_modules”来运行生产(“npm start”)。

但是..我发现“node_modules”大小太大(磁盘上有354,3 MB)。

然后我发现我们可以使用 "Output File Tracing"功能可大大减少部署的大小。

那么我该如何使用该功能呢？我认为这会影响我的 Azure Pipeline 和发布

Answer 1

以下是如何使用“输出文件跟踪”功能将 Next.js 项目部署到 Azure 应用服务的解决方案步骤。

项目设置

1.您的 Next.js 版本应该是 12.2.x 或更高版本。因此，首先将您的 Next.js 升级到所需的版本。

2.在 📄 next-config.js 中添加 output: "standalone

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

module.exports = nextConfig;

3.您可以尝试构建它。 npm 运行构建

4. 📁.next

里面会有一个名为 📁standalone 的文件夹

5.在📁独立内部，有一个📄server.js。

6.打开 cmd/terminal，然后使用 cd .next/standalone 将目录更改为 📁standalone。您可以使用 node 运行 📄 server.js。示例:node server.js。然后它将在端口3000上运行。您可以在浏览器中打开它，然后访问localhost:3000。

7. 会出现“某些文件丢失”(404)的错误。您需要将 📁 .next 中的 📁 static 复制到 /.next/standalone/.next/ 并重新运行 节点 server.js.

7.1。您可以更新脚本以在运行 build 脚本时自动复制它。首次安装cpy-cli作为开发依赖项npm i cpy-cli -D。

7.2。在 📄 package.json 中。更新构建脚本

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

7.3。尝试再次构建，然后 📁 static 将自动复制。

管道

仅存档📁独立。

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"

发布

完成🌟

如果您遇到 public 内容缺失等问题，您需要将 📁 public 复制到 📁standalone。您可以手动执行此操作或将您的 build 脚本更新为如下所示:

package.json

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