Content Introduction Prerequisites Virtual Host Redirect to HTTPS Conclusion Introduction To secure the data transfer redirecting the HTTP traffic to...
Read MoreAngularJS 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.
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.
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”.
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”.
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.
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.
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.
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.
Content Introduction Prerequisites Virtual Host Redirect to HTTPS Conclusion Introduction To secure the data transfer redirecting the HTTP traffic to...
Read MoreContent Introduction Requirement Getting Started Conclusion Introduction Angular is an open-source web application framework. It is a TypeScript-based free and development...
Read More