Build, test & deploy

Angular Raleigh Meetup

@AskUdhay

Hey, Am Udhay (OO-dhy)

Agenda

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

@AskUdhay

Build, test & deploy

@AskUdhay

Code

@AskUdhay

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

@AskUdhay

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

@AskUdhay

// 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

@AskUdhay

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

@AskUdhay

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

@AskUdhay

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

Documentation

GAE - Configuration

@AskUdhay

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

@AskUdhay

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.

@AskUdhay

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.