How to deploy Strapi to Azure? - azure

I installed Strapi with Mongodb locally.
I need to deploy it to Azure.
Strapi is commitet on Azure Git-repository.
I have created a App Service with Ubuntu on Azure.
How to deploy my Strapi to this?
Can I use pipeline?
I can't find any good documentaion/example how to do it. Help!
*************
UPDATE
*************
My results after trying the method described here:
https://github.com/youkou2/Strapi-On-Azure-WebApp
Build pipeline works without any error
Deploy pipeline works without any error
Deployed web site is empty.
I can describe what I have done, may be somebody can help me to find what I did wrong.
a) Build pipeline is
pool:
name: Azure Pipelines
steps:
- bash: |
yarn install
set NODE_ENV=PRODUCTION
yarn build
rm -rf .cache
rm -rf .git
displayName: Build
- task: ArchiveFiles#2
displayName: 'Archive ./'
inputs:
rootFolderOrFile: ./
includeRootFolder: false
- task: PublishBuildArtifacts#1
displayName: 'Publish Artifact: drop'
*** It works ok, no errors ***
b) Deploy pipeline
steps:
- task: AzureRmWebAppDeployment#4
displayName: 'Deploy Azure App Service'
inputs:
azureSubscription: '$(Parameters.ConnectedServiceName)'
appType: '$(Parameters.WebAppKind)'
WebAppName: '$(Parameters.WebAppName)'
*** It works ok, no errors ***
c) Project is deployed to https://oskogencms.azurewebsites.net/
*** It is empty, why? ***
enter code here
Here is additional info around the deployment:

You can try to use zip deploy, The steps is npm install, create zip package, publish zip package, release zip package. For more information please have a look of this the offcial doc:
https://learn.microsoft.com/en-us/azure/app-service/deploy-zip
By the way, it seems deploy strapi to azure web app is not the recommended method.
https://strapi.io/documentation/3.0.0-beta.x/deployment/azure.html#azure
This is an article on deploying strapi to azure web app, the introduction is more detailed, also using zip deployment:(The only different between you is it is deployed to windows os. If you can use ftp, ftp deploy is also a choice.)
https://github.com/youkou2/Strapi-On-Azure-WebApp

Please check #ZiedBeta's sample in the following link:
https://github.com/strapi/strapi/issues/3580
Build pipeline:
pool:
name: Azure Pipelines
steps:
- bash: |
yarn install
yarn build
rm -rf .cache
rm -rf .git
displayName: build
- task: ArchiveFiles#2
displayName: 'Archive Strapi'
inputs:
rootFolderOrFile: ./
includeRootFolder: false
- task: PublishBuildArtifacts#1
displayName: 'Publish Artifact: drop'
Development pipeline:
steps:
- task: AzureRmWebAppDeployment#4
displayName: 'Deploy Azure App Service'
inputs:
azureSubscription: '$(Parameters.ConnectedServiceName)'
appType: '$(Parameters.WebAppKind)'
WebAppName: '$(Parameters.WebAppName)'
enableCustomDeployment: true
DeploymentType: zipDeploy

Related

How to add tasks to azure dev ops starter?

I am new to azure dev ops and yml files. I recently created an Azure dev ops starter resource for a .NET Core site I built. I connected it to a github repo and pushed some files.
I am getting the error:
Build FAILED.
/home/runner/.dotnet/sdk/3.1.302/Microsoft.Common.CurrentVersion.targets(1177,5): error MSB3644: The reference assemblies for .NETFramework,Version=v5.0 were not found. To resolve this, install the Developer Pack (SDK/Targeting Pack) for this framework version or retarget your application
I researched the issue and came up with this solution https://stackoverflow.com/questions/65079876/error-msb3644-the-reference-assemblies-for-framework-netframework-version-v5#:~:text=assemblies%20for%20framework%20%22.-,NETFramework%2CVersion%3Dv5.,SDK%20or%20Targeting%20Pack%20installed.
However I have no idea how to actually implement this.
Do I create a separate yml file and it just fixes it when I push it to git?
I tried adding the following block to the devops-starter-workflow.yml file that was autogenerated by azure in the repo when it was auto created :
- task: UseDotNet#2
displayName: 'Use .NET Core sdk 5.0.100'
inputs:
packageType: 'sdk'
version: '5.0.100'
includePreviewVersions: true
- task: DotNetCoreCLI#2
displayName: 'dotnet restore'
inputs:
command: restore
projects: '**/*.csproj'
but I got the error "every step must define a uses or run key"
How do I actually add this to my build? I dont see a pipeline anywhere in my azure portal.
Are you specifying the MS Agent vs2017-win2016
Here is an example of one I have made should help you to figure it out your error looks to me like you are using the wrong agent as it cant find Visual Studio Code to be able to build the .Net App.
trigger:
branches:
include:
- master
pr: none
pool:
vmImage: vs2017-win2016
variables:
System.Debug: false
azureSubscription: 'AzureSub'
RG: 'myrg'
Location: UK South
appconnectionname: 'azuresub/serviceprinciplename'
jobs:
- job: job1
displayName: Create And Publish Artifact
steps:
- task: UseDotNet#2 ## Not Needed For MS Self Hosted Agent.
displayName: Use .Net Core 5.0.301 SDK
inputs:
packageType: 'sdk'
version: '5.0.301'
- task: DotNetCoreCLI#2
displayName: dotnet restore
inputs:
command: restore
projects: 'Website.csproj'
- task: DotNetCoreCLI#2
displayName: dotnet build
inputs:
projects: 'Website.csproj'
arguments: '--configuration Release'
- task: DotNetCoreCLI#2
displayName: dotnet restore unit tests
inputs:
command: restore
projects: 'UnitTests/UnitTests.csproj'
- task: DotNetCoreCLI#2
displayName: dotnet Test
inputs:
command: test
projects: 'UnitTests/UnitTests.csproj'
arguments: '--configuration Release'
- task: DotNetCoreCLI#2
displayName: dotnet publish
inputs:
command: publish
projects: 'Website.csproj'
arguments: '--configuration Release --output $(Build.ArtifactStagingDirectory)'
zipAfterPublish: true
modifyOutputPath: false
- task: PublishPipelineArtifact#1
displayName: Publish Pipeline Artifact
inputs:
targetPath: '$(Build.ArtifactStagingDirectory)'
artifact: 'Website'
publishLocation: 'pipeline'
- job: job2
displayName: Create Web App
dependsOn: job1
steps:
# Download Artifact File
- download: none
- task: DownloadPipelineArtifact#2
displayName: 'Download Build Artifacts'
inputs:
patterns: '**/*.zip'
path: '$(Build.ArtifactStagingDirectory)'
# deploy to Azure Web App
- task: AzureWebApp#1
displayName: 'Azure Web App Deploy: nsclassroom'
inputs:
package: $(Build.ArtifactStagingDirectory)/**/*.zip
azureSubscription: $(azureSubscription)
ConnectedServiceName: $(appconnectionname)
appName: 'nsclassroom'
ResourceGroupName: $(RG)
Please put this in a YAML formatter in Azure DevOps to just check spaces or install YML Extension in VS Code.
In the portal I created a seperate Web App and set the service to .Net version 5 instead of Core v3 and was able to build it properly. A new yml file was created and I had to just update the build and publish processes to the path with my csproj.
I think all along I needed the webapp - not devops starter

Vue.js does not start in Azure App Service

I currently have a pipeline in Azure Dev Ops configured to build, copy, archive, and then deploy a Vue.js app to an Azure App Service running on Linux. When I SSH into the server I do see the outputs of the build appearing successfully in the wwwroot folder but when I pull up the URL of the App Service I'm just shown the default landing page. Below are screenshots of my wwwroot folder, the page I'm seeing when I pull up the URL and a copy of the yml file for the pipeline. Is there something else missing from the yml file that I need to add to tell the app service to start the vue.js app by chance, I'm fairly new to this stuff.
# Build a Node.js project that uses Vue.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install and build'
workingDirectory: $(Build.SourcesDirectory)/client-app
- task: CopyFiles#2
inputs:
Contents: '$(Build.SourcesDirectory)/client-app/dist/**'
TargetFolder: '$(Build.ArtifactStagingDirectory)'
flattenFolders: true
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
includeRootFolder: false
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
replaceExistingArchive: true
verbose: true
- task: AzureRmWebAppDeployment#4
inputs:
ConnectionType: 'AzureRM'
azureSubscription: 'Azure subscription 1 (f719f76c-c23e-4160-aa93-914eb7851fdb)'
appType: 'webAppLinux'
WebAppName: 'trashbot'
packageForLinux: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
You need to add startup command on portal.
pm2 serve /home/site/wwwroot --no-daemon --spa
Related Posts:
1. Application is not loading when deployed via azure app service
2. Default Documents (custom 404) on Azure AppService Linux website

Azure DevOps First Time Web App Deployment Always Gives Error

I am facing this odd situation. I have the following setup.
React JS app created using create-react-app
Code on GitHub
Azure Web App - Create from the Azure Portal.
Azure DevOps + Pipelines + YAML
I have been doing a bunch of deployments this week and I noticed this situation. Every 1st deployment, always ends up with the following situation inside the wwwroot folder.
But, every subsequent deployment, works just fine.
To reproduce
Create a new app with create-react-app
Put it on GitHub
Link GitHub repository with Azure DevOps Pipelines
Target the Pipeline to deploy to a Azure Web App, which has been created brand new.
The initial deployment, will always fail, with the above image. And, please, remember, Subsequent deployments dont fail.
So, the question is, is there something I can do to prevent this?
I am planning to automate resource creation on Azure, along with automating deployment.
Update 1
as per the comment, including my YAML here. I use this in all of my react JS deployments, which show the same issue as above.
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install and build'
- task: CopyFiles#2
inputs:
Contents: 'build/**' # Pull the build directory (React)
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishBuildArtifacts#1
inputs:
pathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
ArtifactName: 'www' # output artifact named www
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/build/'
includeRootFolder: false
- task: AzureWebApp#1
inputs:
azureSubscription: 'ReactJSRecipeAppConnection'
appName: 'ReactJSRecipeAppSep232020'
package: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
FAILED TO INITIALIZE RUN FROM PACKAGE usually means the zip file is corrupted or not deflateable. Please check whether the WEBSITE_RUN_FROM_PACKAGE flag under App Service -> Application settings was set.
In addition, try to use task Azure App Service deploy v4, instead of task Azure Web App v1.
Taking off from the discussion about with #Cece Dong, here is what eventually worked for me.
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install and build'
- task: CopyFiles#2
inputs:
Contents: 'build/**' # Pull the build directory (React)
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishBuildArtifacts#1
inputs:
pathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
ArtifactName: 'www' # output artifact named www
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/build/'
includeRootFolder: false
- task: AzureRMWebAppDeployment#4
inputs:
appType: webApp
azureSubscription: 'RandomStuffReactJSConnection'
WebAppName: 'randomstuffreactjsappsept24'
package: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
The above, I can confirm, no longer requires a second trigger for a proper deployment.
specifically, the usage of 'AzureRMWebAppDeployment#4' is what solved the original issue.

Can't deploy MEAN stack app to Azure App Service via pipeline

I'm unable to deploy my app to azure app service. I've created a pipeline that fails at the azure app service deploy stage. I've been trying to get this working for a few days now. I've finally gotten it past the deploy app stage, but it just says Application Error when I click URL? and I configure it to point to the correct subscription. Web App for Linux, then chose the app-service call gc-dev, but I get errors still. I also get the same application error when trying to deploy app from vscode. It's possible both deployment types are dealing with exact same issue. IDK though.
I feel like it has something to do with the startup command since nothing is calling ng serve to launch angular code, but I'm not sure. Another thing that might be relevant to the issue is that all my angular services still have http://localhost:3000/api/ instead of some cloud url. Not sure if that's the issue with the inital page load though. I feel like it should still at least load the login screen. I appreciate any help!
Deploy Stage
The steps are as follows:
steps:
- task: Npm#1
displayName: 'install the #anguliar/cli'
inputs:
command: custom
workingDir: glass/
verbose: false
customCommand: 'install #angular/cli -g'
steps:
- task: Npm#1
displayName: 'install the project'
inputs:
workingDir: glass/
verbose: false
steps:
- task: Npm#1
displayName: 'build project'
inputs:
command: custom
workingDir: my-app/
verbose: false
customCommand: 'run build'
steps:
- task: Npm#1
displayName: 'npm install the dist/folder for express'
inputs:
workingDir: my-app/dist/
verbose: false
steps:
- task: Npm#1
displayName: 'Build the project'
inputs:
command: custom
workingDir: my-app
verbose: false
customCommand: 'run build'
steps:
- task: AzureRmWebAppDeployment#4
displayName: 'Azure App Service Deploy: my-app dev'
inputs:
azureSubscription: 'Azure subscription 1 (99c421dc-5cf5-444c-8df5-c71[![enter image description here][2]][2]02)'
appType: webAppLinux
WebAppName: 'gc-dev'
packageForLinux: my-app
WebConfigParameters: '-Handler iisnode -NodeStartFile index.js -appType node'
enableCustomDeployment: true
TakeAppOfflineFlag: false
Well, for one thing, this cannot be correct:
WebAppName: 'My-app - Dev'
You can't have spaces in App Service app names. It's part of the default URL.

How to link build result of "plain React"/node app with release pipeline

To try to make it short, I have a React application that's build on Azure DevOps Build Pipeline like so
trigger:
- Release
queue:
name: Hosted
demands: npm
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm ci
npm run build
displayName: 'Do npm ci and build'
This does what the build would do locally too. Locally the results of build go to build directory (unzipped).
Now when I try to create release pipeline there isn't an artifact to be found using Azure Deploy Web Service task.
If I try to add PublishPipelineArtifact#0 to the build pipeline to create a publication, the YAML editor just tells string does not match pattern... and doesn't let save the definition.
I suppose I should zip the contents of the generated build directory, but what would be the right way? Also, Is using the Azure App Service Deploy task the right way to deploy Azure WebApp? It works for ASP.NET Core apps so it finds the code drop artefact (zipped) and deploys it.
<edit: Adding
- task: PublishPipelineArtifact#0
inputs:
artifactName: 'drop'
targetPath: '$(Build.ArtifactStagingDirectory)/build'
Can actually be saved and the build run. Though it errors with
2019-01-25T22:42:27.6896518Z ##[section]Starting:
PublishPipelineArtifact 2019-01-25T22:42:27.6898909Z
============================================================================== 2019-01-25T22:42:27.6898962Z Task : Publish Pipeline Artifact
2019-01-25T22:42:27.6899006Z Description : Publish Pipeline Artifact
2019-01-25T22:42:27.6899034Z Version : 0.139.0
2019-01-25T22:42:27.6899062Z Author : Microsoft Corporation
2019-01-25T22:42:27.6899090Z Help : Publish a local directory
or file as a named artifact for the current pipeline.
2019-01-25T22:42:27.6899137Z
============================================================================== 2019-01-25T22:42:28.0499917Z ##[error]Path not exist: D:\a\1\a\build
2019-01-25T22:42:28.0708878Z ##[section]Finishing:
PublishPipelineArtifact
< edit 2: It appears removing the /build does the trick. Feels a tad odd since this is what's produced locally. It doesn't produce a zip file which is expected by the release job, namely Azure App Service Deploy.
Have to examine this problem later today (two o'clock at night here).
There was another problem: The script ran only npm ci and didn't run the building part. Separating it to two different steps made the difference. It appears PublishPipelineArtifact#0 in this case isn't an ideal option if I'd like to have the results as zipped to the staging area.
A currently working solution seem to be
resources:
- repo: self
trigger:
- Release
queue:
name: Hosted
demands: npm
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm ci
displayName: 'npm ci'
- script: |
npm run build
displayName: 'npm run build'
- task: ArchiveFiles#2
displayName: 'Archive files'
inputs:
rootFolderOrFile: '$(System.DefaultWorkingDirectory)/build'
includeRootFolder: false
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/artifact.zip'
replaceExistingArchive: true
- task: PublishBuildArtifacts#1
displayName: 'Publish Artifact'
inputs:
PathtoPublish: '$(build.artifactstagingdirectory)'
Maybe this can be simplified, but works for now and is flexible, it feels.

Resources