使用Azure管道部署create-react-app [英] Deploy create-react-app with azure pipelines

问题描述

我正在尝试将使用create-react-app创建的React应用程序本地部署到Azure.我正在尝试使用蔚蓝管道来实现这一点.

I am trying to deploy a react app I created with create-react-app locally to azure. I am trying to do this with azure pipelines.

我到目前为止的代码:

# 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

现在，当我运行它时，它可以成功部署.但是，当我以天蓝色进入我的应用程序并查看日志时，它给了我这个错误:

Now when I run this, it deploys successfully. However, when I go to my app in azure and look at the log it gives me this error:

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

/opt/startup/startup.sh: 11: /opt/startup/startup.sh: serve: not found.

完整的错误日志:

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参数(请参见此网站)，以使用-s构建，但出现了权限被拒绝的错误.

I have tried to replace the startupCommand with npm run build and use the InlineScript parameter (see the Azure documentation and also this site) for serve -s build, but got a permission denied error.

有人知道如何通过Azure管道成功地将React应用程序部署到Azure吗?

Does anyone know how to successfully deploy a react app to azure with azure pipelines?

推荐答案

我知道了.因此，我要做的是从build文件夹提供静态文件.为了使React-Router在Azure上工作，您必须创建一个名为 ecosystem.config.js 的文件.在此文件到您的公用文件夹.如果pm2环境检测到此文件，它将执行该文件.请参阅此处以供参考. 该文件执行serve命令.它看起来如下:

I got it working. So what I had to do was serving the static files from the build folder. To let the react-router work on azure you have to create a file called ecosystem.config.js. At this file to your public folder. If pm2 environment detects this file it executes it. See here for reference. This file executes the serve command. It looks as follows:

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

azure-pipelines.yml如下所示

The azure-pipelines.yml looks as follows

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任务才能访问部署中的文件

Since the Build.ArtifactStagingDirectory is cleared on a deploy you have to use the PublishPipelineArtifact task to still be able to access the files in a deployment

这篇关于使用Azure管道部署create-react-app的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！