Auto Deploy Angular website on S3 using GitLab CI
I am writing story with certain assumption
- You already have AWS account, if not go ahead and create one at https://aws.amazon.com/ (First year almost free).
- You have GitLab and GitLab CI already setup.
Host Angular website on S3
Login to AWS console and create new bucket which we will be using to host our Angular website.
Need to enable S3 bucket for static website hosting from “Properties” tab, keep first option “Use this bucket to host a website” checked and provide “index.html” as Index document. You may specify Error document if you are having separate file for same. In my case, we are handling within index.html itself.
Static website hosting window will provide “Endpoint” which can be directly access via browser.
After this initial setup, we may need to make bucket and files public readable so browser can access files. Also, need to make sure that all new file added in bucket has default public read access. Luckily, you can easily manage policy within S3 console’s “Permissions” tab.
You may need to replace “BUCKETNAME”.
That is it, your S3 bucket is ready to serve your static website.
All browsers now promoting HTTPS and started giving warning/error to catch user attention in case of website serve over HTTP only. Let’s make our website secure with CloudFront.
CloudFront is content delivery network for securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment. More you can get it here.
Go to CloudFront Console, and create new Distribution with delivery method ‘Web’. While adding “Origin Domain Name” it will list out all S3 buckets having in your account but DO NOT choose from it instead manually enter domain listed in your end point of s3 website, it may look like below.
BUCKETNAME.s3-website-us-east-1.amazonaws.com
Website distribution follow different permission than default S3 API and using from list of “Origin Domain Name” may cause “Access Denied” error. Please read full article here.
CloudFront assign domain name which can be use with SSL as well. We may want to use own domain name instead of CloudFront one. Create CNAME entry for domain name you like to use and mention it in “Alternate domain name” section in CloudFront.
Amazon ACM (Certificate manager) will let you create free SSL which can attached in CloudFront.
Build and Deploy via Gitlab CI
Once everything setup, you may be able to run your Angular app via cloud front URL or CNAME URL. My next target to make it auto deployment via our on premise GitLab CI/CD.
Adding following content in .gitlab-ci.yml will build and auto deploy Angular app whenever changes push to master branch.
Wherever your runner running make sure `ng cli` and `aws cli` installed.
Create secrete variable in Gitlab for AWS access key and secret key and gitlab runner will automatically pick variables to execute aws command.
Following task, we are doing here.
- Installing all dependency. (There must be some alternative, need to find solution for this).
- Building Angular app for ‘prod’.
- Sync your dist directory with S3 bucket. — delete option will delete older and unnecessary files.
- Lastly, we need to invalidate index.html file since CloudFront store at multiple location and if we do not invalidate it will keep rendering older version of index.html for some time and app does not work correctly.
