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.

GCloud Configuration

@AskUdhay

  • Create Key and download it.

@AskUdhay

  • Add GCloud project ID and JSON key in GitLab > Settings > CI/CD > Variables

DEPLOY_KEY_FILE_PRODUCTION

PROJECT_ID_PRODUCTION

@AskUdhay

  • Goto Storage > Browser and edit bucket permissions for staging.XXXXXX.appspot.com.

@AskUdhay

  • Add below roles

@AskUdhay

  • Search for app engine Admin api and enable it for the project.
  • Search for cloud build and enable it for the project.

@AskUdhay

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

https://ng-pounds-2-kg.appspot.com/

Demo

@AskUdhay

@AskUdhay

ng Thanks!

Build, test & deploy Angular app to Google Cloud

By Udhayakumar G

Made with Slides.com

Build, test & deploy Angular app to Google Cloud

This is my recent talk for Angular Raleigh Meetup. You will understand how to build, test and deploy Angular app to Google Cloud Platform using GitLab. Feel free to share this deck with your friends / colleagues. Any questions? Reach me @askudhay on Twitter. Happy learning! Thanks.

  • 3,056

More from Udhayakumar G