Azure 部署管道在“react-scripts build”时失败

Question

我有一个存储库，它代表 Express Web 应用程序的代码，该应用程序在启动时服务于 React 前端。我尝试使用 Azure 管道自动化构建和部署过程。构建步骤成功，但部署失败。回购是这样设置的：

my_app/
├── client/
│   ├── src/
│   ├── package.json
│   └── index.js
├── package.json
├── server.js
└── azure-pipelines.yml

这里是配置文件：

client/package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5001/"
}.

package.json：

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cd client/ && npm install && npm run build && cd ../",
    "start": "npm install && node server",
    "build": "cd client/ && npm install && npm run build && cd ../",
    "dev": "node server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1"
  }
}

azure-pipelines.yml：

trigger:
- master

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: 'my_sub_id'

  # Web app name
  webAppName: 'my_app_name'

  # Environment name
  environmentName: 'my_env_name'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:  
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

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

    - script: |
        npm install
        npm run build --if-present
        npm run test --if-present
      displayName: 'npm install, build and test'



    - 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 stage
  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: referee-management-tool'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|10.10'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'npm run start'

我在 Azure Pipelines Deploy 中遇到的错误：

2020-05-25T15:56:53.2620824Z Error: Cannot find module '../scripts/build'
2020-05-25T15:56:53.2621190Z Require stack:
2020-05-25T15:56:53.2626302Z - /tmp/8d800c3a4e8367c/client/node_modules/.bin/react-scripts
2020-05-25T15:56:53.2627240Z     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
2020-05-25T15:56:53.2627901Z     at Function.resolve (internal/modules/cjs/helpers.js:83:19)
2020-05-25T15:56:53.2628870Z     at Object.<anonymous> (/tmp/8d800c3a4e8367c/client/node_modules/.bin/react-scripts:31:23)
2020-05-25T15:56:53.2629532Z     at Module._compile (internal/modules/cjs/loader.js:1158:30)
2020-05-25T15:56:53.2630113Z     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
2020-05-25T15:56:53.2630662Z     at Module.load (internal/modules/cjs/loader.js:1002:32)
2020-05-25T15:56:53.2631232Z     at Function.Module._load (internal/modules/cjs/loader.js:901:14)
2020-05-25T15:56:53.2631841Z     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
2020-05-25T15:56:53.2632406Z     at internal/main/run_main_module.js:18:47 {
2020-05-25T15:56:53.2633045Z   code: 'MODULE_NOT_FOUND',
2020-05-25T15:56:53.2633823Z   requireStack: [ '/tmp/8d800c3a4e8367c/client/node_modules/.bin/react-scripts' ]
2020-05-25T15:56:53.2634320Z }

我已经尝试通过 SSH 连接到机器以手动测试“节点服务器”命令，但由于某种原因，SSH 连接被断开，我无法重新连接。如果您需要更多信息here 是回购

Answer 1

您需要在本地构建 react 应用，并使用 express webapp 项目中的构建文件夹。

项目结构应如下所示：

my_app/
├── client/
│   ├── build/
│       ├── reat_built_files
│           
├── package.json
├── server.js
└── azure-pipelines.yml

参考：

https://devblogs.microsoft.com/premier-developer/deploying-react-apps-to-azure-with-azure-devops/

Answer 2

我终于解决了这个问题：在azure-pipelines.yml文件的Stages->Build->Script部分，我添加了cd client/ && npm install && cd ../，因为npm没有安装客户端需要的包，只执行npm install在父文件夹中，在那里解析 package.json。添加后，一切都很好。