Ubuntu - Azure pipeline for creating artifact Angular Universal app

FX_Sektor
May 14, 2023
231 views
1 vote
2 Answers

I’m trying to deploy my Angular Universal app to Azure Web App Service.

Locally npm run build:ssr && npm run serve:ssr works good.

Without ssr rendering npm run start works good too.

To deploy simple app without ssr works on my hosting good too. I have a problem only with deploy of ssr.

My web config for ssr

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="DynamicContent">
          <match url="/*" />
          <action type="Rewrite" url="main.js"/>
        </rule>
        <rule name="StaticContent" stopProcessing="true">
          <match url="([S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
          <action type="None" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" />
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
      <mimeMap fileExtension=".otf" mimeType="application/otf" />
    </staticContent>
  </system.webServer>
</configuration>

My azure pipline for ssr

first case

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
  - masters

pool:
  vmImage: ubuntu-latest

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: 'Install Node.js'

  - script: |
      npm install -g @angular/cli
      npm install --force
      npm outdated
      npm run build:ssr --prod
    displayName: 'npm install and build'

  - task: CopyFiles@2
    inputs:
      targetFolder: '$(Build.ArtifactStagingDirectory)'

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: 'dist'
      ArtifactName: 'dist'

Second case

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
  - masters

pool:
  vmImage: ubuntu-latest

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: 'Install Node.js'


  - script: |
      npm install -g @angular/cli
      npm install --force
      npm outdated
      npm run build:ssr --prod
    displayName: 'npm install and build'

  - task: CopyFiles@1
    displayName: 'Copy browser directory from dist directory to the root'
    inputs:
      SourceFolder: '$(Build.SourcesDirectory)/dist'
      TargetFolder: '$(Build.ArtifactStagingDirectory)/app-name'


  - task: CopyFiles@2
    displayName: 'Copy main.js to the root'
    inputs:
      SourceFolder: '$(Build.ArtifactStagingDirectory)/app-name/dist'
      Contents:  main.js
      TargetFolder: '$(Build.ArtifactStagingDirectory)/app-name'

  - task: DeleteFiles@1
    displayName: 'Delete the dist/main.js'
    inputs:
      SourceFolder: '$(Build.ArtifactStagingDirectory)/app-name/dist'
      Contents: 'main.js'
      
  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: 'dist'
      ArtifactName: 'dist'

And in result I have this

My way to root artifacts on Azure Web App configuration works well. My app can’t run only Angular SSR. Where is the mistake? In the pipeline or in the config file?

Answers

I used below YAML code to deploy Angular Universal app in my Azure DevOps pipeline:-

trigger:

- main

  

pool:

vmImage: ubuntu-latest

  

steps:

- task: NodeTool@0

inputs:

versionSpec: '16.x'

displayName: 'Install Node.js'

- script: |

npm install -g @angular/cli

ng new my-app --defaults --skip-install

cd my-app

ng add @nguniversal/express-engine --skip-confirmation

displayName: 'Create Angular Universal app'

  

- script: |

npm install

npm run build:ssr

workingDirectory: '$(System.DefaultWorkingDirectory)/my-app'

displayName: 'Build Angular Universal app'

  

- task: CopyFiles@2

inputs:

SourceFolder: '$(System.DefaultWorkingDirectory)/my-app/dist/my-app/browser'

Contents: '**'

TargetFolder: '$(Build.ArtifactStagingDirectory)'

displayName: 'Copy files to artifact staging directory'

  

- task: PublishBuildArtifacts@1

inputs:

PathtoPublish: '$(build.artifactstagingdirectory)'

ArtifactName: 'drop'

publishLocation: 'Container'

displayName: 'Publish artifact'

  

- task: AzureRmWebAppDeployment@4

inputs:

ConnectionType: 'AzureRM'

azureSubscription: '<subscription-id>'

appType: 'webAppLinux'

WebAppName: 'siliconwebapp'

packageForLinux: '$(Build.ArtifactStagingDirectory)'

RuntimeStack: 'NODE|16-lts'

StartupCommand: 'npm install && npm run build:ssr && npm start'

displayName: 'Deploy to Azure App Service'

Output:-

Deployment was successful, Refer below:-

To resolve your error, Check the application logs in your Azure Web app Log stream like below:-

Reference:- MS Document1

Validate your Web.config file and also while running your Pipeline Enable Debugging to get more insights on your Pipeline run.

You can also check the Logs by visiting the Kudu tool and see if the Deployment was successful. by visitng Deployment Logs and checking your code Files.

Reference:- Ms Document2

- SmitDarji
- May 12, 2023 at 11:30 am
- 0 votes
0
To create an Azure pipeline for an Angular Universal app, you can follow the below steps:
1. Setup a build pipeline:
- In Azure DevOps, go to the "Pipelines" section and create a new pipeline.
- Choose your Git repository and select the branch that you want to build.
- Select the "Empty job" template.
- Add an agent pool to run the pipeline, if necessary.
1. Install dependencies:
- Add a task to install Node.js and NPM if it’s not already installed on the agent.
- Run npm install command to install all the dependencies for your Angular Universal app.
1. Build the app:
- Run the build command npm run build:ssr to generate the server-side rendered output of the app.
- You can also add other build tasks like linting, testing, etc.
1. Publish the artifact:
- Add a task to publish the generated output as an artifact.
- Specify the path of the output folder where the server-side rendered files are generated.
- Choose a name for the artifact, e.g., "my-angular-app".
1. Setup release pipeline:
- In Azure DevOps, go to the "Release" section and create a new release pipeline.
- Choose your artifact source and select the artifact that you want to release.
- Add a deployment group, if necessary, to specify where the app will be deployed.
- Add a task to copy the artifact to the deployment target.
- Add a task to start the app on the server.
1. Test the app:
- Add tasks to test the app, like running end-to-end tests, API tests, etc.
1. Deploy the app:
- Once all the tests have passed, deploy the app to production.
These are the basic steps to create an Azure pipeline for an Angular Universal app. You can customize the pipeline based on your specific requirements.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Ubuntu – Azure pipeline for creating artifact Angular Universal app

Answers