<?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: Charisse C. Lorejo</title>
    <description>The latest articles on DEV Community by Charisse C. Lorejo (@cclorejo).</description>
    <link>https://dev.to/cclorejo</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%2F1984604%2F4303fd50-4926-41f0-a2f5-f93c81a482b9.jpg</url>
      <title>DEV Community: Charisse C. Lorejo</title>
      <link>https://dev.to/cclorejo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/cclorejo"/>
    <language>en</language>
    <item>
      <title>Build an Automated AWS CI/CD Pipeline with CDK</title>
      <dc:creator>Charisse C. Lorejo</dc:creator>
      <pubDate>Sat, 30 May 2026 16:05:02 +0000</pubDate>
      <link>https://dev.to/cclorejo/gfds-43e7</link>
      <guid>https://dev.to/cclorejo/gfds-43e7</guid>
      <description>&lt;p&gt;This article will talk about how to automate the deployment of a modern React website using Amazon Web Services (AWS). Instead of manually deploying files, you will build an automated Continuous Integration and Continuous Deployment (CI/CD) pipeline. By the end of this session, every time you push code to GitHub, AWS will automatically test, build, and deploy your application to the internet.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Concepts: DevOps and CI/CD
&lt;/h2&gt;

&lt;p&gt;Before we build the infrastructure, let's look at why we need it. &lt;/p&gt;

&lt;h3&gt;
  
  
  A Brief History: The Problem of Silos
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fe83yi7r90msvmcgvsgvp.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fe83yi7r90msvmcgvsgvp.jpg" alt=" " width="500" height="324"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before DevOps, a software development organization was typically split into two completely separate teams:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;The Development Team:&lt;/strong&gt; Designs the system, plans how to build it, and writes the actual code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The Operations Team:&lt;/strong&gt; Takes the code, tests it, checks for bugs, and manages the live servers. They send feedback back to the developers when things break.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;The Problem:&lt;/strong&gt; Because these teams were siloed, deadlocks occurred. When developers were writing code, operations sat idle. When operations was testing and deploying, developers had to wait for feedback. It created massive bottlenecks and endless "waiting for the other team" scenarios.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Solution: DevOps
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fx15hwrb4z8zlw6p94ymo.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fx15hwrb4z8zlw6p94ymo.jpg" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;br&gt;
DevOps is a philosophy that breaks down the barrier between Development and Operations, transforming the software development lifecycle into a continuous, collaborative process.&lt;/p&gt;

&lt;p&gt;It forms a continuous loop:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Plan &amp;amp; Code:&lt;/strong&gt; The team plans the feature and writes the code, storing it in a version control system (like Git) so changes can be tracked or reverted.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build &amp;amp; Test:&lt;/strong&gt; The code is compiled into an executable format and automatically tested for bugs. If it passes, it's ready.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deploy &amp;amp; Monitor:&lt;/strong&gt; The code is deployed to the working environment (often using containers). The system is actively monitored for errors.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Feedback:&lt;/strong&gt; Any issues or user behavior metrics are sent right back to the planning phase, and the cycle continues.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Automating the Cycle with CI/CD
&lt;/h3&gt;

&lt;p&gt;DevOps is a great culture, but how do we make it fast and automatic? That is where &lt;strong&gt;CI/CD&lt;/strong&gt; comes in.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Continuous Integration (CI):&lt;/strong&gt; Developers commit code to a shared repository frequently. Every time they push a small commit, a CI server automatically builds the code and tells them if it was a success or failure. This avoids massive merge conflicts.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Continuous Deployment (CD):&lt;/strong&gt; Once the code passes the CI checks, it is automatically deployed to the live environment without human intervention.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Mapping CI/CD to Our AWS Pipeline:&lt;/strong&gt;&lt;br&gt;
In this workshop, we will map this exact lifecycle to an automated AWS CodePipeline:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Source Stage:&lt;/strong&gt; &lt;strong&gt;GitHub&lt;/strong&gt; (Version control and storing our code).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build &amp;amp; Test Stage:&lt;/strong&gt; &lt;strong&gt;AWS CodeBuild&lt;/strong&gt; (Our CI server that installs dependencies and builds the app).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deploy Stage:&lt;/strong&gt; &lt;strong&gt;AWS CodeDeploy / Amazon S3 / CloudFront&lt;/strong&gt; (Where our live application lives and updates automatically).&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Before beginning the workshop, ensure you have the following ready:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A registered GitHub account&lt;/li&gt;
&lt;li&gt;An active AWS Account&lt;/li&gt;
&lt;li&gt;Node.js installed on your local machine (version 18 or higher recommended)&lt;/li&gt;
&lt;li&gt;A code editor, such as Visual Studio Code&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Step 1: Fork and Clone the Repository
&lt;/h2&gt;

&lt;p&gt;To build a pipeline, you need your own copy of the source code so that AWS can detect your specific changes.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the workshop repository on GitHub:
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/chalorejo" rel="noopener noreferrer"&gt;
        chalorejo
      &lt;/a&gt; / &lt;a href="https://github.com/chalorejo/devops-workshop-game" rel="noopener noreferrer"&gt;
        devops-workshop-game
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;DevOps Workshop Game&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;The DevOps Workshop Game is a full-stack, cloud-native Rock Paper Scissors application designed to demonstrate infrastructure as code (IaC) and CI/CD pipelines. This project features a React/Vite frontend and an AWS CDK-powered backend that fully automates the provisioning of S3 buckets, CloudFront CDN, and a CodePipeline for continuous deployment.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Requirements &amp;amp; Installation&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;To deploy and work with this project, you will need the following tools:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Node.js&lt;/strong&gt; (v20 or higher recommended)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AWS CLI&lt;/strong&gt; (configured with your AWS account credentials)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AWS CDK&lt;/strong&gt; (&lt;code&gt;npm install -g aws-cdk&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Git&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;To set up the project locally:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Clone the repository
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;git clone &lt;span class="pl-k"&gt;&amp;lt;&lt;/span&gt;repository-url&lt;span class="pl-k"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="pl-c1"&gt;cd&lt;/span&gt; devops-workshop-game&lt;/pre&gt;

&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;Install the AWS CDK dependencies:
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;npm install&lt;/pre&gt;

&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;Update &lt;code&gt;bin/devops-workshop-game.js&lt;/code&gt; with your AWS Account ID and preferred Region.&lt;/li&gt;
&lt;li&gt;Update the GitHub Source Action in &lt;code&gt;lib/devops-workshop-game-stack.js&lt;/code&gt; with your GitHub username and configure your GitHub token in AWS Secrets Manager as &lt;code&gt;workshop/github&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Usage Guide&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;To synthesize…&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/chalorejo/devops-workshop-game" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;Click the &lt;strong&gt;Fork&lt;/strong&gt; button in the top right corner to create a copy of this repository in your personal GitHub account.&lt;/li&gt;
&lt;li&gt;Open your local terminal and clone your newly forked repository by running the following command (replace &lt;code&gt;YOUR_USERNAME&lt;/code&gt; with your actual GitHub username):
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/YOUR_USERNAME/devops-workshop-game.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Change your directory into the cloned folder:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;devops-workshop-game
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Step 2: Authenticate with AWS
&lt;/h2&gt;

&lt;p&gt;Your local terminal requires explicit permission to interact with your AWS account and provision infrastructure.&lt;/p&gt;
&lt;h3&gt;
  
  
  Part A: Create an IAM User and Generate Access Keys
&lt;/h3&gt;

&lt;p&gt;Since deploying infrastructure with CDK requires administrative permissions, you will first create a dedicated IAM user.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Log in to the AWS Management Console.&lt;/li&gt;
&lt;li&gt;In the top search bar, search for &lt;strong&gt;IAM&lt;/strong&gt; (Identity and Access Management) and select it.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fb27xkgbw5uxa9z0rp3j5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fb27xkgbw5uxa9z0rp3j5.png" alt=" " width="799" height="303"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;On the left-hand sidebar, click on &lt;strong&gt;Users&lt;/strong&gt;, then click the &lt;strong&gt;Create user&lt;/strong&gt; button.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fm371o64u87ikq615uqp0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fm371o64u87ikq615uqp0.png" alt=" " width="799" height="303"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Enter a user name (e.g., &lt;code&gt;workshop-admin&lt;/code&gt;) and click &lt;strong&gt;Next&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;On the permissions page, select &lt;strong&gt;Attach policies directly&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;In the permissions policies search bar, type &lt;code&gt;AdministratorAccess&lt;/code&gt;. Check the box next to it and click &lt;strong&gt;Next&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F513jjjn4r3idisbiv709.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F513jjjn4r3idisbiv709.png" alt=" " width="800" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Review the details and click &lt;strong&gt;Create user&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Back on the Users list, click on your newly created user (&lt;code&gt;workshop-admin&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;Navigate to the &lt;strong&gt;Security credentials&lt;/strong&gt; tab.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Ft0npzhjkrq8eoyjpsbfy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Ft0npzhjkrq8eoyjpsbfy.png" alt=" " width="799" height="292"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Scroll down to the &lt;strong&gt;Access keys&lt;/strong&gt; section and click &lt;strong&gt;Create access key&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Select &lt;strong&gt;Command Line Interface (CLI)&lt;/strong&gt; as the use case, acknowledge the warning, and click &lt;strong&gt;Next&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fcx236z3u9zw8vhu6osha.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fcx236z3u9zw8vhu6osha.png" alt=" " width="775" height="636"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Click &lt;strong&gt;Create access key&lt;/strong&gt;. Leave this window open, as it displays your Secret Access Key which will never be shown again.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fd7h706bifeuci19hnkms.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fd7h706bifeuci19hnkms.png" alt=" " width="799" height="410"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Part B: Configure the CLI
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Open your terminal and type:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws configure
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Enter the details exactly as prompted:&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AWS Access Key ID&lt;/strong&gt;: (Copy and paste from the AWS webpage)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AWS Secret Access Key&lt;/strong&gt;: (Copy and paste from the AWS webpage)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Default region name&lt;/strong&gt;: &lt;code&gt;ap-southeast-1&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Default output format&lt;/strong&gt;: &lt;code&gt;json&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Step 3: Generate a GitHub Personal Access Token
&lt;/h2&gt;

&lt;p&gt;AWS CodePipeline requires authorization to securely pull your source code from GitHub whenever a new commit is detected.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Go to GitHub, click your profile picture in the top right, and select &lt;strong&gt;Settings&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Scroll down the left sidebar and click &lt;strong&gt;Developer settings&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Click &lt;strong&gt;Personal access tokens&lt;/strong&gt; followed by &lt;strong&gt;Tokens (classic)&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Ft6lu5jrvyz8t1nyw42ni.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Ft6lu5jrvyz8t1nyw42ni.png" alt=" " width="401" height="356"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Click &lt;strong&gt;Generate new token (classic)&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fvtitxtgwshwbngz2muzm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fvtitxtgwshwbngz2muzm.png" alt=" " width="798" height="215"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Name the token descriptively, such as "AWS Workshop Pipeline".&lt;/li&gt;
&lt;li&gt;Under &lt;strong&gt;Select scopes&lt;/strong&gt;, check the box next to &lt;code&gt;repo&lt;/code&gt; (This grants full control of private and public repositories).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fu0rh510mwz83qpr98l9d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fu0rh510mwz83qpr98l9d.png" alt=" " width="799" height="560"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Scroll to the bottom and click &lt;strong&gt;Generate token&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fjcl0zwmpazwdrmvdpikb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fjcl0zwmpazwdrmvdpikb.png" alt=" " width="800" height="327"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Copy the token immediately. It will start with &lt;code&gt;ghp_&lt;/code&gt;. Store it temporarily in a secure location.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Step 4: Store Your Token Securely in AWS
&lt;/h2&gt;

&lt;p&gt;Hardcoding security tokens in source code is a major security risk. You will use AWS Secrets Manager to store the token securely.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;In your terminal, run the following command. Replace &lt;code&gt;&amp;lt;YOUR_TOKEN&amp;gt;&lt;/code&gt; with the exact token you copied from GitHub:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws secretsmanager create-secret &lt;span class="nt"&gt;--name&lt;/span&gt; workshop/github &lt;span class="nt"&gt;--secret-string&lt;/span&gt; &lt;span class="s1"&gt;'{"token":"&amp;lt;YOUR_TOKEN&amp;gt;"}'&lt;/span&gt; &lt;span class="nt"&gt;--region&lt;/span&gt; ap-southeast-1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Upon success, the terminal will output a JSON block confirming the secret's creation.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Step 5: Install and Set Up AWS CDK
&lt;/h2&gt;

&lt;p&gt;The AWS Cloud Development Kit (CDK) is a framework that allows you to define cloud infrastructure using familiar programming languages like JavaScript.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Install the CDK globally on your machine using the Node Package Manager:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; aws-cdk
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Verify that the installation was successful by checking the version:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cdk &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Install the specific project dependencies required for this workshop:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Step 6: Understanding the Infrastructure Code
&lt;/h2&gt;

&lt;p&gt;Before connecting the pipeline, open &lt;code&gt;lib/devops-workshop-game-stack.js&lt;/code&gt;. This file is the core of our &lt;strong&gt;"Infrastructure as Code" (IaC)&lt;/strong&gt; setup. Instead of clicking through the AWS console, this JavaScript code defines exactly what cloud resources AWS needs to build for your app.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F50fte719t5wc3gjwpnz2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F50fte719t5wc3gjwpnz2.png" alt=" " width="574" height="79"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is a breakdown of what the code is doing:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;The Website Hosting Bucket:&lt;/strong&gt; The &lt;code&gt;websiteBucket&lt;/code&gt; object creates an Amazon S3 bucket configured specifically for static web hosting. Notice the &lt;code&gt;blockPublicAccess&lt;/code&gt; section—we explicitly turn off the default security blocks so anyone on the internet can see your live game.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F52ls6thsuanpubcliirw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F52ls6thsuanpubcliirw.png" alt=" " width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;The Global Content Delivery Network (CDN):&lt;/strong&gt; To ensure game assets (like images) load instantly worldwide, the code provisions an &lt;code&gt;AssetsBucket&lt;/code&gt; and pairs it with an AWS CloudFront distribution (&lt;code&gt;AssetsCDN&lt;/code&gt;). It even uses &lt;code&gt;BucketDeployment&lt;/code&gt; to automatically copy local files from &lt;code&gt;./frontend/src/assets&lt;/code&gt; directly into this bucket.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The Automated Builder (CodeBuild):&lt;/strong&gt; The &lt;code&gt;buildProject&lt;/code&gt; definition acts as our temporary build server. It spins up a Linux container with Node.js 20, passes in the new CloudFront URL as an environment variable (&lt;code&gt;VITE_CDN_URL&lt;/code&gt;), and runs &lt;code&gt;npm run build&lt;/code&gt; to compile our Vite application. &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fok8mdnlnj18fev9nru9h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fok8mdnlnj18fev9nru9h.png" alt=" " width="800" height="179"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It also automatically provisions IAM permissions to send build logs to Amazon CloudWatch.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;The Pipeline Orchestrator (CodePipeline):&lt;/strong&gt; Finally, the &lt;code&gt;WorkshopPipeline&lt;/code&gt; ties everything together into a three-stage workflow:

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Source:&lt;/strong&gt; Listens to your GitHub &lt;code&gt;main&lt;/code&gt; branch and pulls code securely using the Secrets Manager token.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build:&lt;/strong&gt; Hands the fresh code to the CodeBuild project.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deploy:&lt;/strong&gt; Takes the finalized &lt;code&gt;dist&lt;/code&gt; folder from the build output and places it in your public S3 Website Bucket.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Step 7: Connect Your Code to the Pipeline and Configure Environment
&lt;/h2&gt;

&lt;p&gt;You must configure the infrastructure code to target your specific GitHub fork rather than the original repository, and set up your specific AWS account environment.&lt;/p&gt;
&lt;h3&gt;
  
  
  Part A: Update the Pipeline Stack
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Open the project folder in your code editor.&lt;/li&gt;
&lt;li&gt;Navigate to the file located at &lt;code&gt;lib/devops-workshop-game-stack.js&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Locate the &lt;code&gt;GitHubSourceAction&lt;/code&gt; configuration block.&lt;/li&gt;
&lt;li&gt;Modify the &lt;code&gt;owner&lt;/code&gt; field and output block to ensure it looks exactly like this:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;actions&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;codepipeline_actions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;GitHubSourceAction&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;actionName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;GitHub_Source&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;owner&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;ENTER YOUR GITHUB USERNAME&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;repo&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;devops-workshop-game&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;branch&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;main&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="c1"&gt;// You will create a GitHub token and store it in AWS Secrets Manager&lt;/span&gt;
    &lt;span class="na"&gt;oauthToken&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;SecretValue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;secretsManager&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;workshop/github&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;jsonField&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;token&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="na"&gt;output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;sourceOutput&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;}),&lt;/span&gt;
&lt;span class="p"&gt;],&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Save the file.&lt;/li&gt;
&lt;/ol&gt;
&lt;h3&gt;
  
  
  Part B: Configure Your AWS Environment
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the application entry point file, typically located at &lt;code&gt;bin/devops-workshop-game.js&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Locate the environment (&lt;code&gt;env&lt;/code&gt;) configuration block.&lt;/li&gt;
&lt;li&gt;Update the &lt;code&gt;account&lt;/code&gt; property to use your specific environment setup:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;account&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;ENTER ACCOUNT NUMBER&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Your AWS Account ID from the ARN&lt;/span&gt;
  &lt;span class="nx"&gt;region&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ap-southeast-1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;  &lt;span class="c1"&gt;// The region where you created the secret&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Save the file.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Step 8: Bootstrap and Deploy the Infrastructure
&lt;/h2&gt;

&lt;p&gt;It is now time to compile your code into an AWS CloudFormation template and deploy it to the cloud.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Bootstrap your AWS environment. Bootstrapping provisions initial resources (like Amazon S3 buckets and IAM roles) that the CDK needs to perform deployments. Replace &lt;code&gt;&amp;lt;YOUR_AWS_ACCOUNT_ID&amp;gt;&lt;/code&gt; with your 12-digit AWS account number (found by clicking your name in the top right of the AWS console):
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cdk bootstrap aws://&amp;lt;YOUR_AWS_ACCOUNT_ID&amp;gt;/ap-southeast-1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Once bootstrapping is complete, deploy the pipeline:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cdk deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;The CLI will present a summary of security and IAM changes. Type &lt;code&gt;y&lt;/code&gt; and press Enter to approve them.&lt;/li&gt;
&lt;li&gt;The initial deployment and build process will take several minutes to complete.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Step 9: Find Your Live App &amp;amp; Test the Workflow
&lt;/h2&gt;

&lt;p&gt;Your pipeline is now active, and your application is hosted on an S3 bucket. You will now find your live URL and test the Continuous Deployment mechanism.&lt;/p&gt;
&lt;h3&gt;
  
  
  Part A: Find Your Live Website URL
&lt;/h3&gt;

&lt;p&gt;You can access your website link using either the terminal or the AWS console.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Option 1: Via the AWS CLI (Terminal)&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;List your S3 buckets to find the exact, unique name of your generated bucket:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws s3 &lt;span class="nb"&gt;ls&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;em&gt;Look for a bucket name starting with &lt;code&gt;devopsworkshopgamestack-websitebucket&lt;/code&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Your live website URL follows this standard S3 format (replace &lt;code&gt;&amp;lt;YOUR_BUCKET_NAME&amp;gt;&lt;/code&gt; with the exact name you found above):
&lt;code&gt;http://&amp;lt;YOUR_BUCKET_NAME&amp;gt;.s3-website.ap-southeast-1.amazonaws.com&lt;/code&gt;
&lt;em&gt;(Note: Make sure it is &lt;code&gt;http://&lt;/code&gt; and not &lt;code&gt;https://&lt;/code&gt;)&lt;/em&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Option 2: Via the AWS Console&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open the AWS Console, navigate to the &lt;strong&gt;S3&lt;/strong&gt; service, and click on your new bucket.&lt;/li&gt;
&lt;li&gt;Select the &lt;strong&gt;Properties&lt;/strong&gt; tab, scroll to the very bottom, and click the link under &lt;strong&gt;Static website hosting&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;h3&gt;
  
  
  Part B: Test the Automation
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Return to your code editor and open &lt;code&gt;frontend/src/App.jsx&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Make a visible change to the application, such as modifying the title text or altering a Tailwind CSS color class.&lt;/li&gt;
&lt;li&gt;Save the file, commit the change, and push it to your GitHub repository:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Updated application title for deployment test"&lt;/span&gt;
git push origin main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;Navigate to the AWS CodePipeline dashboard in your web browser. You will observe the pipeline automatically trigger, process the new code, rebuild the application, and update the live S3 website without any manual intervention.&lt;/li&gt;
&lt;/ol&gt;


&lt;h2&gt;
  
  
  Step 10: Clean Up Resources (Crucial)
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Warning:&lt;/strong&gt; To ensure you do not incur unwanted charges on your AWS account after the workshop, you must tear down the infrastructure you built.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  1. Destroy the CDK Stack
&lt;/h3&gt;

&lt;p&gt;This command will delete the S3 bucket, CodeBuild project, and CodePipeline. Run this in your terminal from the root of your project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cdk destroy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Type &lt;code&gt;y&lt;/code&gt; and press Enter when asked to confirm the deletion.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Delete the Secret
&lt;/h3&gt;

&lt;p&gt;The AWS CDK command does not delete secrets you created manually. Delete your GitHub token from AWS Secrets Manager by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws secretsmanager delete-secret &lt;span class="nt"&gt;--secret-id&lt;/span&gt; workshop/github &lt;span class="nt"&gt;--force-delete-without-recovery&lt;/span&gt; &lt;span class="nt"&gt;--region&lt;/span&gt; ap-southeast-1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Revoke the GitHub Token
&lt;/h3&gt;

&lt;p&gt;Finally, practice good security hygiene by deleting the token from GitHub so it can never be used again.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Go to &lt;strong&gt;GitHub &amp;gt; Settings &amp;gt; Developer settings &amp;gt; Personal access tokens &amp;gt; Tokens (classic)&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Find "AWS Workshop Pipeline" and click the &lt;strong&gt;Delete&lt;/strong&gt; button next to it.&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>aws</category>
      <category>devops</category>
      <category>cicd</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>fdxs</title>
      <dc:creator>Charisse C. Lorejo</dc:creator>
      <pubDate>Tue, 09 Dec 2025 20:35:02 +0000</pubDate>
      <link>https://dev.to/cclorejo/fdxs-4oel</link>
      <guid>https://dev.to/cclorejo/fdxs-4oel</guid>
      <description></description>
      <category>webdev</category>
    </item>
    <item>
      <title>Understand the Global Infrastructure of Amazon Web Services</title>
      <dc:creator>Charisse C. Lorejo</dc:creator>
      <pubDate>Wed, 12 Nov 2025 02:36:37 +0000</pubDate>
      <link>https://dev.to/cclorejo/understand-the-global-infrastructure-of-amazon-web-services-4n3p</link>
      <guid>https://dev.to/cclorejo/understand-the-global-infrastructure-of-amazon-web-services-4n3p</guid>
      <description>&lt;p&gt;As a beginner of AWS, one of the first things you do is to &lt;strong&gt;&lt;em&gt;pick a Region&lt;/em&gt;&lt;/strong&gt;. But why does this matter? What does &lt;strong&gt;&lt;em&gt;AWS Global Infrastructure&lt;/em&gt;&lt;/strong&gt; mean?&lt;/p&gt;

&lt;p&gt;It may seem little or even insignificant at first but AWS Global Infrastructure is the backbone to all AWS services. It is design to deliver high-speed and high-performance cloud services to all customers worldwide.&lt;/p&gt;

&lt;p&gt;We will discuss each major components of the AWS Global Infrastructure namely:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Regions,&lt;/li&gt;
&lt;li&gt;Availability Zones, &lt;/li&gt;
&lt;li&gt;Data Centers, and &lt;/li&gt;
&lt;li&gt;Edge Locations&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What are the parts of the AWS Global Infrastructure?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;AWS Regions&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fmnm9ge6lbnwkked0hlm7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fmnm9ge6lbnwkked0hlm7.png" alt="The dots in the photo represents the regions" width="800" height="448"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.google.com/url?sa=i&amp;amp;url=https%3A%2F%2Fv1.maturitymodel.security.aws.dev%2Fen%2F1.-quickwins%2Fchoose-regions%2F&amp;amp;psig=AOvVaw3OMPqkl3uASsS9rYxcJu93&amp;amp;ust=1762996971206000&amp;amp;source=images&amp;amp;cd=vfe&amp;amp;opi=89978449&amp;amp;ved=0CBUQjRxqFwoTCKDR3dW565ADFQAAAAAdAAAAABAE" rel="noopener noreferrer"&gt;Image Source&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;As of 2025, AWS consists of about &lt;strong&gt;33 geographic Regions&lt;/strong&gt; across the global and even more coming in the future.&lt;br&gt;
Each Region is independent of the others. This separation allows you to choose where your data is stored and where your applications run.&lt;br&gt;
A Region is a separate geographic area—like Singapore, Tokyo, Frankfurt, or Ohio.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Why is it important to choose the right Region?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;To reduce latency&lt;/li&gt;
&lt;li&gt;To meet compliance or data-residency requirements&lt;/li&gt;
&lt;li&gt;To keep your services close to your users&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Availability Zones (AZs)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fmzeel8jfp2hk56hy98t9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fmzeel8jfp2hk56hy98t9.png" alt="Visiual representation of AZs" width="560" height="370"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.google.com/url?sa=i&amp;amp;url=https%3A%2F%2Fwww.techtarget.com%2Fsearchcloudcomputing%2Ftip%2FUnderstand-AWS-Regions-vs-Availability-Zones&amp;amp;psig=AOvVaw3bX9KKA3Z6be2sUdOS5B_I&amp;amp;ust=1762997780865000&amp;amp;source=images&amp;amp;cd=vfe&amp;amp;opi=89978449&amp;amp;ved=0CBUQjRxqFwoTCIjM59i865ADFQAAAAAdAAAAABAE" rel="noopener noreferrer"&gt;Image Source&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Now that we have an idea about region, we now have Availability Zones. Inside every region, there are multiple AZs, typically three(3) or more. An Availability Zone is made up of one or more physically separate data centers within the same Region.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Key Point:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Availability Zones are close enough to provide low latency, but far enough apart to prevent failures from affecting the whole Region.&lt;br&gt;
If one AZ goes down due to power, network, or natural disaster issues, the others remain available. This is why AWS is known for high reliability.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Data Centers&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Data centers are the physical buildings that contain:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;servers&lt;/li&gt;
&lt;li&gt;networking equipment&lt;/li&gt;
&lt;li&gt;power and cooling systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AWS data centers house the actual computing hardware where your cloud resources run.&lt;br&gt;
Each AZ contains multiple data centers to ensure redundancy. When we say your "resources are in the cloud," they really live inside these secure facilities.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Visual Representation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F5a4upnrooa3w4n0tvxii.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F5a4upnrooa3w4n0tvxii.png" alt="The relationship of regions, AZs, and data centers" width="800" height="698"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.google.com/url?sa=i&amp;amp;url=https%3A%2F%2Fmedium.com%2F%40anandrishu1996%2Faws-global-infrastructure-availability-zones-regions-and-edge-locations-2e0e86b1f99a&amp;amp;psig=AOvVaw3bX9KKA3Z6be2sUdOS5B_I&amp;amp;ust=1762997780865000&amp;amp;source=images&amp;amp;cd=vfe&amp;amp;opi=89978449&amp;amp;ved=0CBUQjRxqFwoTCIjM59i865ADFQAAAAAdAAAAABAu" rel="noopener noreferrer"&gt;Image Source&lt;/a&gt;&lt;br&gt;
This is what the global infrastructure looks like. A region contains three or more AZs, and AZs have data centers that runs the cloud. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Edge Locations&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Not every country has an AWS Region, but many countries, including the Philippines, have Edge Locations.&lt;br&gt;
Edge locations are used by services like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Amazon CloudFront (CDN)&lt;/li&gt;
&lt;li&gt;AWS Global Accelerator&lt;/li&gt;
&lt;li&gt;Route 53 DNS
They act as local access points that cache or route content closer to users.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Why does this matter?
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;It reduces latency. Instead of your data traveling all the way to the Singapore Region (the closest Region to the Philippines), some content can be served from the Manila edge location, making loading times faster.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Why Do We Need to Understand These Concepts?
&lt;/h2&gt;

&lt;p&gt;Understanding the AWS Global Infrastructure helps you:&lt;br&gt;
&lt;strong&gt;1. Choose the Best Region for Your Workloads&lt;/strong&gt; - Selecting the wrong Region can lead to slow performance or higher costs. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Design Highly Available Applications&lt;/strong&gt; - Using multiple AZs protects your systems from outages.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Improve Performance for Global Users&lt;/strong&gt; - Edge locations help content reach users faster.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Meet Compliance and Legal Requirements&lt;/strong&gt; - Some countries require data to be stored within specific geographic boundaries.&lt;br&gt;
being aware of this can save money.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Optimize Cost&lt;/strong&gt; - Prices vary per Region—being aware of this can save money.&lt;/p&gt;




&lt;p&gt;By understanding how Regions, Availability Zones, Data Centers, and Edge Locations work together, users can design cloud solutions that are faster, more secure, and more reliable.&lt;/p&gt;

&lt;p&gt;Whether you’re deploying a small web app or managing enterprise-scale systems, knowing how AWS’s infrastructure operates gives you the power to make smarter choices about performance, cost, and resilience in the cloud.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>cloud</category>
      <category>cloudcomputing</category>
    </item>
    <item>
      <title>Going Serverless 🤖⚡: How to Launch a Website in less than 15 minutes with AWS Lambda &amp; API Gateway (Beginner-Friendly!)</title>
      <dc:creator>Charisse C. Lorejo</dc:creator>
      <pubDate>Thu, 24 Apr 2025 14:49:36 +0000</pubDate>
      <link>https://dev.to/up_min_sparcs/going-serverless-how-to-launch-a-website-in-less-than-15-minutes-with-aws-lambda-api-gateway-4543</link>
      <guid>https://dev.to/up_min_sparcs/going-serverless-how-to-launch-a-website-in-less-than-15-minutes-with-aws-lambda-api-gateway-4543</guid>
      <description>&lt;p&gt;This article is co-authored with &lt;a class="mentioned-user" href="https://dev.to/siosanac"&gt;@siosanac&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Introducing Amazon Web Services Lambda
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What is AWS Lambda? 🤔&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS Lambda is a serverless computing service made by Amazon Web Services (AWS). It lets you run code without managing the servers~! Lambda automatically scales depending on the number of incoming requests, and you pay only for the compute time used only.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;How does it work? 💡&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS Lambda is a serverless, event-driven compute service that lets you run code in response to events without managing servers. You write single-purpose functions, upload them, and configure triggers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Why use AWS Lambda?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Now by now you’re still probably not convinced about how lambda can help you 😔. Here are the reasons why many developers chose to use Lamda for building modern cloud-based apps.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;No Server Management!&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You don’t need to waste your time by maintaining, provisioning, or patching your servers. AWS handles all of the infrastructure’s scaling and availability.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Cost-Efficiency&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;With this service, you only pay for what you use. That means there will be no charge when you don’t use the utilities. You can be charged for every millisecond of runtime. Lastly, if you need even more resources, Lambda can scale automatically if you want to.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Pricing for Lambda
&lt;/h2&gt;

&lt;p&gt;Lambda has a &lt;em&gt;&lt;strong&gt;free tier&lt;/strong&gt;&lt;/em&gt; if you want to experiment with Lambda, it allows you to have 1 million requests per month and this will reset for the other month and then it gives you 400, 000 GB-seconds of computer time per month. &lt;/p&gt;

&lt;p&gt;Now if you’re done with experimenting, and you want to get serious the request charge is $0.20 per 1 million requests, Computing charge is $0.0000166667 per GB-second. There’s also an option where you can “rent” a fixed amount of resources it’s called the Ephemeral Storage. &lt;/p&gt;

&lt;h2&gt;
  
  
  Creating an AWS Account
&lt;/h2&gt;

&lt;p&gt;If you still do not have an Amazon Web Services account, go to this &lt;a href="https://dev.to/briansuarezsantiago/how-to-create-a-free-aws-account-and-understand-the-free-tier-a-beginners-guide-1dhl"&gt;article&lt;/a&gt; for a step-by-step guide to start. &lt;/p&gt;

&lt;h2&gt;
  
  
  Creating a Lambda Function
&lt;/h2&gt;

&lt;p&gt;Now let’s start on creating a Lambda Function! Navigate your AWS Console and search for Lambda in the search bar.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fkkp0uhlf3hs47pjd6zwc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fkkp0uhlf3hs47pjd6zwc.png" alt="Creating Lambda Function-1" width="800" height="357"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, click on the &lt;strong&gt;“Create Function”&lt;/strong&gt; button.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fcd87ju06zjgez97zhvjm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fcd87ju06zjgez97zhvjm.png" alt="Creating Lambda Function-2" width="800" height="349"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After that, you can name your function anything you want. You can pick any language you prefer in the Runtime and set the Architecture as is, which is &lt;strong&gt;x86_64&lt;/strong&gt;. Scroll down and let’s create our function.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fofansxhl8m6lah33pnqo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fofansxhl8m6lah33pnqo.png" alt="Creating Lambda Function-3" width="800" height="343"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fllgwckjpfxpboqyb6enr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fllgwckjpfxpboqyb6enr.png" alt="Creating Lambda Function-4" width="800" height="129"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you have created your function, this will look something like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fm06gu534opo5kyu3niyk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fm06gu534opo5kyu3niyk.png" alt="Creating Lambda Function-5" width="800" height="363"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Scroll down and you can see that there is a Code source. This is where you will put your code snippet and perform operations for your website. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Default Code:&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const handler = async (event) =&amp;gt; {
  // TODO implement
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.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%2Fu7j6o97b4z3p89482k5k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fu7j6o97b4z3p89482k5k.png" alt="Creating Lambda Function-6" width="800" height="337"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is still incomplete, for this lambda function to do anything, you must add a trigger first.&lt;/p&gt;

&lt;h2&gt;
  
  
  Adding a Trigger
&lt;/h2&gt;

&lt;p&gt;Scroll back up and press the add trigger button. For the trigger configuration, select the API Gateway and create a new API. Make sure that it is an HTTP API and configure the security to be open. For now, let the additional settings be on default and add your trigger.&lt;/p&gt;

&lt;p&gt;Once you have created your function, this will look something like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F4yojck1pp9wj7w8qq8vw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F4yojck1pp9wj7w8qq8vw.png" alt="Adding a Trigger-1" width="800" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F2mslu7e912tyn43emopl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F2mslu7e912tyn43emopl.png" alt="Adding a Trigger-2" width="800" height="114"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you have added your trigger, scroll down and on the left-hand side, click Trigger, and you should see that you have an API endpoint with a corresponding URL.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Ffjzb5omwtk93rjqq78xz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Ffjzb5omwtk93rjqq78xz.png" alt="Adding a Trigger-3" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you go to that URL, you might see something like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F0fkx5iox1lmkr7imf231.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F0fkx5iox1lmkr7imf231.png" alt="Adding a Trigger-4" width="800" height="356"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can see the “Hello from Lambda!” printed out on your page. This is essentially a static website at its simplest level. What is important here is that we have created a trigger for the API gateway so that our Lambda function is exposed to the Internet. Lambda functions can't be called directly via HTTP. API Gateway gives you a RESTful or HTTP endpoint to trigger your Lambda.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Remember:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;API Gateway acts like a "bridge"&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Static Website: Your frontend, hosted on S3 or other static hosting&lt;/li&gt;
&lt;li&gt;API Gateway: The public HTTP endpoint your website can call &lt;/li&gt;
&lt;li&gt;Lambda Function: The backend logic, triggered when API Gateway receives a request&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now let’s create our static website with HTML and CSS.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building the HTML and CSS of the Static Website
&lt;/h2&gt;

&lt;p&gt;Go back to your Lambda Function.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F91nvq3rrdz2xvkk0kilm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F91nvq3rrdz2xvkk0kilm.png" alt="Building Website-1" width="800" height="361"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On the bottom left of your browser, click on Code so that you can modify the default code given.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fc92jdwsxenklubnygzqq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fc92jdwsxenklubnygzqq.png" alt="Building Website-2" width="800" height="344"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Replace the default code with this code snippet:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const handler = async (event) =&amp;gt; {
  const html = `
    &amp;lt;!DOCTYPE html&amp;gt;
    &amp;lt;html lang="en"&amp;gt;
    &amp;lt;head&amp;gt;
      &amp;lt;meta charset="UTF-8" /&amp;gt;
      &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&amp;gt;
      &amp;lt;title&amp;gt;Writers of This Article&amp;lt;/title&amp;gt;
      &amp;lt;style&amp;gt;
        body {
          margin: 0;
          font-family: 'Courier New', Courier, monospace;
          background-color: #1e1e1e;
          color: #d4d4d4;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 2rem 1rem;
        }
        h1 {
          color: #0f0;
          font-size: 2rem;
          margin-bottom: 2rem;
          border-bottom: 2px solid #3c3c3c;
          padding-bottom: 0.5rem;
          text-align: center;
        }
        .cards-container {
          display: flex;
          flex-wrap: wrap;
          gap: 2rem;
          justify-content: center;
          width: 100%;
          max-width: 1200px;
        }
        .terminal-loader {
          border: 0.1em solid #333;
          background-color: #1a1a1a;
          color: #0f0;
          font-family: "Courier New", Courier, monospace;
          font-size: 1em;
          padding: 1.5em 1em;
          width: 100%;
          max-width: 30em;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          border-radius: 4px;
          position: relative;
          overflow: hidden;
          box-sizing: border-box;
        }
        .terminal-header {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1.5em;
          background-color: #333;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          padding: 0 0.4em;
          box-sizing: border-box;
        }
        .terminal-controls {
          float: right;
        }
        .control {
          display: inline-block;
          width: 0.6em;
          height: 0.6em;
          margin-left: 0.4em;
          border-radius: 50%;
          background-color: #777;
        }
        .control.close { background-color: #e33; }
        .control.minimize { background-color: #ee0; }
        .control.maximize { background-color: #0b0; }
        .terminal-title {
          float: left;
          line-height: 1.5em;
          color: #eee;
        }
        .text {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          border-right: 0.2em solid green;
          animation:
            typeAndDelete 4s steps(11) infinite,
            blinkCursor 0.5s step-end infinite alternate;
          margin-top: 1.5em;
        }
        .text-1 {
          display: block;
          white-space: normal;
          margin-top: 0.5em;
          color: #d4d4d4;
        }
        @keyframes blinkCursor {
          50% {
            border-right-color: transparent;
          }
        }
        @keyframes typeAndDelete {
          0%, 10% { width: 0; }
          45%, 55% { width: 10em; }
          90%, 100% { width: 0; }
        }
        @media (max-width: 768px) {
          .text {
            white-space: normal;
            animation: none;
            border-right: none;
          }
          .terminal-loader {
            width: 100%;
          }
        }
      &amp;lt;/style&amp;gt;
    &amp;lt;/head&amp;gt;
    &amp;lt;body&amp;gt;
      &amp;lt;h1&amp;gt;Writers of This Article&amp;lt;/h1&amp;gt;
      &amp;lt;div class="cards-container"&amp;gt;
        &amp;lt;div class="terminal-loader"&amp;gt;
          &amp;lt;div class="terminal-header"&amp;gt;
            &amp;lt;div class="terminal-title"&amp;gt;Writer 1:&amp;lt;/div&amp;gt;
            &amp;lt;div class="terminal-controls"&amp;gt;
              &amp;lt;div class="control close"&amp;gt;&amp;lt;/div&amp;gt;
              &amp;lt;div class="control minimize"&amp;gt;&amp;lt;/div&amp;gt;
              &amp;lt;div class="control maximize"&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
          &amp;lt;/div&amp;gt;
          &amp;lt;div class="text"&amp;gt;Cerdic Siosana...&amp;lt;/div&amp;gt;&amp;lt;br/&amp;gt;
          &amp;lt;div class="text-1"&amp;gt;Level: 2nd year BSCS&amp;lt;/div&amp;gt;&amp;lt;br/&amp;gt;
          &amp;lt;div class="text-1"&amp;gt;Hobbies: Writing, Coding, Gaming&amp;lt;/div&amp;gt;&amp;lt;br/&amp;gt;
          &amp;lt;div class="text-1"&amp;gt;Motto:&amp;lt;br&amp;gt;
            &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;You lost at the moment&amp;lt;br&amp;gt;
            &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;you decided to quit.&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class="terminal-loader"&amp;gt;
          &amp;lt;div class="terminal-header"&amp;gt;
            &amp;lt;div class="terminal-title"&amp;gt;Writer 2:&amp;lt;/div&amp;gt;
            &amp;lt;div class="terminal-controls"&amp;gt;
              &amp;lt;div class="control close"&amp;gt;&amp;lt;/div&amp;gt;
              &amp;lt;div class="control minimize"&amp;gt;&amp;lt;/div&amp;gt;
              &amp;lt;div class="control maximize"&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
          &amp;lt;/div&amp;gt;
          &amp;lt;div class="text"&amp;gt;Charisse Lorejo...&amp;lt;/div&amp;gt;&amp;lt;br/&amp;gt;
          &amp;lt;div class="text-1"&amp;gt;Level: 1st year BSCS&amp;lt;/div&amp;gt;&amp;lt;br/&amp;gt;
          &amp;lt;div class="text-1"&amp;gt;Hobbies: Drawing, Coding, Driving&amp;lt;/div&amp;gt;&amp;lt;br/&amp;gt;
          &amp;lt;div class="text-1"&amp;gt;Motto:&amp;lt;br&amp;gt;
            &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;Yesterday is history,&amp;lt;br&amp;gt;
            &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;tomorrow is a mystery,&amp;lt;br&amp;gt;
            &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;but today is a gift.&amp;lt;br&amp;gt;
            &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;That is why it is called the present.&amp;lt;br&amp;gt;
            &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;- Master Oogway&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/body&amp;gt;
    &amp;lt;/html&amp;gt;
  `;

  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'text/html',
    },
    body: html,
  };
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After that, deploy the changes. If you go back to the same URL and refresh the website. It should display our new and improved website.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fke793jvcd3wh4ttabh71.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fke793jvcd3wh4ttabh71.png" alt="Building Website-3" width="800" height="396"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There you go! A step-by-step guide to creating a static website using AWS Lambda!&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;AWS Lambda is a great beginner tool for you to explore Amazon Web Services. There are a lot more that you can use AWS Lambda aside from creating a static website. Moreover, you can also explore other tools that AWS has to offer, like functions for you to run when a trigger is activated by other AWS services–&lt;strong&gt;&lt;em&gt;NO SERVERS NEEDED&lt;/em&gt;&lt;/strong&gt; and also technologies like Elastic Cloud Compute(EC2) for servers, Amazon Simple Storage Service (S3) for storage, and many more waiting for you to be discovered!&lt;/p&gt;

&lt;h2&gt;
  
  
  Sources
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://aws.amazon.com/pm/lambda/?trk=cc9d3bb4-0a21-43d0-8236-0f2deaffe082&amp;amp;sc_channel=ps&amp;amp;ef_id=Cj0KCQjwtpLABhC7ARIsALBOCVomw4hHxtDsLhA-gC8VEHf8QrQMasBcqSJuST0DnVYKHLwgTofDEb0aAkzGEALw_wcB:G:s&amp;amp;s_kwcid=AL!4422!3!651510255294!e!!g!!aws%20lambda!19828212645!149982299751&amp;amp;gclid=Cj0KCQjwtpLABhC7ARIsALBOCVomw4hHxtDsLhA-gC8VEHf8QrQMasBcqSJuST0DnVYKHLwgTofDEb0aAkzGEALw_wcB" rel="noopener noreferrer"&gt;Serverless Computing - AWS Lambda&lt;/a&gt;&lt;br&gt;
&lt;a href="https://youtu.be/MoupNut6HMM?t=35" rel="noopener noreferrer"&gt;How to Make a Serverless Website with AWS Lambda (for free)&lt;/a&gt;&lt;br&gt;
&lt;a href="https://dev.to/arbythecoder/beginners-guide-to-building-a-serverless-website-with-aws-lambda-and-api-gateway-1o6n?fbclid=IwZXh0bgNhZW0CMTEAAR6ePe8XxLxjwVP8lzXwzDDkFPcs-h-YfHZGS1FoyRLcG61FuHih1hvTHS9cZg_aem_8g692H3oqmbmUGzhTJlmtA"&gt;Beginners Guide To Building a Serverless Website with AWS Lambda and API Gateway&lt;/a&gt;&lt;br&gt;
&lt;a href="https://dev.to/arbythecoder/beginners-guide-to-building-a-serverless-website-with-aws-lambda-and-api-gateway-1o6n?fbclid=IwZXh0bgNhZW0CMTEAAR6ePe8XxLxjwVP8lzXwzDDkFPcs-h-YfHZGS1FoyRLcG61FuHih1hvTHS9cZg_aem_8g692H3oqmbmUGzhTJlmtA"&gt;How to create a FREE AWS account and understand the Free Tier: A beginner's guide&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>lambda</category>
      <category>serverless</category>
      <category>website</category>
    </item>
  </channel>
</rss>
