NetApp logo
Documentation PortalBack to Self Assist PortalBack
Documentation Portal
Contents

Angular Application Stack - V 4.7

Angular App Stack

The Angular application stack is used to build and deploy Angular application and produce deployment-ready containers for the CloudOne environment.

The containers produced with this stack share some common requirements with other application stacks deployed to the CloudOne environment. These shared requirements include:

  • Security scanning for any vulnerabilities
  • Code coverage scanning for test quality
  • Staging of the application container in the appropriate Docker container repositories and tagged according to CloudOne conventions
  • Completion of Unit Testing and User Acceptance Testing
  • Gated approvals before allowing deployments into pre-production and production environments
  • Audit trail and history of deployment within the CloudOne CI/CD Pipeline

Because of the above-listed requirements, the Angular application stack is provided in order to support the build and deployment of Angular application in a manner that integrates with CloudOne requirements and processes. The flow of deployment includes first a Continuous Integration stage of processing in a pipeline prior to deployment in the Continuous Deployment stages. The Continuous Integration stage focuses on building the application, running scans to check for test coverage and security vulnerabilities, and staging the container in the appropriate Docker repository ready for deployment. Subsequent pipeline stages deploy the application to the appropriate target Kubernetes spaces.

Getting Started in the Azure DevOps environment

Refer to the following link to learn about getting started in the Azure DevOps environment: Getting Started in Azure DevOps Environment

Source Code Repository Structure

The structure of the source code repository for the Angular application stack will contain a source directory tree with the application source code, and one or two directory trees with details for deployment, as follows:

  • source - this directory will contain Angular source code of the application
  • appCode-serviceName – (named as the AppCode followed by the application or service name) contains the Helm chart deployment materials if Helm v2 charts are used (this is the default)
  • config - contains nginx.conf file to be used in build pipeline

Also at the top of the repository is a file called azure-pipelines.yml. This file contains reference to the appropriate version of the CI/CD pipeline logic, some variables unique to the application (e.g. container version) as well as YAML data structures providing key information about the environments into which to deploy the application and the sequence of events to complete the deployment (e.g. dependencies, additional steps to retrieve secrets to be passed to the deployed container, etc).

Additional items in this repository will generally not be modified and should not be changed to avoid risk of breaking the pipeline workflows.

Application Configuration into the CloudOne CI/CD Pipeline

Once navigated to the appropriate repository, it can be cloned to a local development environment (i.e. local workstation) for the actual development of application and configuration of the application to be deployed. Configuration of the pipeline would include setting the appropriate container version (reflected in the appVersion parameter under the parameters: section) and defining the target workspace and hostspaces plus any dependencies between hostspaces or prerequisite deployment objects required. Once it is ready to be deployed into the CloudOne workspace and the new application version has been set as well, create a Git pull request for with updated code. The creation of this pull request will trigger the Continuous Integration pipeline to start.

Continuous Integration and Continuous Delivery Pipelines

Please note that the document “CloudOne Concepts and Procedures” contains more details about the specific flow of the application through the CI/CD pipelines

Once a pull request has been created against master branch, it will trigger the start of the CI/CD pipeline in order to build, scan and prepare the application for deployment into the Workspace. Although the CI/CD pipeline flow is automatically triggered, there are times when it needs to be manually run (or re-run) and the pipeline should be examined for the results of its preparation of the application and deployments. Details for examining the CI/CD pipeline and analyzing its results can be found here: Continuous Integration and Continuous Delivery Pipelines

Upgrading to Pipeline v4.7

Note: Please refer to v4.30, v4.4, v4.5 of the Angular documentation for details on Angular upgrade. Please note this version of pipeline is backward compactible with all versions of Angular and also supports both Cypress and Protractor for E2E Testing.

Note: - Node version is defaulted to 20. Angular is upgraded to v18 and all the dependencies are updated too.

CloudOne DevOps Pipeline v4.7 introduces CyberArk Integration with Rancher. Conjur performs certificate-based authentication with each Rancher cluster and securely supplies secrets to each namespace/application within the cluster. Secrets are securely stored in the CyberArk vault. For more information refer Conjur Integration Document.

  1. Setup CyberArk integration (link)
  2. Remove ambassador.yaml file from templates folder.
  3. Add release 4.7 referance in azure-pipelines.yaml.
resources:
  repositories:
  - { repository: templates, type: git, name: devexp-engg/automation, ref: release/v4.7 }
  - { repository: spaces, type: git, name: spaces, ref: devops/v1.0 }

Note : Security scan stage was release as a minor update in v4.7 to read more about how this feature works please refer <a href="https://selfassist.cloudone.netapp.com/docs/secret-scanning-pipeline">New Security Stage of Pipeline: CrowdStrike Image Scanning and Gitleaks Secret Scanning</a>.

To transition to v4.7, we recommend using the dxpctl tool. - Access the latest tool here

Downloadable Version Docker Build/Run Locally

Pipeline Definition: azure-pipelines.yml file

The logic for the v4.7 Angular CI/CD pipeline is a common and shared with other app stacks; however the configuration of the pipeline that applies the common logic to the specific application is defined in the top level directory of the source code repository for the application in a file named azure-pipelines.yml.

The structure of the azure-pipelines.yml file is a YAML file using standard YAML syntax. For general information about YAML structures, there are many available resources, including the tutorial at this link: YAML Tutorial.

There are certain required data elements that must be defined within the azure-pipelines.yml file as a prerequisite to the CI/CD pipeline running while other elements are optional and used to modify the standard behavior or the CI/CD pipeline.

The following resource repositories configuration is required to run v4.7 pipelines.

resources:
  repositories:
    - { repository: templates, type: git, name: devexp-engg/automation, ref: release/v4.7 }
    - { repository: spaces, type: git, name: spaces, ref: devops/v1.0 }

More details about the azure-pipelines.yml file can be found here: General Structure of the azure-pipelines.yml File

Application-Specific Pipeline Configuration

The extends YAML object is a complex object consisting of additional YAML objects. This object is used to extend the v4.7 pipeline logic (referenced by the repository defined in the resources object) by (a) referencing the correct appstack pipeline entry point (devops/angularjs.yml for the Angular pipeline) and (b) passing a set of YAML objects as parameters to influence the behavior of the pipeline to meet an application teams specific needs.

The extends YAML object consists of 2 objects beneath it:

  • template
  • parameters

The template YAML object is a single value set to the initial entry point for the v4.7 pipeline for the Angular appstack, so it should always be defined as follows:

extends:
  template: devops/angularjs.yml@spaces

The parameters YAML object is defined immediately following the template object and at the same indentation level. This is the object that requires the most attention and definition to be set up.

The parameters YAML object includes multiple parameters which can be used to configure CI/CD pipeline. Primarily this object contains parameters used for software builds. A typical setting in here would be to define appVersion used to build the application, looking like the following (including all of the extends object preceding it):

extends:
  template: devops/angularjs.yml@spaces
  parameters:
    appVersion: 4.7.x

Web Server image configuration

Pipeline uses latest official nginx image as base image for building Angular docker image. Different image can be configured using baseImage parameter as follows:

extends:
  template: devops/angularjs.yml@spaces
  parameters:
    webserver:
      baseImage: "library/nginx:stable-alpine"

Skipping deployments

It's a new handy feature introduced in v4.x pipeline. During initial builds or testing, deployments can be excluded for all spaces (workspace,devint,db/hostspaces) even if configured in azure-pipelines.yaml. Pipeline will only perform application build and scans.

extends:
  template: devops/angularjs.yml@spaces
  parameters:
    system:
      skipDeploy: true

Defining hostspaces for application deployment

Pipeline 4.7 simplifies the structure of azure-pipelines.yml to define all spaces(workspace,devint,db/hostspaces) as a single list. Older format is still supported but to continue using old format ref and k8s must be removed from spaces. It's strongly recommended to follow newer format. acceptanceSpace must be specified in the file. For example:

parameters:
  acceptanceSpace: devexp-ae103-stg
  spaces:
    workspace:
      helm:
        overrideFiles: |
          devexp-angularjs/values.workspace.yaml
    devexp-ae101-dnt:
      helm:
        overrideFiles: |
          devexp-angularjs/values.hostspace.yaml
    devexp-ae103-stg:
      helm:
        overrideFiles: |
          devexp-angularjs/values.hostspace.yaml
      dependsOn:
        - devexp-ae103-stg
    devexp-npc02-prd:
      helm:
        overrideFiles: |
          devexp-angularjs/values.hostspace.yaml

Update nginx configuration file

As part of CloudOne pipeline releases, we keep update base images that we provide for each application stack. Each newer version of base image may have latest configurations supported. Post upgrade, please refer Configuration Details, compare and update newer configurations into your repository.

Horizontal Pod Auto-scaler

Pipeline v4.7 includes configuration of Horizontal Pod Auto-scaling for any deployment. Please refer to documentation for more details. To configure HPA use below template in values.yaml for the host space required. Below commented example starts the deployment with a single pod which can be scaled up to 3 pods when avarage cpu usage crossed 70%.

# If you are using Horizontal POD Auto Scaler, you must disable ReplicaCount
replicaCount: 2

# hpa:
#   min: 1
#   max: 3
#   cpu: 70

Pod Anti-Affinity

Pipeline v4.7 enchances pod scheduling on the cluster with addition of Pod Anti-affinity. For multi-pod applications, this ensures pod scheduled scattered across the nodes within a cluster.

PVC for application stacks

Persistent Volume Claims (PVCs) for application stacks involve providing support for persistent storage in application stacks deployed in Kubernetes clusters. By enabling PVCs for application stacks, This feature will allow developers to define and configure persistent storage requirements for their applications using PVCs.

Note: By default this feature is disabled , you need to enable only if required .

persistence:
enabled: true
#storageClass: ""
accessMode: ReadWriteMany
# subPath: appdata
size: 25Gi
mountPath: /data

Detailed Pipeline Configuration

The remainder of the configuration work in the azure-pipelines.yml file focuses primarily on defining the target workspace and hostspaces for the Gatsby and providing details for these spaces, any additional tasks needed to prepare the deployments, and dependencies that will dictate the sequence of deployments in these spaces beyond the established Cloudone environment deployment approval processes. Details for configuring these elements of the pipeline can be found here: Pipeline Configuration Details

Kubernetes Deployment Objects

In order to deploy an application a number of Kubernetes objects must be defined and deployed. The definition of these objects is controlled through a set of files in one of two forms: Either as Helm charts (the default method) or as Kustomize files (a newer form of deployment description which has limited support in v4.0). Information about the contents and customization of these Kubernetes deployment objects can be found here: Kubernetes Deployment Objects

Troubleshooting

If something fails to deploy, the information about why the deployment failed (or was not even initiated) will be found in the logs of the CI/CD pipeline and can be tracked down using the methods described earlier in the “Continuous Integration and Continuous Delivery Pipelines” section.

However, additional information may be required either to better troubleshoot a failed deployment or to investigate the runtime behavior of an application that has been successfully deployed. In those cases, much of the information can be found in the rancher web console. Information about navigating and analyzing information from the rancher web console can be found here: Navigating the rancher Web Console

CONTENTS