Angular, AWS CloudFront, and AWS S3

Hosting a Static Angular 7 website on AWS S3 and AWS CloudFront

Almost every company and many people without a legal business entity would like to setup a website for some reason or another. Some only need a static website for informational purposes, such as listing their business address, contact information and services and/or products they offer. Others need a dynamic website that can constantly be updated with new data by people other than those who setup the website.

One easy and robust way to setup a simple static website that is robust and scales well is to serve it on AWS (Amazon Web Services) S3 and AWS CloudFront.


AWS S3 is an object storage service offered from Amazon Web Services where you can create “buckets” where you can store almost all types of files in many different regions around the world. You can store Terabytes or more of almost any kind of data. You only pay for the amount of storage you use (you get 5GB free and only pay for the storage above that free tier.) Check out full pricing for AWS S3 here


AWS CloudFront is a globally distributed caching service that can take the data in an AWS S3 bucket and push it to edge locations around the world so the requests to the content are much quicker for the end users. This is because the request will be routed to the nearest edge location to the user. This is a great use for static websites that would like to see great performance load times for their static website.


Follow along to the steps below to get your static Angular 7 website setup on AWS S3 and CloudFront:

Creating an Angular 7 Application

That is all that is needed on the Angular side to try out deploying a static website to AWS S3


Setting Up AWS S3

  • Create an AWS S3 bucket to hold your static website resources such as HTML, CSS, JavaScript, and image files
  • Click on the bucket you just created and then click the Properties tab
    - Choose Use this bucket to host a website
    - For both Index Document and Error Document put index.html for the value
    - Click Save
  • Now click on the Permissions tab then Bucket Policy
    - Insert the following for the bucket policy (make sure to replace {bucket-name} with the actual bucket name you created). This will allow public access to the contents of your bucket, which is what you want if hosting a website in S3
{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::{bucket-name}/*”
}
]
}

NOTE: I normally also add the default AES-256 encryption for all of my AWS S3 buckets. It does not interfere with the hosting of a website and thus, definitely recommended unless you wish to use KMS which is perfectly fine as well and probably better, although more expensive by far). It can be found under Properties > Default Encryption for your bucket

Your AWS S3 bucket should now be ready to host a static website! Now lets move onto the other pieces of the setup.


Upload contents of your Angular project’s dist/ directory to your S3 bucket


Verify you can view your static website by visiting your bucket’s public URL

  • Click on the Properties tab and then Static Web Hosting
  • Click on the Endpoint url specified at the top of that section to verify if your website is setup

Create an AWS CloudFront distribution

  • Click on Create Distribution
  • Under Web click Get Started
  • For Origin Domain Name choose the S3 bucket you specified to host your website
  • For Viewer Protocol Policy the best option is Redirect HTTP to HTTPS although any will work, but normally its better to redirect users to HTTPS if they try to hit the HTTP endpoint
  • Under Distribution Settings choose where all you wish to have your static content distributed to. For now, US, Canada, and Europe will work fine. (The more locations its sent to, the more expensive it will be)
  • If you already have a domain name you wish to use for this website, enter the domain name for Alternate Domain Names (CNAMEs) field
  • Enter index.html for Default Root Object
  • Click Create Distribution button and wait for the listing to show Enabled for State (this normally takes a little while as it pushes all the content to all the edge locations)
  • You can now check that the distribution is live by visiting the URL listed under Domain Name for your distribution

Customizing Domain Name

  • Navigate to AWS Route 53 via the AWS Console
  • Click on Hosted Zones then Create Hosted Zone
  • Enter your domain name and choose Public Hosted Zone
  • Click on the hosted zone you just created
  • Make sure the Name Servers are correct based on where you registered your domain name at. Either create or edit to use the name server provided by your domain registrar
  • Create a new Record Set and choose A — IPv4 Address for Type
  • Choose Yes for Alias then select your CloudFront Distribution from the list
  • Click Create
  • Wait a few minutes for the DNS changes to propagate and try visiting your website using your custom domain name

Congrats! You now have a static Angular 7 website running on AWS S3, AWS CloudFront, and AWS Route 53!

If you found this article to be of help, please don’t forget to give as many claps as you believe it should have, and follow my blog if you are interested in seeing more like it!

Rocky Top Solutions Blog

Tutorials on software development, analytics, web and mobile development, SEO, and other technology related tutorials

Rocky Top Solutions

Written by

Service Disabled Veteran Owned Small Business providing custom website and mobile app development services, SEO services, and technology consulting.

Rocky Top Solutions Blog

Tutorials on software development, analytics, web and mobile development, SEO, and other technology related tutorials

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade