解释 - 通过 Microsoft Azure DevOps Pipelines 部署生产 NextJS 应用程序时出现的问题

Question

通过 Azure DevOps Pipelines 将 NextJS 应用程序部署到 Microsoft Azure WebApp 服务时遇到问题？

问题可能有所不同，从Error: Cannot find module '../build/output/log' on next start整个管道故障到全部管道故障。

我需要一个吗server.js？我的package.json脚本应该是什么样子？对于这个用例来说，正确的管道设置是什么样的？

解决方案很简单，您可以在下面找到它：

Answer 1

如果您尝试使用 Azure DevOps 的管道在 Azure WebApp 上成功部署 NextJS 生产版本，我是这样解决的：

管道deployment.yml：

trigger:
- master

variables:
  azureSubscription: 'confidential'
  webAppName: $(HORIZON)
  environmentName: $(HORIZON)
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build Horizon
  jobs:  
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)
      
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '10.x'
      displayName: 'Install node.js'

    - script: yarn
      displayName: 'Install dependencies'
    
    - script: yarn export
      displayName: 'Export production build'

    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy Horizon
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool: 
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            displayName: 'Azure Web App Deploy: $(HORIZON)'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|10.10'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'yarn start'

我的脚本package.json：

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "node_modules/next/dist/bin/next start -p $PORT",
    "export": "next build && next export"
  },

还有我的server.js（非常重要）：

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  const server = express()

  server.get('/p/:id', (req, res) => {
    const actualPage = '/post'
    const queryParams = { title: req.params.id }
    app.render(req, res, actualPage, queryParams)
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:' + port)
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

额外的.gitignore：

// .gitnignore

build/
.next/
out/
.env
.env.build
node_modules/
jspm_packages/
/.pnp
.pnp.js
dist/
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pids
*.pid
*.seed
*.pid.lock
lib-cov
coverage
.nyc_output
bower_components
.npm
*.tgz
.yarn-integrity
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*