使用 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 任務才能仍然能夠訪問部署中的文件