How to Deploy Angular JS on S3 with Cloudfront

Introduction

AngularJS is an open-source structural framework to develop dynamic web apps it is completely based on HTML and JavaScript. AngularJS extends HTML with new attributes. To host the static website we use s3 bucket with CloudFront from AWS. It is cheap, fast, secure, and scalable.

Prerequisites

  • AWS account
  • IAM user in the AWS account. If you do not have IAM user please refer “How to create IAM user”
  • IAM user must have full access to s3: to host a static website
  • IAM user must have full access to CloudFront: to create CDN
  • IAM user must have full access to AWS Certificate Manager(ACM): to provide a certificate for your application(if you want to deploy an application with HTTPS)
  • IAM user must have full access to Route53: for domain registration and/management
  • Build for AngularJs application. To Download test build for AngularJs application use

Deploy AngularJS code to S3 bucket

Login to the Aws console with IAM user credentials.

Step 1: Click on Services and select s3 services from the storage section.

Step 2: From the S3 buckets page. Click on Create bucket to create a bucket.

The pop-up window will open to create a new bucket.
Step 3: Give the same name as the domain name in the Bucket Name field and select Region for your bucket from the drop-down list of region field and click Next.
Note: It is required to have the same name as the domain to deploy the static websites.

Step 4: It includes the Configuration Option for the bucket. You can leave as it if you are not familiar with the options.
Tags: You can add multiple tags if you want.
Example:
Name of the bucket: Key = Name, Value = angularjs.zehncloud.com
When u create a bucket: Key = Date, Value = 20190919

Step 5: You need to Set Permissions for your bucket accessibility. For time being give all access to the bucket. Uncheck the Block all public access, select the checkbox to allow public access and click Next.

Step 6: From Review, you can see all the setting which we set previously for our bucket. Click on Create bucket button the bucket is successfully created.

Step 7: Click on bucket name from the s3 bucket list to open a recently created bucket and click on the upload button to upload code for the AngularJS application(if you don’t have your own code use above git repository to download sample code).

Step 8: Drag and drop the files from your local computer(download from the GitHub account) or click on the Add Files button to browse the file from a directory.

Once all the files are load in the window click on Next.

  • Do not change Permission from Set Permission tab and click on Next.
  • Do not Change Set Properties and Click on Next(default property will be standard).
  • Review the settings for upload files and click on the Upload button.

Files are upload in the s3 bucket. But the bucket is not publicly accessible. we need to change the permissions for the bucket to access the bucket data from outside.

Step 9: To make an S3 bucket public. Click on the Permissions tab and Bucket Policy.

Step 10: Use the below code to make S3 bucket public. In the below code you need to change your bucket name(angularjs.zehncloud.com). After made changes click on the Save button.

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

Once you click on the Save button the message will display “This bucket has public access”.

Host Static Website with S3 Bucket

Step 1: To Host, a static website move to the Properties tab and click on Static website hosting.

Step 2: Select “Use this bucket to host a website” option from the window and use the “index.html” page in Index document and “error.html” in Error document and click on the Save button.

Step 3: The static website is now hosted from s3 and you can also use s3 bucket Endpoint to load the AngularJS application.

Note: To host a static website with an S3 bucket only you can also refer to the article “How to host a static website by s3”.

Deploy the application to CloudFront

CloudFront is the Content Delivery Network (CDN) service provided by AWS. It is used to optimize speed and making highly available around the globe. If you use s3 bucket the performance may be just fine.
Now we use AWS CloudFront services to access the AngularJS application with CloudFront URL.

Step 1: Click on Service and select CloudFront from Networking & Content Delivery section in the AWS console.

Step 2: CloudFront Page will open. Click on Create Distribution.

Step 3: “Select a delivery method for your content” page will open. Click on the Get started button.

Step 4:Create Distribution page will open. Select the endpoint S3 bucket “angularjs.zehncloud.com” from the drop-down menu of Origin Domain Name.
Step -5: If you want to run a static website with HTTPs select Redirect HTTP to HTTPS radio button from Default Cache Behavior Setting section, otherwise leave the default.

Step-6: In the Distribution Settings add Alternative domain name(your domain name) and SSL Certificates to run the static website with HTTPS. Otherwise, leave SSL settings as default.

Step 7: Leave the other default setting as it is and scroll down to the bottom of the page and use “index.html” as Default root Object and click on the Create Distribution button to save the changes.

CloudFront Distribution is created.

Note: The distribution takes 10-20 minutes to complete the process.

Setting Up Route53 to create Record Set

Step-1: Open Route53 from the Service tab.
Step-2: Open your hosted zone from Route53 and create a Record Set to host the static website.
Step-3: Use the following steps to create Record Set.

  • Use the domain name in the Name field
  • Use A-type Record Set
  • Select Yes from the Alias.
  • In the Alias, Target selects the Cloud Front Distribution domain name from the drop-down menu. e.g: d8v28kf1fqbmte.cloudfront.net (the domain only reflect after the distribution is completed successfully) ”
  • Click on the Create button to save the Record Set.

Step-4: You can access the website with the created domain name. e.g., angularjs.zehncloud.com

Note: If your hosted zone created on any other service provider then create a Record Set with type CNAME and use CloudFront URL as a value.

Conclusion

We Deploy the AngularJS application to the S3 bucket and host a static website using S3. From the S3 bucket, we create a CDN using CloudFront with Certificates to secure the website and Route 53 is used to access the website with the hostname.

Related Posts

ELK stack setup on centos
AWS
Chanchal Khatri

ELK Stack Setup on CentOS

Contents Introduction Elasticsearch Kibana Logstash Introduction ELK stack is formerly known as Elastic Stack. It consists of Elasticsearch, Logstash, and Kibana. It helps you to store all your logs in one place and analyze the issues

Read More »
amazonsqs
AWS
Anuj Mandloi

Why Amazon SQS?

Contents Introduction Difference between SQS and MQ Benefits of SQS Getting started with AWS SQS Conclusion Introduction Amazon Web Services provides many services to make life easier. “Amazon SQS” is another service provided by Amazon

Read More »