<?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>Forem: Andreas Niss*</title>
    <description>The latest articles on Forem by Andreas Niss* (@andreasniss).</description>
    <link>https://forem.com/andreasniss</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%2F1940109%2Ffac6fed7-b6fd-40ec-af7d-33b3b4453740.jpeg</url>
      <title>Forem: Andreas Niss*</title>
      <link>https://forem.com/andreasniss</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/andreasniss"/>
    <language>en</language>
    <item>
      <title>Cloud Resume on AWS</title>
      <dc:creator>Andreas Niss*</dc:creator>
      <pubDate>Sun, 18 Aug 2024 16:29:08 +0000</pubDate>
      <link>https://forem.com/andreasniss/cloud-resume-on-aws-7im</link>
      <guid>https://forem.com/andreasniss/cloud-resume-on-aws-7im</guid>
      <description>&lt;h1&gt;
  
  
  Background
&lt;/h1&gt;

&lt;p&gt;I'm pursuing the &lt;a href="https://cloudresumechallenge.dev/docs/the-challenge/aws/" rel="noopener noreferrer"&gt;Cloud Resume Challenge on AWS&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Purpose
&lt;/h1&gt;

&lt;p&gt;I love technology and currently work as a Senior PM. I want to advance my understanding of AWS by building projects instead of just learning from tutorials. Using the Cloud Resume challenge, I want to learn more about S3, CloudFront, Route 53 and databases on AWS with the goal to have hands-on experience and be better prepared for a more tech focused role and passing the AWS SA certificate.&lt;/p&gt;

&lt;h1&gt;
  
  
  Experience for each building block
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Part 1: Static website hosting
&lt;/h2&gt;

&lt;h3&gt;
  
  
  A: Create website with CSS
&lt;/h3&gt;

&lt;p&gt;Use GenAI to help me with template generation and build very basic website and saved as index.html, styles.css and for error handling a page called 404.html&lt;/p&gt;

&lt;h3&gt;
  
  
  B: Upload the files on S3 (simple website hosting)
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Create a S3 bucket (arn:aws:s3:::&lt;a href="http://www.anissen.net" rel="noopener noreferrer"&gt;www.anissen.net&lt;/a&gt;) and upload all files&lt;/li&gt;
&lt;li&gt;Adjust properties to allow "static website hosting" with hosting type: "bucket hosting"&lt;/li&gt;
&lt;li&gt;Adjust permissions: turn "block public access" to OFF&lt;/li&gt;
&lt;li&gt;Adjust permission: add bucket policy to allow action "s3.getObject"&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Helpful Tutorial: &lt;a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html" rel="noopener noreferrer"&gt;Configuring a static website on Amazon S3&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Result: AWS region specific website endpoint, link to access website found in Bucket under properties at the end of the page with start of the URL being the bucket name&lt;br&gt;
&lt;a href="http://www.anissen.net.s3-website-us-east-1.amazonaws.com" rel="noopener noreferrer"&gt;http://www.anissen.net.s3-website-us-east-1.amazonaws.com&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  C: Created a different bucket without direct access to internet and use Route 53 for custom domain and access the website via CloudFront
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=H58ZVs_rcNc&amp;amp;list=PLqoUmUbJ_zDGTajZjNpYI3QAJhu6sLgaB" rel="noopener noreferrer"&gt;End to end YT tutorial&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;New private S3 bucket&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;I uploaded all files to another bucket (arn:aws:s3:::resume.challenge.anissen2)&lt;/li&gt;
&lt;li&gt;Adjust properties to allow "static website hosting" with hosting type: "bucket hosting"&lt;/li&gt;
&lt;li&gt;Adjust permissions: leave "block public access" to ON&lt;/li&gt;
&lt;li&gt;Adjust permissions: add bucket policy which allows access to service CloudFront&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;CloudFront&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Useful tutorials:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-https-viewers-to-cloudfront.html" rel="noopener noreferrer"&gt;Enable HTTPS on CloudFront&lt;/a&gt;&lt;br&gt;
&lt;a href="https://repost.aws/knowledge-center/cloudfront-serve-static-website" rel="noopener noreferrer"&gt;Host static website on CloudFront&lt;/a&gt;&lt;br&gt;
&lt;a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html" rel="noopener noreferrer"&gt;Webiste Hosting with custom domain walkthrough&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Use Route 53 to route to CloudFront: &lt;a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html" rel="noopener noreferrer"&gt;https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html&lt;/a&gt; &lt;br&gt;
-&amp;gt; first need to request a certificate:&lt;/p&gt;

&lt;p&gt;Result: Access to private S3 bucket HTML page via &lt;a href="https://d3q2tesdwm4f6.cloudfront.net/" rel="noopener noreferrer"&gt;https://d3q2tesdwm4f6.cloudfront.net/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Route 53 and AWS Certificate Manager&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Purchased and registered domain anissen.net&lt;/li&gt;
&lt;li&gt;I set everything up already within CloudFront, but could not access via domain (I assume needs 1/2 day that domain is registered with all relevant DNS and spend a lot of time troubleshooting, although it was already correctly set up)&lt;/li&gt;
&lt;li&gt;Request a (SSL) certificate for the domain via AWS Certificate Manager and create a record in Route 53 for the domain with Type CNAME&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Tutorial: &lt;a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started-cloudfront-overview.html#getting-started-cloudfront-request-certificate" rel="noopener noreferrer"&gt;Certificate for Cloudfront&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;In Route 53 under the hosted zone, add one more record to with type A to route traffic to the CloudFront generated before.&lt;br&gt;
You will have at least 4 records in Route 53:&lt;br&gt;
i) Record Type NS (auto created when domain was created through Route 53)&lt;br&gt;
ii) Record Type SOA (auto created when domain was created through Route &lt;br&gt;
iii) Record Type A (which routes traffic to CloudFront)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Add alternate domain name in CloudFront under General &amp;gt; Settings to "anissen.net"&lt;br&gt;
Result: When opening &lt;a href="//anissen.net"&gt;anissen.net&lt;/a&gt; in browser, the user is redirected via Route 53 and the SSL certificate to a HTTPS URL accessing the static website hosted in S3 through CloudFront.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I want to have customer open website under &lt;a href="http://www.anissen.net" rel="noopener noreferrer"&gt;www.anissen.net&lt;/a&gt; and anissen.net&lt;/p&gt;

&lt;p&gt;I realized that one can only attach one custom domain with certificate to Cloudfront. So I needed to created a second CF distribution and attach a certificate for &lt;a href="http://www.anissen.net" rel="noopener noreferrer"&gt;www.anissen.net&lt;/a&gt; to this distribution and add this type a record to Route 53.&lt;/p&gt;

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

</description>
      <category>devchallenge</category>
      <category>aws</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
