<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ~\Chirchir</title>
    <description>The latest articles on DEV Community by ~\Chirchir (@oturpik).</description>
    <link>https://dev.to/oturpik</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1167910%2F9e0c707d-e016-4197-a316-aba907fe343e.jpeg</url>
      <title>DEV Community: ~\Chirchir</title>
      <link>https://dev.to/oturpik</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/oturpik"/>
    <language>en</language>
    <item>
      <title>Create a Static Website with AWS S3 and Route 53</title>
      <dc:creator>~\Chirchir</dc:creator>
      <pubDate>Sun, 01 Oct 2023 17:30:57 +0000</pubDate>
      <link>https://dev.to/oturpik/create-a-static-website-with-aws-s3-and-route-53-29p</link>
      <guid>https://dev.to/oturpik/create-a-static-website-with-aws-s3-and-route-53-29p</guid>
      <description>&lt;p&gt;Amazon Route 53 is the AWS answer to a well-known, reliable, cost-effective service for managing and maintaining domains. Route 53 is an Amazon Web Service, a highly available and scalable cloud Domain Name System (DNS) that connects the internet traffic to the web servers hosting your Web application.&lt;br&gt;
Route 53 lets developers and organizations route end users to their web applications in a very reliable and cost-effective manner. &lt;br&gt;
Like a traditional Domain Name System (DNS), Route 53 translates domain names into IP addresses to direct global traffic to your website. Route 53 converts World Wide Web addresses like &lt;code&gt;www.example.com&lt;/code&gt; to IP addresses like &lt;code&gt;10.20.30.40&lt;/code&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  Why is it called Route 53?
&lt;/h2&gt;

&lt;p&gt;In the name Route 53, "Route" is a likely reference to the U.S. Routes featuring the United States Numbered Highway System, often called U.S. Routes or U.S. Highways. The "53" is a possible reference to the TCP/UDP port 53 used for DNS server requests.&lt;/p&gt;
&lt;h2&gt;
  
  
  How does Route 53 work?
&lt;/h2&gt;

&lt;p&gt;AWS Route 53 connects customer and service requests to your infrastructure running in AWS. These requests may originate from AWS ELB, Amazon EC2 instances, or Amazon S3 buckets. AWS Route 53 also routes users to your infrastructure outside of AWS.&lt;br&gt;
With Route 53, you can also set up DNS health checks, continuously monitor your applications' ability to recover from failures, and control application recovery using Route 53 Application Recovery Controller service.&lt;/p&gt;



&lt;p&gt;AWS Route 53 traffic flow helps you manage traffic globally via various routing types, including latency-based routing, geo DNS, weighted round-robin, and geo proximity. All Route 53 routing types can be easily combined with DNS Failover to enable various low-latency, fault-tolerant architectures.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Some of the features of Route 53 include;&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;If a web application requires a domain name, Route 53 service helps to register the name for the website (i.e., domain name). &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can register your custom domain name by purchasing one from AWS if the domain name is available or move your current domain name to AWS with Route 53.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Route 53 also works with other AWS services to automatically route the user to a healthy resource if any failure is detected at any level.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  What is commonly mentioned with Route 53
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Records&lt;/strong&gt;&lt;br&gt;
Records are created to route internet traffic to the resources. Records are usually objects in the hosted zone that determine how traffic is routed for a domain name for it to reach the resources. Each record entry in a hosted zone must end with the name of the hosted zone.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hosted zone&lt;/strong&gt;&lt;br&gt;
 It is a collection of records containing information about how to route traffic for all the domains and subdomains. When you register a domain name with Route 53, a public hosted zone with the same name as the domain name is also created.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DNS Recursor&lt;/strong&gt;&lt;br&gt;
A DNS recursor is responsible for receiving queries from the client machines and making additional requests to fulfill the DNS query. It is the librarian that finds the specific book you asked for, using a recursive search.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DNS query&lt;/strong&gt;&lt;br&gt;
A DNS query is the request for information about a resource, in this case, a webserver through its domain name, that is sent from a DNS client to a DNS server.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Alias records&lt;/strong&gt;&lt;br&gt;
In the AWS world, Alias records help route internet traffic to other AWS resources like an S3 Bucket or Amazon CloudFront. Alias records are usually created in the top node of the DNS namespace.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Name servers&lt;/strong&gt;&lt;br&gt;
A name server in the DNS resource pipeline translates domain names into IP addresses, allowing you to find the specific web server that matches your DNS query. It ensures that your request is routed to the correct resources. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DNS failover&lt;/strong&gt;&lt;br&gt;
DNS failover is a DNS routing method that routes traffic from an unhealthy resource to a healthy resource, usually a web server, whenever a resource failure is detected. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Routing policy;&lt;/strong&gt; A Routing policy usually determines how Amazon Route 53 responds to queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DNS query&lt;/strong&gt;&lt;br&gt;
A request submitted by a computer or a smartphone to the Domain Name System (DNS) to connect to a resource associated with a domain name. When you search for amazon.com, you generate a DNS query for a web server that matches amazon.com to the DNS service.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Root Nameserver&lt;/strong&gt;&lt;br&gt;
It's the first step to converting human-readable hostnames like Amazon.com into IP addresses. Think of a Root nameserver as the library index used to find the location of a particular book on the shelves.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TLD Nameserver&lt;/strong&gt;&lt;br&gt;
Think of a top-level domain server (TLD) as a specific rack of books in a library. The TLD nameserver is the next step to discovering the specific IP address, and the last part of the hostname (for example, the TLD server is "com") is hosted in it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Authoritative Name Server&lt;/strong&gt;&lt;br&gt;
An Authoritative Name Server is the final nameserver in terms of web search. Think of it like a dictionary on a rack of books that translates a specific name into its definition. The authoritative nameserver is the final step in the nameserver query.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Domain Registration&lt;/strong&gt;&lt;br&gt;
With a scalable DNS management service like Route 53, users can either transfer management of existing domains or register new domain names to AWS Route 53 and enjoy consolidated management and billing from one console.&lt;br&gt;
&lt;strong&gt;Traffic Management&lt;/strong&gt; &lt;br&gt;
AWS Route 53 provides intelligent traffic routing based on parameters, including the health of endpoints, proximity, and latency, among many more.&lt;/p&gt;



&lt;p&gt;Route 53 performs real-time Health Checks and Failover operations depending upon the specific configurations; Route 53 then directs internet traffic to a healthy target. The health-checking agents will route the traffic to healthy endpoints if any unhealthy endpoint is found.&lt;br&gt;
The function of the health check feature is to generate CloudWatch metrics that trigger AWS Lambda functions to perform appropriate corrective actions.&lt;/p&gt;
&lt;h2&gt;
  
  
  DNS Routing Strategies
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Simple routing policy&lt;/strong&gt;&lt;br&gt;
It is a simple Route 53 routing technique that can route internet traffic to a single resource. With simple routing, routing multiple records with the same name cannot be created, but multiple values ( such as multiple IP addresses ) can be specified in the same record. Simple routing is used for a single resource that performs a given function for a particular domain. It allows configuring DNS with no unique Route 53 Routing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Failover routing policy&lt;/strong&gt;&lt;br&gt;
Whenever a resource goes unhealthy, this policy allows routing the traffic from an unhealthy resource to another or alternate resource. It uses an ELB (Elastic Load Balancing) setup with one resource in active mode and the other in standby mode. It switches automatically when there is a failover. One of the sites is active and serves all the traffic at a time, while the other Disaster Recover (DR) site remains in standby mode. The health of the primary site is monitored by Route 53 using the health check feature.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Geolocation routing policy&lt;/strong&gt;&lt;br&gt;
This routing policy routes the traffic to resources based on the user's geographic location. Geographic locations can be specified by continent, country, or state. It localizes the content or website in the language of the user. These are specified by continent or by country. The Geolocation Routing Policy routes the traffic as per the geographic location from where the DNS query originated. With the help of this policy, the traffic can be sent to resources in the same region from where the request originated.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Geo proximity routing policy&lt;/strong&gt;&lt;br&gt;
It routes traffic based on the user's geographical location and the type of content the user wants to access. The user can optionally shift traffic from resources at one location to resources at another location. Using this policy, a user can redirect more traffic to one location than another by specifying a value known as bias. The function of a bias is to expand or shrink the size of the geographic region from which traffic is routed to a resource. A Route 53 traffic flow must be used to use geo proximity routing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Latency routing policy&lt;/strong&gt;&lt;br&gt;
Latency Routing is used when the resources are in multiple AWS Regions, and the traffic needs to be routed to the region that provides the best latency. A latency-based routing policy is used if your website has to be hosted in multiple regions, but users need extremely low latency when accessing your website. To use this policy, the resource latency records are created in multiple AWS regions. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multivalue routing policy&lt;/strong&gt;&lt;br&gt;
It is used when users want Route 53 to return multiple values in response to DNS queries. It first checks the health of resources and then returns the multiple values only for the health resources.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Weighted routing policy&lt;/strong&gt;&lt;br&gt;
This routing policy routes traffic to multiple resources with a single domain name according to the proportion decided by the user. It routes multiple resources with a single domain name and controls the traffic routed to each resource. It is mainly useful for testing and load-balancing new versions of the software. A Weighted Routing Policy is used when multiple resources exist for the same functionality, and the traffic must be split between the resources based on specified weights.&lt;/p&gt;
&lt;h2&gt;
  
  
  Should you use Route 53, and why?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Highly Reliable:&lt;/strong&gt; Route 53 is built using AWS's highly available and reliable infrastructure. The distributed nature of the AWS DNS servers helps ensure a consistent ability to route the end-users to the web application.&lt;br&gt;
&lt;strong&gt;Scalable:&lt;/strong&gt; It automatically scales the resources during traffic spikes and handles large queries without the user's intervention.&lt;br&gt;
&lt;strong&gt;Easy to use:&lt;/strong&gt; Very user-friendly and easy to configure DNS settings. Route 53 can begin responding to DNS queries within minutes and be mapped easily to any resource.&lt;br&gt;
&lt;strong&gt;Health Check:&lt;/strong&gt; Route 53 monitors the health of the application. If any failure is detected, it automatically redirects the user to a healthy resource before the customer can identify the problem.&lt;br&gt;
&lt;strong&gt;Flexible:&lt;/strong&gt; You can decide which policy you want to use at a given time.&lt;br&gt;
&lt;strong&gt;Simple:&lt;/strong&gt; Using routing types, Route 53 helps to manage traffic globally.&lt;br&gt;
&lt;strong&gt;Cost-effective:&lt;/strong&gt; Payment is made only according to the services used.&lt;br&gt;
&lt;strong&gt;Secure:&lt;/strong&gt; By integrating it with IAM, access to Amazon Route 53 is secured by giving its permissions to only authorized users.&lt;br&gt;
Mapped with various AWS services: It can map domain names to Amazon EC2 instances, S3 buckets, and other AWS resources.&lt;br&gt;
53 traffic flow helps to manage traffic globally via various routing types. All these routing types can be easily combined with DNS Failover to enable various low-latency, fault-tolerant architectures.&lt;/p&gt;
&lt;h2&gt;
  
  
  How does this happen exactly?
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;A user opens a web browser and searches for &lt;a href="http://www.mysite.com" rel="noopener noreferrer"&gt;www.mysite.com&lt;/a&gt;. This creates a DNS request for &lt;code&gt;www.mysite.com&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;The DNS request is routed to a DNS resolver, usually managed by the Internet Service Provider (ISP).&lt;/li&gt;
&lt;li&gt;The ISP DNS resolver forwards the DNS request to a DNS root name server as the first stop.&lt;/li&gt;
&lt;li&gt;The DNS resolver then forwards the request to a top-level domain (TLD) nameserver corresponding to the &lt;code&gt;.com&lt;/code&gt;domain. One of the several hundreds or thousands of the name servers will respond with the Route 53 name servers associated with the &lt;code&gt;www.mysite.com&lt;/code&gt; domain. The DNS resolver then caches the name servers for future use.&lt;/li&gt;
&lt;li&gt;Out of the returned Route 53 name servers, the DNS resolver will forward the request to one of them.&lt;/li&gt;
&lt;li&gt;The Route 53 name server will then look for a match or a &lt;code&gt;www.mysite.com&lt;/code&gt; record in the hosted zone and retrieve the value. The value can be the Alias of a CloudFront distribution if it is a case of simple routing, a healthy nameserver, or sometimes a record corresponding to geolocation routing conditions.&lt;/li&gt;
&lt;li&gt;The DNS resolver then finds the route to the DNS record or CloudFront IP that the user can use to access &lt;code&gt;www.mysite.com&lt;/code&gt; and returns this value to the web browser.&lt;/li&gt;
&lt;li&gt;Your web browser then sends a request to the IP address of the CloudFront distribution containing the website.&lt;/li&gt;
&lt;li&gt;The CloudFront distribution will then serve the web page based on its content delivery settings from the cache or the origin server to your web browser.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;www.mysite.com&lt;/code&gt; is then displayed on your web browser.&lt;/li&gt;
&lt;/ol&gt;


&lt;h2&gt;
  
  
  How Route 53 is priced
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;1. DNS zones
The first 25 hosted zones charge is $0.50 per hosted DNS zone/month and then $0.10 for additional zones.&lt;/li&gt;
&lt;li&gt;Policy records
For every DNS name (such as &lt;code&gt;"www.mysite.com"&lt;/code&gt;), the charge is $50 per Standard query, then $0.4 per million queries for the first billion queries/month, and then it charges $0.2 per million queries/month.&lt;/li&gt;
&lt;li&gt;Latency-based routing queries
The charge is $0.6 per million queries for the first billion queries/month. After that, it charges $0.3 per million queries/month.&lt;/li&gt;
&lt;li&gt;Geo-based queries
It charges $0.7 per million queries for the first billion queries/month. After that, it charges $0.35 per million queries/month.&lt;/li&gt;
&lt;li&gt;Health checks
There is no charge for the first 50 AWS endpoints. After that, it charges $0.5 / endpoint/month.&lt;/li&gt;
&lt;li&gt;Domain registration
For domains across different TLDs, AWS charges as per a price sheet.&lt;/li&gt;
&lt;/ol&gt;


&lt;h3&gt;
  
  
  Things to watch out for
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Route 53 does not support DNSSEC:&lt;/strong&gt; DNSSEC or Domain Name System Security Extensions is used by the Internet Engineering Task Force as a suite of extension specifications. It effectively secures the data exchanged in DNS in Internet Protocol networks. &lt;br&gt;
Route 53 does not provide forwarding or conditional forwarding options for domains used in an on-premise network.&lt;/p&gt;

&lt;p&gt;Because Route 53 is combined with other AWS services, it may become a single point of failure. This results in a significant problem for AWS Route 53 disaster recovery and other relevant issues.&lt;/p&gt;

&lt;p&gt;Limited Route 53 DNS Load Balancing as Route 53 load balancing only provides basic load balancing capabilities because it lacks advanced policy support and enterprise-class features.&lt;/p&gt;

&lt;p&gt;Route 53 can be pretty expensive for businesses using non-AWS endpoints. Users can also experience slight latency with Route 53 when queries are forwarded to external servers after contacting Amazon infrastructure.&lt;/p&gt;
&lt;h2&gt;
  
  
  Working with Route 53
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Migrating your domain to Route 53&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Option 1: Leave your domain name with your current registrar.&lt;/strong&gt;&lt;br&gt;
If you want to leverage Route 53 routing features but don't want to move your domain name, you need to give your registrar the new name server addresses you'll get from the Route 53 records upon creating a hosted zone. Once you have updated the NS records in your current DNS, Route 53 will ensure the routing of all new domain requests through its name servers, but this propagation can take some time, so be patient.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Option 2: Move your domain name to Route 53&lt;/strong&gt;&lt;br&gt;
When you decide to transfer your domain to Route 53, you will need to get the DNS record data from your DNS provider. You will then import this data to a Route 53 hosted zone and replace the registrar's name server records with AWS name servers that you get after creating Hosted Zones. Depending on your settings, changes usually take up to a day to reflect.&lt;/p&gt;
&lt;h3&gt;
  
  
  Route 53 hosted zone creation
&lt;/h3&gt;

&lt;p&gt;With Route 53, you must create a Route 53 hosted zone. There are two types of hosted zones:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Public hosted zones are the most frequently used and specify how you want to route traffic on the Internet. Visit working with public hosted zones for more info.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Private hosted zones specify how you want to route traffic in an Amazon VPC (Virtual Private Cloud). Visit working with private hosted zones for more info.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;How to create a Route 53 public hosted zone&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To create a public hosted zone, open up the Route 53 dashboard from your AWS management console.&lt;br&gt;
You can then enter the domain name, which becomes the name of the hosted zone, and select the type as a public hosted zone.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to create a Route 53 private hosted zone&lt;/strong&gt;&lt;br&gt;
Creating a private zone starts in the same place; however, when you select private hosted zone, a new dialogue appears where you can choose the VPC or VPCs you want to route traffic to when someone enters the domain URL.&lt;/p&gt;



&lt;p&gt;To configure Amazon Route 53 to route traffic to the S3 bucket &lt;br&gt;
i.e., host a static site, we’ll do the following;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Get a domain name from a provider like GoDaddy or namecheap.com&lt;/li&gt;
&lt;li&gt;Create a hosted zone in Route 53&lt;/li&gt;
&lt;li&gt;Host a static website in an S3 bucket in the root domain&lt;/li&gt;
&lt;li&gt;Create a subdomain bucket for redirect&lt;/li&gt;
&lt;li&gt;Configure Route 53 to point to the S3 bucket.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8nte3kwow07ny3vpbsur.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8nte3kwow07ny3vpbsur.png" alt="The Architecture"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Getting a registered domain name.&lt;/strong&gt;&lt;br&gt;
 There are numerous domain name registrars available including Route 53. You can register a domain on Route 53 or use other providers available. I went with GoDaddy.com.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Create a Route 53 hosted zone&lt;/strong&gt;&lt;br&gt;
On the Route 53 console, click on Hosted Zones in the left sidebar menu. You should see a window similar to this. I already have a hosted zone but you might not have any. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyg0q7sddww3e2wdinflj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyg0q7sddww3e2wdinflj.png" alt="Hosted Zones"&gt;&lt;/a&gt;&lt;br&gt;
Click on create a hosted zone and you will see the options below&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekny7055q7smpy2lmlfv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekny7055q7smpy2lmlfv.png" alt="create a hosted zone"&gt;&lt;/a&gt;&lt;br&gt;
Type the domain name similar to the one you registered above. Mine is named &lt;em&gt;emmory.online&lt;/em&gt; . You can add a description then click on create hosted zone to create it.&lt;/p&gt;

&lt;p&gt;It may take a few seconds for the zone to be created. Once it is created, you should see a similar window.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frfgo5l8c7d11gwdi0zd9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frfgo5l8c7d11gwdi0zd9.png" alt="zones created"&gt;&lt;/a&gt;&lt;br&gt;
Since your zone is empty, you should see two records only. The NS and SOA record types. (I have selected them in the illustration). We will need the NS record. &lt;br&gt;
Click on the NS record check box and a window should appear on the right side. Copy all the values under the Value section.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmdc45b9s6efd0kbxipgp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmdc45b9s6efd0kbxipgp.png" alt="Nameserver options"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You will then update these values (all 4) in the nameserver section of your domain name provider where your domain is registered. I registered wth GoDaddy.com. Login on your Godaddy account &amp;gt; Select your profile &amp;gt; My products and Services &amp;gt; DNS &amp;gt; Nameservers and click use custom Nameservers then paste all the four you took from Route 53. When done, you should see something similar to this. Yours may look different but the premise holds.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqowcrz56s656cmk65jzb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqowcrz56s656cmk65jzb.png" alt="adding nameservers to GoDaddy domain"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You have now updated your domain to use Route 53 nameservers. Traffic and requests will use AWS provided nameservers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Create a static hosting for the root domain in S3 bucket&lt;/strong&gt;&lt;br&gt;
You probably figured out that you need website files by now to have a website. You can get templates or create a static website from scratch by yourself. Either way, review the files you will need for your static website.&lt;/p&gt;



&lt;p&gt;&lt;strong&gt;Create the root domain S3bucket&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Create a bucket with your exact domain name. I named mine &lt;em&gt;emmory.online&lt;/em&gt; since that’s the domain name.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Search for S3 in the AWS console. In the S3 console, click on &lt;strong&gt;Create bucket&lt;/strong&gt; and add your domain name under the bucket name.&lt;/li&gt;
&lt;li&gt;Disable &lt;strong&gt;Block all public access&lt;/strong&gt; and check the  &lt;strong&gt;I acknowledge...&lt;/strong&gt; box. This will enable public access for the bucket contents. Then click on &lt;strong&gt;Create bucket&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;The next step is to upload all your website files to the bucket (your-domain-name). To upload files, click &lt;strong&gt;Upload&lt;/strong&gt; from the S3 bucket menu and select all the files and click on upload.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you’d prefer a much shorter way than drag and drop. You can use the&lt;code&gt;AWS cli&lt;/code&gt; from your terminal. Change your directory with &lt;code&gt;cd /yourwebsite files directory&lt;/code&gt; and then type the following command&lt;br&gt;
&lt;code&gt;aws s3 cp . s3://&amp;lt;domain-name&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Attach a bucket policy to your bucket.&lt;/strong&gt;&lt;br&gt;
Earlier on, public access was enabled to the bucket. This is not always the recommended way and to fix it, you need to attach a bucket policy that controls access to your bucket and its contents.&lt;br&gt;
From the bucket window, go to** permissions** then scroll down and find the bucket policy. Click on &lt;strong&gt;Edit&lt;/strong&gt; and paste the following inside the bucket policy editor.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1405592139000",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::&amp;lt;domain-name&amp;gt;/*",
            ]
        }
    ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Make sure to replace the &lt;em&gt;&lt;/em&gt; with your bucket name. Click on &lt;strong&gt;Save changes&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Enable static website hosting.&lt;/strong&gt;&lt;br&gt;
On the S3 bucket console, go to the properties tab then scroll to the bottom to find &lt;strong&gt;Static website hosting&lt;/strong&gt; and click on &lt;strong&gt;Edit&lt;/strong&gt;.&lt;br&gt;
Choose &lt;strong&gt;Enable **and specify the index.html file inside the **Document&lt;/strong&gt; part and click on &lt;strong&gt;Save changes&lt;/strong&gt;. You should see a &lt;strong&gt;Bucket website endpoint&lt;/strong&gt;. If you click on the link, you should see your website.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faw6c1wzfji7jvztysmhs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faw6c1wzfji7jvztysmhs.png" alt="S3 bucket endpoint"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We’ll need another bucket for website redirect.&lt;br&gt;
Create another bucket but add _&lt;a href="http://www" rel="noopener noreferrer"&gt;www&lt;/a&gt;. _as the name of the bucket. Simply create the bucket and leave all the default setting on. &lt;/p&gt;

&lt;p&gt;Enable static hosting on the website as well. Except this time, choose &lt;em&gt;Redirect requests for an object&lt;/em&gt; as the Hosting type. Enter your domain name as the &lt;em&gt;Host name&lt;/em&gt; without the &lt;a href="http://www" rel="noopener noreferrer"&gt;www&lt;/a&gt;. part then choose &lt;strong&gt;http&lt;/strong&gt; as the protocol and &lt;strong&gt;click save changes&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The endpoint for this bucket should redirect you to your domain name when you click on it. You might get a This site can’t be reached page but that’s is purely intentional. &lt;/p&gt;

&lt;p&gt;Next. Configuring Route 53 to point to the S3 bucket endpoint.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Create a record.&lt;/strong&gt;&lt;br&gt;
Go to the hosted zone you created earlier in step one and click on create record. Only the &lt;code&gt;NS&lt;/code&gt; and&lt;code&gt;SOA&lt;/code&gt;record should be currently visible.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Record 1&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Leave &lt;strong&gt;Record name&lt;/strong&gt; empty and enable &lt;strong&gt;Alias&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;For &lt;strong&gt;Route traffic to&lt;/strong&gt;, choose &lt;strong&gt;Alias&lt;/strong&gt; to S3 website endpoint from the dropdown.&lt;/li&gt;
&lt;li&gt;For &lt;strong&gt;Choose Region&lt;/strong&gt;, choose the region where your S3 bucket is created.&lt;/li&gt;
&lt;li&gt;Under the &lt;strong&gt;Enter S3 endpoint&lt;/strong&gt;, your bucket endpoint with a domain name should appear. If for some reason it doesn’t, copy your Website endpoint from &lt;a href="https://docs.aws.amazon.com/general/latest/gr/s3.html#s3_website_region_endpoints" rel="noopener noreferrer"&gt;here&lt;/a&gt; based on the region you create your bucket in.&lt;/li&gt;
&lt;li&gt;You can turn off &lt;strong&gt;Evaluate target health&lt;/strong&gt;. I did.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Felrahfc9ejpgqib7eogm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Felrahfc9ejpgqib7eogm.png" alt="First DNS record"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Click on Add another record at the bottom and repeat the same steps as before. Except, the record name as &lt;a href="http://www" rel="noopener noreferrer"&gt;www&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Click Create records. You should get a similar window.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgeciy1qu1ohgpcu2ydar.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgeciy1qu1ohgpcu2ydar.png" alt="Second DNS record"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;et voilà! that’s it.&lt;br&gt;
You may also add an AWS ACM certificate to your website if it has the &lt;strong&gt;Not secure&lt;/strong&gt; tag. The certificate is absolutely free.&lt;br&gt;
You can now verify that your website is running as expected by going to your domain name. It might take a while for this to reflect so some things you might try including reducing the TTL for the records. Check out my website at &lt;a href="http://emmory.online/" rel="noopener noreferrer"&gt;emmory.online&lt;/a&gt;. I know, it needs a fixer upper.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Static Website Hosting with Amazon S3, CloudFront and CloudWatch metrics in 5 minutes or less</title>
      <dc:creator>~\Chirchir</dc:creator>
      <pubDate>Sun, 24 Sep 2023 21:18:08 +0000</pubDate>
      <link>https://dev.to/oturpik/static-website-hosting-with-amazon-s3-cloudfront-and-cloudwatch-metrics-in-10-minutes-or-less-29mh</link>
      <guid>https://dev.to/oturpik/static-website-hosting-with-amazon-s3-cloudfront-and-cloudwatch-metrics-in-10-minutes-or-less-29mh</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KGCXEEjR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq53r8e22v2i3pt9ihak.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KGCXEEjR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq53r8e22v2i3pt9ihak.png" alt="Architecture" width="800" height="474"&gt;&lt;/a&gt;&lt;br&gt;
The AWS cloud platform provides an all-in-one managed solution ideal for hosting quick, secure, and reliable static and even dynamic websites. We’re going to use Amazon Simple Storage Service (S3), Amazon’s CDN service- CloudFront and their monitoring service-CloudWatch to deploy and serve a website. But first, an introduction.&lt;/p&gt;
&lt;h2&gt;
  
  
  What is Amazon S3?
&lt;/h2&gt;

&lt;p&gt;Amazon S3(Simple Storage Service) is an object storage service that allows you to store unlimited objects and connect virtually all services to your bucket to serve, store and retrieve content over the internet. S3 provides a managed and scalable object storage solution for all data types from files to multimedia content and for this case, static website hosting.&lt;/p&gt;
&lt;h2&gt;
  
  
  What is CloudFront?
&lt;/h2&gt;

&lt;p&gt;CloudFront is an AWS Content Delivery Network (CDN) service that lets users serve content globally with low latency, high transfer speeds and secure connection. CloudFront leverages AWS Edge Locations as part of the global infrastructure to cache and deliver content closer to users across the world so they can experience millisecond latency and smooth performance. also provided by AWS, it enables users to deliver content globally with low latency, high data transfer speed, and securely delivered. With CloudFront, you also enjoy SSL/TLS encryption for your website with the option to push metrics to CloudWatch for even finer control and monitoring of your environments.&lt;/p&gt;
&lt;h2&gt;
  
  
  The Plan
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;S3 will store static website files and media content.&lt;/li&gt;
&lt;li&gt;A CloudFront distribution will serve the website to users across the world-the website is served through edge locations but the files are held in S3.&lt;/li&gt;
&lt;li&gt;CloudWatch will provide a dashboard to monitor the website.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Host the static website on S3
&lt;/h2&gt;

&lt;p&gt;There are tons of website templates online. You can find a template from &lt;a href="https://bootstrapmade.com/"&gt;bootstrapmade.com &lt;/a&gt;and customize it to your style needs. If you have a website already, that’s even better.&lt;/p&gt;
&lt;h2&gt;
  
  
  Create the S3 bucket
&lt;/h2&gt;

&lt;p&gt;We will provision an S3 bucket that will store the website content including the HTML and CSS files and also the media files. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Go to S3 console and choose create bucket. &lt;/li&gt;
&lt;li&gt;Click ‘Create Bucket’. Choose a globally unique bucket name and AWS region.&lt;/li&gt;
&lt;li&gt;Follow the prompts to create your S3 bucket.&lt;/li&gt;
&lt;li&gt;Untick “Block all public access” and acknowledge the change.&lt;/li&gt;
&lt;/ul&gt;



&lt;p&gt;Since we want our static website accessible from the internet.&lt;br&gt;
For now, we will enable public access but this is a security concern but we’ll fix it in a few.&lt;/p&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;That’s it, you don’t need anything else in this menu and can click ‘Create bucket’.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Once the bucket is created, click on its description to open it then choose Upload and upload all the website files. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3ce4iI2k--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y28ud143qck6nrb0tvnt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3ce4iI2k--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y28ud143qck6nrb0tvnt.png" alt="uploads" width="800" height="334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Once the files are uploaded, go to the bucket homepage, go to properties tab and scroll down to find the “Static website hosting” section and enable it.&lt;/li&gt;
&lt;li&gt;Choose "Host a static website".&lt;/li&gt;
&lt;li&gt;Choose an Index document and an Error document. You can fill in “index.html” into both.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GWUvkunc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z642zzi4md48l6hl1czj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GWUvkunc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z642zzi4md48l6hl1czj.png" alt="Hosted website" width="800" height="805"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Since this bucket will be used to host a website, ensure to make you index.html document as the index document part. &lt;/li&gt;
&lt;li&gt;Change any additional settings you want then click Save.&lt;/li&gt;
&lt;/ul&gt;



&lt;p&gt;Note down endpoint URLs displayed for the bucket in the “Static website hosting” properties panel. (Endpoint URLs look like &lt;a href="http://yourbucketname.s3-website-us-east-1.amazonaws.com"&gt;http://yourbucketname.s3-website-us-east-1.amazonaws.com&lt;/a&gt;.)&lt;br&gt;
If you try to open the endpoint URL in your browser, you might get an access denied error, let’s fix that by editing the S3 Bucket Policies.&lt;/p&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Wr8mSKE6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zrpdwlrej379wlr10qv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Wr8mSKE6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zrpdwlrej379wlr10qv.png" alt="S3" width="800" height="230"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In the S3 bucket you just created, go over to Permissions. Then Bucket Policy.
You need a bucket policy that will allow public website hosted on it. You can use the official AWS policy generator for these purposes, which can be found at: AWS Policy Generator
If you choose to use the generator, choose S3 bucket policy as the Type of Policy. Principal will be “*” (without quotes), and Actions will be &lt;code&gt;GetObject&lt;/code&gt;.
The * here is a wildcard that means access for all requesters. The policy looks like:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
 "Version": "2012-10-17",
 "Statement": [
  {
   "Sid": "PublicReadGetObject",
   "Effect": "Allow",
   "Principal": "*",
   "Action": [
    "s3:GetObject"
   ],
   "Resource": [
    "arn:aws:s3:::&amp;lt;BUCKET_NAME&amp;gt;/*"
   ]
  }
 ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;To find your ARN or Amazon Resource Name, scroll to the top of the window and you can find it written as&lt;br&gt;
  &lt;code&gt;arn:aws:s3:::&amp;lt;bucket_name&amp;gt;.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HcXEipZ0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6z67xyfupyc6qb0fg5r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HcXEipZ0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6z67xyfupyc6qb0fg5r.png" alt="ARN" width="800" height="173"&gt;&lt;/a&gt;&lt;br&gt;
Save to accept the changes and that’s all you need with S3 for now.&lt;/p&gt;



&lt;p&gt;If the website works just by hosting on S3, why then do you need CloudFront?  “Well, if you reload the endpoint link on your browser, your website has a 'Not Secure' tag. This is a red flag which means that your website is hosted but not secure. CloudFront allows you to serve your website and it’s contents securely.”&lt;/p&gt;
&lt;h2&gt;
  
  
  Configure CloudFront CDN
&lt;/h2&gt;

&lt;p&gt;We’ll create a CloudFront CDN distribution linked to the S3 bucket so that anyone who accesses the distribution will be viewing the S3 bucket hosted static website securely, with millisecond latency.&lt;/p&gt;
&lt;h2&gt;
  
  
  Create CloudFront distribution
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;On the AWS Console search for and open CloudFront.&lt;/li&gt;
&lt;li&gt;Click Create Distribution.&lt;/li&gt;
&lt;li&gt;Under Origin, for Origin domain, choose the Amazon S3 bucket that you created previously. It should be part of the selection menu.&lt;/li&gt;
&lt;li&gt;You should see an Origin settings page with many options and fields.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nrbIDu72--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4k9nxpjhx4mdjmy8ove.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nrbIDu72--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4k9nxpjhx4mdjmy8ove.png" alt="Origin section" width="800" height="561"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For the Origin Domain Name, you will need to paste the S3 endpoint URL from earlier. If you don’t have it, open the S3 console in another window, click on your bucket name, then click on Properties and scroll down to Static website hosting. Copy over the highlighted part of the Endpoint URL:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Skip the next parts because they involve a domain name and certificates. &lt;/li&gt;
&lt;li&gt;For Bucket policy, select Yes, update the bucket policy.&lt;/li&gt;
&lt;li&gt;For the settings under Default Cache Behavior Settings, under Viewer, set Viewer protocol policy to Redirect HTTP to HTTPS and accept the default values for the rest.&lt;/li&gt;
&lt;/ul&gt;



&lt;p&gt;If you’d like to know more about cache behavior options, see Cache behavior settings in the Amazon CloudFront developer guide.&lt;/p&gt;



&lt;p&gt;In the Web Application Firewall (WAF) section you can choose to either enable or disable AWS WAF security protections. This is a paid service and you can quickly rack up costs outside the free tier limits.&lt;br&gt;
If you have an SSL certificate, you can add it under the Custom SSL Certificate for CloudFront SSL encryption setting. &lt;br&gt;
Click Create Distribution at the very bottom of the page.&lt;br&gt;
Provisioning the Distribution takes 10-20 minutes. Once it is provisioned (Status = Deployed, State = Enabled), you can test it by pasting the URL under Domain Name into your browser. You should see the website you uploaded into S3.&lt;/p&gt;



&lt;p&gt;Now if you recall, you still have public access enabled on the S3 bucket, time to fix that. The CloudFront distribution setup should have given you a prompt to change the S3 bucket policy, copy the policy then go to the s3 bucket hosting the website and, in the permissions tab, choose edit button for the bucket policy section and paste the new policy.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::week20bucket/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::035431961317:distribution/E240YKEWLBC6VJ"
                }
            }
        }
    ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You might geta JSON syntax error, which is easy to fix; remove the old policy and it should all be good. If the error persists, choose confirm changes to get a link to a JSON syntax formatter.&lt;br&gt;
Now go back to the CloudFront distribution and find the distribution link and open it on another browser window, it should now work. You should be able to view your website and its contents with a CloudFront URL that has a secure tag.&lt;/p&gt;

&lt;h2&gt;
  
  
  Set up CloudWatch Metrics for CloudFront
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;On the CloudWatch window, click on Alarms then create alarm&lt;/li&gt;
&lt;li&gt;Click on Select Metric and type the name of the metric into the search box.&lt;/li&gt;
&lt;li&gt;Choose the metric for the service you’re going to monitor (under CloudFront &amp;gt; Per-Distribution Metrics)&lt;/li&gt;
&lt;li&gt;Click Select Metric.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--myiGR_IW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvb7f3jsg1ey5sejq391.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--myiGR_IW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvb7f3jsg1ey5sejq391.png" alt="CloudWatch metrics" width="800" height="364"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Configure your thresholds.
The Requests metric measures the number of requests made to your distribution. Major changes in this metric can signal issues in your application, such as errors in clients calling the distribution.
The BytesDownloaded metric measures the number of bytes downloaded from your distribution.
xxErrorRate is the percentage of responses in the 4xx range. A spike in this metric could suggest a changed API or moved resource resulting in bad requests or auth issues. Set this to 10% average limit.
5xxErrorRate measures the percentage of responses in the 5xx range. If your distribution is backed by servers and this metric spike, you likely have issues affecting your servers’ ability to respond to requests. Set this to 10% average limit.&lt;/li&gt;
&lt;li&gt;Click on Additional Settings to choose how many datapoints to alarm on and what to do when data is missing (we recommend ignoring missing data and just keeping the previous state to keep alerts from flapping)&lt;/li&gt;
&lt;li&gt;Click Create Alarm.
Unfortunately, since CloudWatch only supports creating an alarm on a single metric, you’ll have to repeat the whole process for each service and metric combination. This can get incredibly time consuming and tedious.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;And that’s it. You should now have a dashboard that shows all the relevant and custom metrics for your website. You can try reloading the website to see how the metrics dashboard changes.&lt;br&gt;
You have just deployed a website on S3 and made it available globally through CloudFront CDN.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>cloud</category>
      <category>s3</category>
    </item>
  </channel>
</rss>
