Build, test & deploy

Angular Raleigh Meetup

Hey, Am Udhay (OO-dhy)

Agenda

  • Intro
  • Code, Unit test & Build
  • CD/CD - Pipeline
  • GitLab
  • GCloud - App Engine
  • Configure pipeline
  • Discussion (Q/A)

 

 

Build, test & deploy

Code

Clone this repo - https://github.com/askudhay/pounds-to-kg-skeleton

If you want to begin with Skeleton app, and add your own piece of code to create Pounds to Kgs converter logic. 

 

 

Otherwise, working code here - https://gitlab.com/udhayg/pounds-to-kg


Unit test

ng test

Unit test your Angular code by running below command:

Before running that, make sure you have written Unit tests for Components, Pipes, Directives & Services.

ng test --code-coverage

Build

// App runs in development mode, that works for debugging.
ng build 

// App doesn't run in dev mode
ng build --prod 

Build Angular code using below command, that generates artifacts to be deployed to Cloud. 

dist/ngpoundtokg - Artifacts generate under this folder.

CI/CD Pipeline

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day.

Continuous Delivery (CD) is the natural extension of Continuous Integration: an approach in which teams ensure that every change to the system is releasable, and that we can release any version at the push of a button.

GitLab

  • Though GitHub is popular in hosting code repositories, it lacked the support for inbuilt pipeline support.
  • Recently it introduced GitHub actions to handle cloud native CI/CD operations.
  • GitLab is already a leader in providing cloud native continuous integration support.
  • Runner execution time - 2000 minutes / month
  • Private repositories

Free account

Google Cloud

  • Though Google Cloud Platform (GCP) is not a leader in Cloud world, their price is cheap and affordable.
  • Google App Engine - Used to deploy our static website.
  • $300 worth of service free for first year

Free account

GAE - Configuration

  • Create app.yaml under the project and add below YAML configuration.
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: dist/ngapp/index.html
  upload: dist/ngapp/index.html
- url: /
  static_dir: dist/ngapp

skip_files:
  - e2e/
  - node_modules/
  - src/
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE

gcloud sdk uploads files per this YAML conf.

Pipeline Configuration

  • Create .gitlab-ci.yml under the project and add below YAML configuration.
stages:
  - build_angular
  - cloud_deploy
  - deploy

cache:
    paths:
    - ./node_modules
  
generate_artifact:
 image: node:12-alpine
 stage: build_angular
 script:
  - npm install -g @angular/cli --silent
  - npm install --silent
  - ng build --prod --output-hashing none
 artifacts:
  paths:
    - dist/
    
gcloud_deploy:
 image: google/cloud-sdk:alpine
 stage: cloud_deploy
 script:
  - echo $DEPLOY_KEY_FILE_PRODUCTION > /tmp/$CI_PIPELINE_ID.json
  - gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
  - gcloud --project $PROJECT_ID_PRODUCTION app deploy --verbosity=debug

GitLab orchestrates the pipeline execution based on this conf.

  • Create project in Google Cloud console.
  • Enable App engine by creating an application. Search for GAE in the search bar..
  • Create Service account under IAM and add below roles.

GCloud Configuration

  • Create Key and download it.
  • Add GCloud project ID and JSON key in GitLab > Settings > CI/CD > Variables

DEPLOY_KEY_FILE_PRODUCTION

PROJECT_ID_PRODUCTION

  • Goto Storage > Browser and edit bucket permissions for staging.XXXXXX.appspot.com.
  • Add below roles
  • Search for app engine Admin api and enable it for the project.
  • Search for cloud build and enable it for the project.

Push the code to GitLab, this will trigger pipeline and deploy the code to Google Cloud - App Engine.

Demo

ng Thanks!