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


