reactjs - 无法使用 Azure Pipeline 在应用服务上部署 Nextjs 应用程序

Question

我尝试使用azure管道将nextjs应用程序部署到appservice。第一个构建阶段和部署阶段已完成。但是，当我转到应用服务上的 console 时，它不会创建 web.config，并且当我访问该 url 时，它会显示如下文本:“您无权查看此目录或页面。”我的应用程序在本地完美运行。

我有什么步骤做错了吗？请帮助我，谢谢。

配置:应用程序服务:操作系统-Windows，节点 16/代理:操作系统Windows

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

trigger:
  branches:
    include:
    - master
    - releases/*
    - develop

pool: 'window-agent-fe'
stages:
  - stage: BuildStage
    jobs:
      - job: BuildJob
        steps:
        - task: CmdLine@2
          displayName: 'Instal Zip file Supported'
          inputs:
            script: 'sudo apt-get -y install zip'
        - task: NodeTool@0
          inputs:
            versionSpec: '16.x'
            checkLatest: true
          displayName: 'Install Node.js'
        - script: npm i --force
          displayName: 'Install Node Packages'
        - script: npm run lint
          displayName: Lint
        - script: npm run build
          displayName: 'Build'
        - task: ArchiveFiles@2
          inputs:
            rootFolderOrFile: '$(System.DefaultWorkingDirectory)/.next/'
            includeRootFolder: false
            archiveType: 'zip'
            archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
            replaceExistingArchive: true
            verbose: true
        - publish: "$(Build.ArtifactStagingDirectory)"
          artifact: package
  - stage: 'DeployStage'
    dependsOn: BuildStage
    condition: succeeded()
    jobs:
      - deployment: 'DevDeployJob'
        environment: DEV
        strategy:
          runOnce:
            deploy:
              steps:
                - download: current
                  displayName: Download build file
                  artifact: package
                - task: AzureRmWebAppDeployment@4
                  inputs:
                    ConnectionType: 'AzureRM'
                    azureSubscription: '***********'
                    appType: 'webApp'
                    WebAppName: 'fpt-capstone-client'
                    packageForLinux: '$(System.WorkFolder)/1/package/$(Build.BuildId).zip'
              

来自日志流的错误页面:

Answer 1

"You do not have permission to view this directory or page."

按照解决方法解决问题:

• 出现此问题的原因是我们未添加任何 server.js 或 web.config 文件。

• 在您的 package.json 文件中，确保添加以下代码行。

  "scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start -p $PORT",
      "now-build": "next build"
  

  您可以使用下面的内容来代替上面的内容。

  "scripts": {
      "dev": "node server.js",
      "build": "next build",
      "start": "node server.js",
      "now-build": "next build"
      }
  

  

• 将 nextjs 应用程序部署到 azure 时，您必须在根目录中添加 web.config 文件。请参阅here

• 在您的 Server.js 文件中(如果您使用的是)

  const  port = parseInt(process.env.PORT, 10) || 3000;
  

  尝试像下面这样改变它

  const port = process.env.PORT || 3000;
  

  

• 如果您在部署到 Azure 应用服务后仍然遇到此问题。尝试更改您的虚拟应用程序和目录物理路径，例如\site\wwwroot\ 进入一些登陆页面，例如 \site\wwwroot\pages\index.html

引用

• Next js deployment on azure app service