Build, test & deploy
Angular Raleigh Meetup
Hey, Am Udhay (OO-dhy)
- Code, Unit test & Build
- CD/CD - Pipeline
- GCloud - App Engine
- Configure pipeline
- Discussion (Q/A)
Build, test & deploy
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 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
// 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.
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.
- 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
- 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
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.
- 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.
- Create Key and download it.
- Add GCloud project ID and JSON key in GitLab > Settings > CI/CD > Variables
- 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.