How to Deploy an Angular App in Apache Tomcat With Azure DevOps

Jose Luis Campos Bautista

Published in

The Startup

6 min readOct 13, 2020

Deploy an Angular App in Tomcat Server using Azure DevOps.

Introduction

Currently, there are a lot of posts about this topic, but any of those pipeline configurations work for me, for this reason, I decided to write this little tutorial.

Background

When I trying to deploy my Angular app in Tomcat Server using Azure DevOps I had a lot of problems and I found different ways to do it, but any of these ways convinced me.

One way is to convert the build of Angular app into a war file then deploy using Apache Tomcat Manager.

So in this tutorial, I tried to explain who to configure Apache Tomcat and how to create a pipeline in Azure DevOps.

Tomcat configuration

First, we need to configure the user and password of Apache Tomcat, if you want to learn about it https://tomcat.apache.org/tomcat-9.0-doc/manager-howto.html.

To configure a user for deploy apps, you should edit the file tomcat-users.xml there is in %TOMCAT_HOME%\conf.

Add the next lines of code:

<role rolename=”manager-gui”/>
<role rolename=”manager-script”/>
<role rolename=”manager-status”/>
<role rolename=”manager-jmx”/>

The last four lines are roles that have the next porpuse:

maneger-gui: Access to the HTML interface.
manager-status: Access to the “Server status” page only.
manager-script: Access to the tools-friendly plain text interface.
manager-jmx: Access to JMX proxy interface and to the server status page.

After configured the roles we going to add the user with the next line of code:

<user username="tomcat" password="tomcat" roles="manager-gui,manager-script,manager-status,manager-jmx" />

If you want to access to remote management console you need to edit the file contex.xml, the file there is %TOMCAT_HOME%\webapps\host-manager\META-INF, and comment on the next line.

<!--
<Valve className="org.apache.catalina.valves.RemoteAddrValve"
allow="127\.\d+\.\d+\.\d+|::1|0:0:0:0:0:0:0:1" />
-->

Remember that you should configure the IP of your server. You can read more about it on the next page https://tomcat.apache.org/tomcat-9.0-doc/config/valve.html.

Try to access Tomcat console http://localhost:8080/manager/html and put your user name and password.

Login tomcat login manager. — Tomcat Manager login.

Pipeline

A pipeline is a way to work in the culture of DevOps, it helps us to manage all cycle life of the software.

The first step is to configure the pipeline in Azure DevOps, you can create a free account at https://azure.microsoft.com/en-us/services/devops/?nav=min.

Pipeline configuration

First, create a project in Azure DevOps.

Is necessary to create our variable groups, those variables will be available in the process of the deploy.

We need 6 variables:

output.directory: This is the directory where we put our build that will generate a script.
artifact.name: For deploy in tomcat we use a war file, this war file will create after we generate the build of the app.
artifact.azure.name: We need to save our war file for deploy in another environment.
server.dev.user: User that we configured in the file tomcat-users.xml.
server.dev.password: Password that we configured in the file tomcat-users.xml
server.dev.host: Is the host where is out tomcat.

We going to create an environment STAGING.

An environment in Azure DevOps is a collection of resources that can include virtual machines and others, one of the most advantages is the deployment history.

Azure Artifacts introduces the concept of multiple feeds that you can use to organize and control access to your packages.

Creating Angular App

Is necessary to install Angular CLI https://cli.angular.io/.

Once installed we run the next command line.

ng new angularApp

We need to install gulp, gulp-war and gulp-zip pacakges.

npm install gulp gulp-war gulp-zip –save-dev

In our project we use gulp, so we need to add a task creating gulpfile.js, you can know more about the topic in https://www.npmjs.com/package/gulp-war.

Create gulpfile.js in the project.

In this task, we packaging it into a war file.

Add the next scripts in package.json, first generate a build of our project, the second run the gulp task to convert our build in a war file.

Scripts configure in package.json

Crate our azure-pipelines.yml file

The next task is to create the azure-pipeline.yml in our project.

First, we configure when the pipeline trigger.

trigger:
 branches:
  include:
   - master
   - release/*

The pipeline triggered when pushing into branch master or branch release.

Configure the version of ubuntu that we use for the task.

pool:
 vmImage: 'ubuntu-latest'

We need to specify the variables that we use.

variables:
 - group: angular-app-vars

The next step is to configure the stages to generate the build and the war file.

- script: |
  npm install
  npm run build
  npm run build:war
 displayName: 'PublishPipelineArtifact'

It is necessary to publish our artifact to later use it. You can know about it https://docs.microsoft.com/en-us/azure/devops/pipelines/artifacts/pipeline-artifacts?view=azure-devops&tabs=yaml

- task: PublishPipelineArtifact@1
  inputs:
   artifactsFeeds: anguarApp
   targetPath: '$(output.directory)/$(artifact.name)'
   artifactName: '$(artifact.azure.name)'
  displayName: 'PublishPipelineArtifact'
  name: 'PublishPipelineArtifact'

The next stept is deploy in the STAGING environment, for this task is necessary to download the artifact.

- task: DownloadPipelineArtifact@2
  inputs:
   targetPath: '$(output.directory)/'
   artifactName: '$(artifact.azure.name)'
  displayName: 'DownloadPipelineArtifact'
  name: 'DownloadPipelineArtifact'

The next script is for deploy in tomcat if you can know more about it https://tomcat.apache.org/tomcat-9.0-doc/manager-howto.html

- script: |
  curl -T '$(output.directory)/$(artifact.name)' 'https://$(server.dev.user):$(server.dev.password)@$(server.dev.host)/manager/text/deploy?path=/$(artifact.azure.name)&update=true'
  displayName: 'Deploying app'

Complete pipeline.