15th May 2020

Angular CI/CD pipeline with GitLab & AWS EC2

DevOps

Written By, Jay Dobariya

Overview

A CI/CD pipeline helps you automate your software delivery process. Automated pipelines remove manual errors, provide standardized development, and help you to release software faster.
In this blog, we will create a CI/CD pipeline using the GitLab runner to deploy code in AWS EC2.

Prerequisites:

  • An AWS account.
  • GitLab account.
  • Basic Understanding of YAML

Setup Environment variables

We need to configure the environment variables in Gitlab to communicate with the AWS EC2. So we need the private key of the EC2 instance and IP address. For that you need to go to your project in Gitlab-> Settings-> CI/CD-> Variables.
ci:cd-evnironment-variables
Enter Key as DEPLOY_SERVER, value as IP address of your EC2 instance, and add another Key as SSH_PRIVATE_KEY, value as Private key of your ec2 instance.

Create .gitlab-ci.yml

Gitlab offers a continuous integration service if you add a .gitlab-ci.yml file to the root directory of your code repository. I’ve provided a sample .gitlab-ci.yml file as seen in example Github project. Please be sure to update the group name and repository name for your own project. If you copy this code please be sure to use your own repository name.
Here is an example of .gitlab-ci.yml file

If you commit to your master branch with .gitlab-ci.yml and files in the root directory of your project then the CI/CD pipeline will initiate with two steps outlined line-by-line below:
The Build Stage

  1. Update the packages in the node Docker container
  2. Install Angular
  3. Build the production bundle of Angular
  4. This code block creates a build artifact that will be passed onto the next stage in the pipeline if all operations in the container run without error.
  5. This keyword tells GitLab only to run this stage when a commit is pushed to the master branch.
    only:

The Deploy Stage

  1. This stage will only run if the build stage has successfully completed.
    dependencies:
  2. Generates to connect to the AWS unit the SSH key.
  3. Sets the permission to 600 to prevent a problem with AWS & disable the host key checking
  4. Script will run in & execute command

    The above command will copy all files in the dist folder to ec2 instance using secure copy command.
  5. Environment which tells GitLab to consider this Job as a production deployment, you can use various environments like development, testing.

Verify CI/CD pipeline

The CI/CD pipeline has been configured.

After making changes in your project, push to your master branch. Gitlab
CI/CD will trigger automatically if you have .gitlab-ci.yml file in the root directory.

ci/cd-yml
That’s it!
WOAH! You have successfully created CI/CD for angular projects to deploy in AWS EC2

Written By,

DevOps Engineer at Yudiz Solutions Pvt. Ltd