如何使用“输出文件跟踪”功能将NextJs (SSR)部署到Azure？
如何使用“输出文件跟踪”功能将NextJs (SSR)部署到Azure？
提问于 2022-09-15 02:30:36
我已经将我的Next.js项目部署到Azure服务中，该服务需要包含"node_modules“来运行生产("npm”)。
但是..。我发现"node_modules“的大小太大了(磁盘上有354，3MB)。
然后，我看到我们可以使用“输出文件跟踪”特性来大幅减少部署的规模。
那么我该如何使用这个功能呢？我认为这会影响我的Azure管道和释放
回答 1
Stack Overflow用户
发布于 2022-09-15 02:30:36
下面是如何使用“输出文件跟踪”特性将我的Next.js项目部署到的解决方案步骤。
项目设置
- 您的Next.js版本应该是12.2.x或更高版本。因此，首先将Next.js升级到所需的版本。
- 在next-config.js中添加
output: "standalone
// example
const nextConfig = {
output: "standalone",
};
module.exports = nextConfig;- 你可以试着建造它。
npm run build - 在
standalone内部将有一个名为.next的文件夹 - 在
standalone内部，有一个server.js。 - 打开cmd/终端，然后用
cd .next/standalone将目录更改为cd .next/standalone。您可以使用server.js运行node。例子：node server.js.然后它将在3000端口运行。您可以在浏览器中打开它，然后访问localhost:3000。 - 会出现“一些文件丢失”(404)的一些错误。您需要将
static在.next中复制到/.next/standalone/.next/并重新运行node server.js。
7.1。您可以在运行build脚本时更新脚本以自动复制它。首先，将[医]氯安装为开发依赖项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将被自动复制。
管道
只存档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"发布
完成
如果您面临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/'",页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73725010
复制相关文章
相似问题
腾讯云开发者
