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

5 min readMay 16, 2020

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 S3 Bucket.

Click Here For Deploy Angular app on AWS - EC2 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
Create S3 Bucket on AWS
Upload your angular app build from dist folder to s3 bucket

Select “ Grant public read access to this object(s) ” in set permission tab so that users can access your website

Go to permission tab and select “ Static Website Hosting ” , see below image and read instructions in it & click on save.

Now , if you go to the Endpoint URL you will see your application live …
In next step , we need to setup permission & policy of S3 bucket :
Go to Permissions and uncheck “ Block all public access ”

Now , select Bucket Policy and paste below JSON code in it.
Replace BUCKET_NAME with your s3 bucket name and click save.
This policy is for allowing only Read permission to user.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}

Create IAM user for GitLab :

We need to provide access to Gitlab so it can deploy build to S3 bucket.
For this , firstly we are going to create one IAM user & one IAM Policy after that we assign policy to this user.
Follow bellow steps perfectly :

IAM in aws > select User > click Add User
Enter your Username
Check Programmatic Access
Click next until number 5 tab

Now , In tab 5 you will get your user credentials file , don’t forget to download it.
This .csv file contains Access key ID & Secret access key for IAM user

Create IAM user Policy :

Select Policy in IAM section > Create Policy > Click JSON (editor)
Paste below code in JSON — Editor
Replace BUCKET_NAME with your S3 bucket name
This policy enable IAM user to Read , Write , Delete in S3 Bucket

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::BUCKET_NAME"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}

Now select IAM user which you have recently created and click Add Permissions
Search your policy & select > Click Next
Click Add permission

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 on 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
Install AWS CLI packages to perform deploy
Publish build using aws s3 sync into server

Now , add IAM credentials from .csv file in Gitlab as variables on this menu Settings > CI/CD >Variables

AWS_ACCESS_KEY_ID : Add Access key ID from .csv file
AWS_SECRET_ACCESS_KEY : Add Secret access key from .csv file

Line 22: Need to use Python as docker image because AWS - CLI packages are built on python.

Line 25 : Install AWS CLI using pip command of python

Learn more on AWS Command Line Interface

Line 27 : aws s3 sync command performs synchronization of files with source to destination.

The aws s3 sync command will, by default, copy a whole directory. It will only copy new/modified files.
--acl=public-read using this as parameter we specify this files forpublic read permissions.
Using the --delete option deletes files that exist in the destination but not in the source.
Note : If you want to copy all files to S3 but without deleting any files, then do not use the --delete option

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 S3 bucket.

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

Eat > Sleep > Code > Repeat

Thank You :)