Deploy create-react-app with azure pipelines

Question

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.

The code I have so far:

# 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://learn.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: serve: not found.

full error log:

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

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.

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

score 2 · Answer 1 · answered May 10 '20 at 12:50

2

As an alternative you can use the following command directly in the main yml file.

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

answered May 10 '20 at 12:50

ssedwards

129
1
10

Ah thanks for your suggestion. I think this will work as well and even might be a bit cleaner/explicit – Joost Luijben May 12 '20 at 21:27
for more details: https://stackoverflow.com/a/63501266/6908282 – Gangula May 28 '21 at 16:03

32423hjh32423 · Answer 2 · 2020-12-11T09:00:11.377

2

I had the same problem. My Azure Pipeline was fine and the build and deploy worked fine and published the build folder to the /home/site/wwwroot folder.

When you create your App Service just install the PHP stack and you don't have to worry about serving anything because index.html is picked up by which ever webserver is running on there already for the PHP stack.

Slightly hacky but it works

edited Dec 11 '20 at 09:00

answered Dec 10 '20 at 16:54

32423hjh32423

3,048
7
44
59

1

Nice hack! Loved it. – vohrahul May 18 '21 at 11:09

Joost Luijben · Accepted Answer · 2020-05-12T21:29:34.470

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"
    }
  ]
};

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'

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

Hi Joost, please can I clarify some points. Did you npm run build on local dev machine then push to Azure Repo? Did you need to install pm2 locally on dev machine? The extract of the ecosystem.config.js file. It that all it contains? — ssedwards, May 08 '20 at 15:52
Forget my previous comment. Using what you had done as a base I ended up reading some of the Microsoft documentation and eventually settled with using the following command within the yaml: StartupCommand: 'pm2 serve /home/site/wwwroot --no-daemon --spa' — ssedwards, May 10 '20 at 12:48
PM2 was installed on my remote machine. You do not need to install pm2 locally. I also notice that I forgot to add that you need to put the ecosystem.config.js to the public folder (will edit). The npm run build is run in the pipeline. So it's not local. Also yes, that's all that file contains — Joost Luijben, May 12 '20 at 21:26

Deploy create-react-app with azure pipelines

3 Answers3

Linked