Deploy Angular app on AWS - EC2 with GitLab CI/CD

CI/CD (Continuous Integration & Continuous Deployment) is the most important part in development & we are going to integrate this with Gitlab CI/CD Pipelines to deploy Angular app on AWS EC2.

Click Here For Deploy Angular app on AWS - S3 with GitLab CI/CD

Perform this steps before going into CI/CD :

• Create new Angular application
• Create new project on GitLab and push your application on master branch
• Launch EC2 Instance on AWS (here I’m using Ubuntu instance)
• Install & configure Nginx sever on ec2 and verify it using your public IP

CI/CD using GitLab :

Gitlab provide great support for CI Integration and to start with it we need to create .gitlab-ci.yml file in repository at root.

• YAML file is used to run whenever you push your code into specific branch.
• It contains various blocks which give commands to gitlab CI/CD runner.

Explanation of this File :

Line 1 : We can use ‘#’ to enter comments in yml file

Line 2 : We can specify Image of node version for running the code on docker

Line 5–7 : Here process will be execute in two stages build & deploy

Line 10–11 : Run npm install before running any jobs

Line 14–18 : First job is for making build of application

• here you can specify any name you want for job
• stage name is must be same as defined in stages block
• script is set of executable commands
• only:[‘branch’] is used to provide specific branch to run this job

Line 21–25 : Second job is to deploy build in server

• echo is used to print any text while running yml file
• We are going to add new commands which performs various executions for deploying successfully.
• You can now check pipelines after adding this yml file in master branch.

Pipelines status of successful execution

Update .gitlab-ci.yml file for deploy :

• Add required variables in gitlab
• Configure ssh agent and ssh into server
• Install required packages to perform deploy
• Publish build using rsync into server

Now , it is not best practice to show Private_key & Server IP in yml file so for the security reasons we need to add variables in settings > CI/CD >Variables

• PRIVATE_KEY : Add RSA key ( .pem ) downloaded from AWS Instance
• SERVER_IP : ec2–X–X–XXX–XX.sp-east-2.compute.amazonaws.com

Gitlab Variables

Updated .gitlab-ci.yml file

Line 24–25 : For ssh into instance we need to install ssl-agent and for this we are going to use openssh-client & starting it with eval $(ssh-agent -s)

Line 26–27 : Make ssh directory and use chmod 700 to protects a file against any access from other users.

Line 28 : chmod 400 will give the user read permission for private key , we can use variables in yml file using ‘$’ sign.

Line 29 : This line is problem solver of first time ssh into any instance.

• When ssh into any instance for the first time we get confirmation ‘yes/no’.
• To disable this prompt we need to create entry in ~/.ssh/configfile.

Line 30–31 : rsync is package used for file copying. update & install rsync.

Line 33 : ssh into instance using private_key and server_IP.

Line 34 : rsync will copy all the files from dist/ folder to server path in which nginx server configured to host.

• You can provide any path to host your web app using nginx config with necessary permissions.

Extra approach to reduce pipeline time :

• node_modules and dist folder can be reused in pipeline executions if there is no changes or no new packages in it.
• we are going to cache reusable files in gitlab after executing jobs using reference of CI_COMMIT_REF_SLUG
• This cache is used to save time when next pipeline is going to execute.
• Here I’m updating gitlab-ci.yml file with cache block.

So coders , now

• Any commit / merge is made in master branch then CI/CD will run and deploy angular app into EC2 Server.

If you found this story useful to make your first CI/CD pipeline for EC2 , Please support it by clap.

Eat > Sleep > Code > Repeat

Thank You :)