使用 azure 管道部署 create-react-app

Question

我正在尝试将我在本地使用 create-react-app 创建的 React 应用程序部署到 azure。 我正在尝试使用 azure 管道来做到这一点。

我到目前为止的代码：

# Node.js React Web App to Linux on Azure
# Build a Node.js React app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master
- azure-pipelines

variables:
  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: ###

  # Web app name
  webAppName: 'rafe-react'

  # Environment name
  environmentName: 'rafe-react'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'
  System.debug: true
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.1'
- task: Npm@1
  inputs:
    command: 'install'
- script: |
    npm install
    npm run build
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.BinariesDirectory)'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true
- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: $(azureSubscription)
    appType: 'webAppLinux'
    WebAppName: 'rafe-react'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/**/*.zip'
    RuntimeStack: 'NODE|10.1'
    StartupCommand: 'serve -s build'
    enableCustomDeployment: true

现在，当我运行它时，它部署成功。 但是，当我在 azure 中转到我的应用程序并查看日志时，它给了我这个错误：

/opt/startup/startup.sh: 11: /opt/startup/startup.sh: 服务: 未找到。

完整的错误日志：

2019-12-05T11:48:46.270966320Z   _____                               
2019-12-05T11:48:46.271002720Z   /  _  \ __________ _________   ____  
2019-12-05T11:48:46.271008020Z  /  /_\  \___   /  |  \_  __ \_/ __ \ 
2019-12-05T11:48:46.271012420Z /    |    \/    /|  |  /|  | \/\  ___/ 
2019-12-05T11:48:46.271016320Z \____|__  /_____ \____/ |__|    \___  >
2019-12-05T11:48:46.271020420Z         \/      \/                  \/ 
2019-12-05T11:48:46.271024320Z A P P   S E R V I C E   O N   L I N U X
2019-12-05T11:48:46.271028420Z 
2019-12-05T11:48:46.271032020Z Documentation: http://aka.ms/webapp-linux
2019-12-05T11:48:46.271035820Z NodeJS quickstart: https://aka.ms/node-qs
2019-12-05T11:48:46.271039720Z NodeJS Version : v10.1.0
2019-12-05T11:48:46.271043320Z Note: Any data outside '/home' is not persisted
2019-12-05T11:48:46.271047320Z 
2019-12-05T11:48:46.387569226Z Oryx Version: 0.2.20191105.2, Commit: 67e159d71419415435cb5d10c05a0f0758ee8809, ReleaseTagName: 20191105.2
2019-12-05T11:48:46.387911428Z Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
2019-12-05T11:48:46.388236829Z Could not find operation ID in manifest. Generating an operation id...
2019-12-05T11:48:46.388474931Z Build Operation ID: 3c2e1218-c95a-418e-94c1-ce778f1b0604
2019-12-05T11:48:47.903969109Z Writing output script to '/opt/startup/startup.sh'
2019-12-05T11:48:48.190534098Z Running #!/bin/sh
2019-12-05T11:48:48.284305986Z 
2019-12-05T11:48:48.284659388Z # Enter the source directory to make sure the script runs where the user expects
2019-12-05T11:48:48.284671288Z cd "/home/site/wwwroot"
2019-12-05T11:48:48.284675988Z 
2019-12-05T11:48:48.284680088Z export NODE_PATH=$(npm root --quiet -g):$NODE_PATH
2019-12-05T11:48:48.284935189Z if [ -z "$PORT" ]; then
2019-12-05T11:48:48.284944789Z      export PORT=8080
2019-12-05T11:48:48.284949089Z fi
2019-12-05T11:48:48.285155290Z 
2019-12-05T11:48:48.285164490Z PATH="$PATH:/home/site/wwwroot" serve -s build
2019-12-05T11:48:50.410579239Z /opt/startup/startup.sh: 11: /opt/startup/startup.sh: serve: not found

我曾尝试用 npm run build 替换 startupCommand 并使用 InlineScript 参数（请参阅Azure 文档和此站点）进行 serve -s 构建，但出现权限被拒绝错误。

有谁知道如何使用 azure 管道成功地将 React 应用程序部署到 azure？

Answer 1

作为替代方案，您可以直接在主 yml 文件中使用以下命令。

StartupCommand: 'pm2 serve /home/site/wwwroot --no-daemon --spa'

Answer 2

我有同样的问题。 我的 Azure Pipeline 很好，构建和部署工作正常，并将构建文件夹发布到/home/site/wwwroot文件夹。

当您创建应用服务时，只需安装 PHP 堆栈，您不必担心提供任何服务，因为 index.html 已被在那里运行的网络服务器为 PHP 堆栈获取。

有点hacky，但它有效

Answer 3

我让它工作了。 所以我必须做的是从构建文件夹提供静态文件。 要让 react-router 在 azure 上工作，您必须创建一个名为生态系统.config.js 的文件。 将此文件添加到您的公用文件夹中。 如果 pm2 环境检测到这个文件，它就会执行它。 请参阅 此处以供参考。 该文件执行服务命令。 它看起来如下：

module.exports = {
  apps: [
    {
      script: "npx serve -s"
    }
  ]
};

azure-pipelines.yml 如下所示

trigger:
- none

variables:

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

  # Web app name
  webAppNameStaging: 'rafeFrontendWebApp-staging'
  webAppNameProduction: 'rafeFrontendWebApp-production'

  # Environment name
  environmentNameStaging: 'staging'
  environmentNameProduction: 'production'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'
  System.Debug: true
stages:
- stage: Build
  displayName: Build stage
  pool:
    vmImage: $(vmImageName)
  jobs:  
  - job: Build_Staging
    displayName: Build Staging
    steps:
      - script: |
         npm install react-scripts
         npm run build
      - task: CopyFiles@2
        displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
        inputs:
          SourceFolder: '$(System.DefaultWorkingDirectory)/build'
          TargetFolder: '$(Build.ArtifactStagingDirectory)'
      - task: PublishPipelineArtifact@1
        inputs:
          targetPath: $(System.DefaultWorkingDirectory)/build
          artifact: 'drop'
          publishLocation: 'pipeline'
- stage: Deploy_Staging
  displayName: Deploy staging
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy staging
    environment: $(environmentNameStaging)
    strategy:
      runOnce:
        deploy:
            steps:            
              - task: AzureRmWebAppDeployment@4
                inputs:
                  ConnectionType: 'AzureRM'
                  azureSubscription: $(azureSubscription)
                  appType: 'webAppLinux'
                  WebAppName: $(webAppNameStaging)
                  packageForLinux: $(Pipeline.Workspace)/drop
                  RuntimeStack: 'NODE|lts'

由于 Build.ArtifactStagingDirectory 在部署中被清除，您必须使用 PublishPipelineArtifact 任务才能仍然能够访问部署中的文件