<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Vinoth's Blog]]></title><description><![CDATA[Vinoth's Blog]]></description><link>https://blog.vinothkannan-ramamurthi.pro</link><generator>RSS for Node</generator><lastBuildDate>Thu, 07 May 2026 02:00:42 GMT</lastBuildDate><atom:link href="https://blog.vinothkannan-ramamurthi.pro/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Cloud Resume Challenge on AWS]]></title><description><![CDATA[Introduction 

I am working as a Technical Manager ( Hosting Services Group), I came across this aws resume challenge recently when I was discussing with one of my friend.     
Forrest Brazeal built this passionate community of cloud engineers lookin...]]></description><link>https://blog.vinothkannan-ramamurthi.pro/cloud-resume-challenge-on-aws</link><guid isPermaLink="true">https://blog.vinothkannan-ramamurthi.pro/cloud-resume-challenge-on-aws</guid><dc:creator><![CDATA[Vinothkannan Ramamurthi]]></dc:creator><pubDate>Fri, 03 Sep 2021 02:21:49 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1630614003926/d6Qhos4Ds.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p><strong>Introduction 
</strong></p>
<p>I am working as a Technical Manager ( Hosting Services Group), I came across this aws resume challenge recently when I was discussing with one of my friend.     </p>
<p><a target="_blank" href="https://twitter.com/forrestbrazeal">Forrest Brazeal</a> built this passionate community of cloud engineers looking to improve their skill and  more hands-on workloads. I have joined the <a target="_blank" href="https://cloudresumechallenge.dev/">Cloud Resume discord</a> and read nearly every blog and went over every resume for inspiration and some direction. </p>
<p><strong>1. Certifications</strong></p>
<p>I found this challenge after I have already passed two certifications.  </p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1630517716048/P4NxD2I30.jpeg" alt="aws_cert.JPG" /></p>
<p>The AWS Certifications are intense and no easy feat. It's a great learning experience for anyone trying to break into the Cloud world. You will learn a ton about AWS, but it's great to get some hands-on experience building projects. So this is where the AWS resume Challenge comes in.</p>
<p>Lets Start the Challenge:</p>
<p><strong>My Website (resume.vinothkannan-ramamurthi.pro) Architecture </strong></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1630613215402/BGoq6g7ZG.jpeg" alt="ARC_CRS_Vinoth.JPG" /></p>
<p><strong>2. Build Frontend</strong>
    (HTML / CSS )</p>
<p>I created my resume as HTML webpage and used CSS for styling. I have download the template from internet and modified.  </p>
<p><strong>3. Host the Website and configure the Domain</strong></p>
<p>Now I have my resume ready and need to configure Domain and DNS for my both blog and resume website. I have purchased my domain <a target="_blank" href="vinothkannan-ramamurthi.pro">vinothkannan-ramamurthi.pro</a> and routed everything accordingly through Route 53.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1630636479349/1Vv4QE0cw.png" alt="image.png" /></p>
<p>If you intend to use your domain with various services offered by AWS then you need to use Route 53 and point your domain to AWS*.</p>
<p>Create Hosted Zone:</p>
<ul>
<li>From AWS console, go to "Route 53" and select "Create Hosted Zone"  </li>
<li>Enter the domain name you want to point to AWS (it can also be a sub-domain). Select "Public hosted Zone" and click "Create hosted Zone"</li>
<li>Once the hosted zone is created, copy the nameserver values.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1630521559112/taKaK-QEB.jpeg" alt="Route53_vinothkannan.JPG" /></p>
<p>Update NS Records in your domain registered. I purchased my domain from <a target="_blank" href="https://porkbun.com">Porkbun</a>.</p>
<p>Login to <a target="_blank" href="https://porkbun.com">Porkbun</a> and select the domain and click edit NS(Nameservers) copy the nameserver values you have created on Route53 Hosted Zone.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1630521681845/OIBVmIgGw.jpeg" alt="porkbun.JPG" /></p>
<p><strong>4. Build Backend</strong></p>
<p>Used API Gateway, Lambda and Dynamo DB to record the visitor count. JavaScript function in static webpage makes a GET call to REST endpoint in API Gateway. The endpoint triggers a lambda function that increments a counter stored in DynamoDB table and returns the incremented value of counter as response to API call. (You can use SAM for API but I created manually to test)</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1630616554178/N4aceMOae.jpeg" alt="SL_BE.JPG" /></p>
<p>Step 1:  Create Dynamo DB table and item.
Table name: crc_vtable
Partition key: vapp
Item:  vapcount (String)
            lcount (number)</p>
<p>Step 2:  Create Lambda Function.  I used below python code.  (Create and assign role which has full access to Dynamo DB on lambda function)</p>
<pre><code><span class="hljs-keyword">import</span> <span class="hljs-type">json</span>
<span class="hljs-keyword">import</span> boto3
dynamodb = boto3.resource(<span class="hljs-string">'dynamodb'</span>)
table = dynamodb.<span class="hljs-keyword">Table</span>(<span class="hljs-string">'crc_vtable'</span>)
def lambda_handler(event, context):
response = <span class="hljs-keyword">table</span>.get_item(Key= {<span class="hljs-string">'vapp'</span> : <span class="hljs-string">'vapcount'</span>} )
count = response["Item"]["lcount"]
 # <span class="hljs-keyword">increment</span> string version of visit count
 new_count = str(int(count)+<span class="hljs-number">1</span>)
 response = <span class="hljs-keyword">table</span>.update_item(
        Key={<span class="hljs-string">'vapp'</span>: <span class="hljs-string">'vapcount'</span>},
        UpdateExpression=<span class="hljs-string">'set lcount = :c'</span>,
        ExpressionAttributeValues={<span class="hljs-string">':c'</span>: v_count},
        ReturnValues=<span class="hljs-string">'UPDATED_NEW'</span>
        )
    <span class="hljs-keyword">return</span> {
                <span class="hljs-string">'count'</span>: v_count
    }
</code></pre><p>Step 3: API Gateway configuration
I used REST API and crated GET action.   Pointed to lambda function. 
Enabled CORS and deployed API. Now I can access the API for the update and pull the visitor counts using JS.</p>
<p>Step 4: Java Script</p>
<pre><code>/ GET API REQUEST ( java script )
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">get_visitors</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// call post api request function</span>
    <span class="hljs-comment">//await post_visitor();</span>
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> fetch(<span class="hljs-string">'https://apigateway-url.com/api_updatecount'</span>, {
            <span class="hljs-attr">method</span>: <span class="hljs-string">'GET'</span>,
                    });
        <span class="hljs-keyword">let</span> data = <span class="hljs-keyword">await</span> response.json()
        <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"visitorscount"</span>).innerHTML = data[<span class="hljs-string">'count'</span>] + <span class="hljs-string">" visits."</span>;
        <span class="hljs-built_in">console</span>.log(data);
        <span class="hljs-keyword">return</span> data;
    } <span class="hljs-keyword">catch</span> (err) {
        <span class="hljs-built_in">console</span>.error(err);
    }
}
get_visitors();
</code></pre><pre><code>Added below tag to my html. 
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"visitorscount"</span>&gt;</span><span class="hljs-symbol">&amp;nbsp;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
</code></pre><p><strong>5. Infrastructure as Code (IAC)</strong>
Now that I had everything working, It was time to work with SAM to deploy the resources I needed for the project as infrastructure as code. This was my favorite part because SAM makes it extremely easy to deploy your services using infrastructure as code (AWS CloudFormation behind the scenes). </p>
<p><strong>6. CI/CD</strong> ( Github Repo / Git Actions )
Finally, my website is fully functioning I used GitHub Actions to set up CI/CD.  I spent some time to read GitHub's documentation to see how everything should be set up. Next, I had followed their docs and made my backend redeploy (using a cool SAM GitHub Action) once the tests were passed. Next, and this is the most useful part, I setup my frontend GitHub repo to automatically push to s3! This was really cool if you are anything like me and like to change things often. I just make the change locally and the GitHub Actions pushed the changes to S3. </p>
<p>Steps Followed: ( You should create service account only with Programmatic access on AWS IAM and attach S3access)</p>
<ul>
<li><p>I have installed GIT on windows. Downloaded Git from <a target="_blank" href="https://git-scm.com/download/win">Git Windows</a>.</p>
</li>
<li><p>Created repo on GitHub. <a target="_blank" href="https://github.com/signup?ref_cta=Sign+up&amp;ref_loc=header+logged+out&amp;ref_page=%2F&amp;source=header-home">GitHub Signup</a></p>
</li>
<li><p>Once you done with above two simple steps now you are ready to create your first public report for your frontend codes.</p>
</li>
</ul>
<p><a target="_blank" href="https://github.com/vinothkannan-ramamurthi/crc_frontend_vino">My frontend repo</a></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1630633685362/C_dG5poAG.png" alt="image.png" /></p>
<ul>
<li><p>I have launched Git bash from my system to clone the empty repo and push the files to GitHub repo --&gt; GitHub Action --&gt; S3.</p>
</li>
<li><p>Used below command to clone my empty repo crc_frontend_vino.</p>
</li>
</ul>
<pre><code><span class="hljs-selector-tag">Example</span>
<span class="hljs-selector-id">#git</span> <span class="hljs-selector-tag">clone</span> <span class="hljs-selector-tag">https</span>:<span class="hljs-comment">//github.com/vinothkannan-ramamurthi/crc_frontend_vino.git</span>
</code></pre><ul>
<li>Copied my website static contents to the repo directory and executed below git commands.</li>
</ul>
<pre><code><span class="hljs-comment">#mkdir .github</span>
<span class="hljs-comment">#mkdir .github/workflows</span>
<span class="hljs-comment">#touch .github/workflows/main.yml  --&gt; GitHub Action file to push the changes to S3</span>
</code></pre><ul>
<li>Edit the main.yml file and add below content.  Make sure you login to the GitHub to add secret parameters you have created for service account from AWS IAM.</li>
</ul>
<p>GitHub --&gt; Repo --&gt; Settings --&gt; Secret ( env parameters  AWS_S3_BUCKET: YOUR BUCKET NAME, AWS_ACCESS_KEY_ID: User Access ID, Your Key ID and AWS_SECRET_ACCESS_KEY: User Key)</p>
<pre><code><span class="hljs-attribute">name</span>: Upload Website

<span class="yaml"><span class="hljs-attr">on:</span>
  <span class="hljs-attr">push:</span>
    <span class="hljs-attr">branches:</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">master</span>

<span class="hljs-attr">jobs:</span>
  <span class="hljs-attr">deploy:</span>
    <span class="hljs-attr">runs-on:</span> <span class="hljs-string">ubuntu-latest</span>
    <span class="hljs-attr">steps:</span>
    <span class="hljs-bullet">-</span> <span class="hljs-attr">uses:</span> <span class="hljs-string">actions/checkout@master</span>
    <span class="hljs-bullet">-</span> <span class="hljs-attr">uses:</span> <span class="hljs-string">jakejarvis/s3-sync-action@master</span>
      <span class="hljs-attr">with:</span>
        <span class="hljs-attr">args:</span> <span class="hljs-string">--acl</span> <span class="hljs-string">public-read</span> <span class="hljs-string">--follow-symlinks</span> <span class="hljs-string">--delete</span>
      <span class="hljs-attr">env:</span>
        <span class="hljs-attr">AWS_S3_BUCKET:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.AWS_S3_BUCKET</span> <span class="hljs-string">}}</span>
        <span class="hljs-attr">AWS_ACCESS_KEY_ID:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.AWS_ACCESS_KEY_ID</span> <span class="hljs-string">}}</span>
        <span class="hljs-attr">AWS_SECRET_ACCESS_KEY:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.AWS_SECRET_ACCESS_KEY</span> <span class="hljs-string">}}</span></span>
</code></pre><ul>
<li>Add / Commit and Push your file to repo using below commands. ( Note: You should generate Personal access token Settings --&gt; Developer settings --&gt; Personal access token).</li>
</ul>
<pre><code><span class="hljs-comment">#git add -A</span>
<span class="hljs-comment">#git commit -a  ( make sure you are the new files to added are uncommented )</span>
<span class="hljs-comment">#git push orginal master</span>
</code></pre><ul>
<li><p>Finally you can see the changes pushed to GitHub repo --&gt; GitHub Action ( Workflow) --&gt; S3 --&gt; WWW. </p>
</li>
<li></li>
</ul>
]]></content:encoded></item></channel></rss>