Home » cloudfront
Tag:

cloudfront

How To Host Angular Apps on AWS S3 and CloudFront
Tutorials

How To Host Angular Apps on AWS S3 and CloudFront

by corey.walker
written by corey.walker 5 minutes read

Almost every company and many people without a legal business entity would like to setup a web site 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 Angular website that is robust and scales well is to serve it on AWS (Amazon Web Services) S3 and AWS CloudFront.

Intro To AWS S3

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

Intro To AWS CloudFront

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.

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

  • Login to Amazon Web Services
  • 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 let’s move onto the other pieces of the setup.

AWS S3 And CloudFormation Setup

Upload contents to your S3 bucket

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

  • Go to AWS S3 and click on the S3 bucket hosting your website
  • 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

  • Navigate to AWS CloudFront via the AWS Console
  • 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 HTTPSalthough 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

  • If you have a custom domain name you want to use with your CloudFront distribution, you need to setup a few things in AWS Route 53
  • 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

Conclusion

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

0 comments
0 FacebookTwitterLinkedinTumblrRedditWhatsappTelegramCopy LinkPocketEmail