DEV Community: Bachar Hakam

Kids-friendly project: Building your Chatbot Web Application using LLM

Bachar Hakam — Tue, 03 Sep 2024 13:53:57 +0000

Table of Content

Introduction
Stage 1: Prerequisite and Dependencies
- Create a Github Repository
- Set up your workspace on Gitpod
- OpenAI API Key
- Integrate with Aider Chat (Optional)
  - Install Aider Chat
Stage 2: Create the Chatbot Web Application
- Web Application Workflow
- Diagram
- 1. Setting Up the Environment
- 2. Understanding the Structure of a React App
- 3. Interact with aider-chat or LLM chatbot
- 4. Building the User Interface (UI)
- 5. Integrating a Basic Chatbot Logic
- 6. Connecting the Chatbot to OpenAI
- 7. Testing and Debugging
- 8. Enhancing the Chatbot
- 9. Final Touches

Introduction

Back to ToC

NOTE: You can follow the steps by yourself but will need your parents' help to set up the project.
NOTE: Here is a repository for your reference. Do not clone it as you have to build it from scratch!

This project will help you create a chatbot web application tailored to your needs with the help of ChatGPT or any other LLM chatbot.

My son used this project to build his own chatbot, so I thought this would be a fantastic opportunity for others to embark on the same journey of learning through hands-on experience. You may follow the steps exactly or make changes as needed. You do not need to clone any repository or code as you will have to create everything yourself by following the instructions and asking ChatGPT.

What is Coding? Think of coding like giving instructions to a computer so it can do cool things, like making a game or building a website!
What’s a Web App? A web app is something you use on the internet, like a website, but it can do more interactive things, like letting you chat with a bot.
Tools We’ll Use:
- Github repository: This is a code version control where you will save your code. It is like a folder of files
- VSCode: This is like a super cool notebook where you write your instructions (code).
- Linux: The computer system you’re using. It’s a bit different from Windows or Mac, but perfect for coding.
- Gitpod*: This has the Linux where you will run VScode. Cloud-based, instant access, and pre-configured workspace. It's like Minecraft world
- ChatGPT: Your coding buddy! If you get stuck, you can ask ChatGPT for help.

We will use VScode workspace running on Gitpod as an IDE, you can use VScode on your local machine but you need to skip steps or change some details related to Gitpod. We will begin by setting up the workspace, preparing the requirements, and installing the dependencies.

* You can run VScode on your machine/PC

Stage 1: Prerequisites and Dependencies

Back to ToC

We will begin by creating a Github repository to host the code. Then, we'll log in to Gitpod to set up the VSCode workspace and create the necessary requirements and dependencies. In this project, we will utilize Aider-chat as the terminal interface to the LLM to assist in building the application and for creating and updating the code directly. Alternatively, you can use the LLM chatbot at chatgpt.com to copy code back and forth.

Create a Github Repository

Back to ToC

Login to Github or create an account if you do not have one.
Create a new repository
Click on the repository then on the green "Code" button to copy the repository url
Copy the Https url which is similar to https://github.com/MyAccount/MyRepo.git

Set up your workspace on Gitpod

Back to ToC

Login to Gitpod or create an account using the Github account.
Open a new workspace using the Github repository url you have copied before.
Create .gitignore file in the navigation panel
Run the following command from the terminal

echo -e 'node_modules/ \n**/.env' > .gitignore

Create .gitpod.yml file then add the following

tasks:
  - name: init
    before: |
      cd my-chatbot-app 
      npm i
      cd ..
      ./envload
      python -m pip install aider-chat
ports: 
  - name: react 
    port: 3000
    onOpen: open-browser
    visibility: public

OpenAI API Key

Back to ToC

In this step, we will generate an API key from OpenAI. ( you can generate API key from any other LLM)

Create an OpenAI account if you do not have one.
login to OpenAI platform
Click on API keys on the left-side menu
Generate a new API key. save this key because you'll need it in the next steps. >> Note: Keep this API key secure and do not share it publicly.
Add OpenAI API Key to the workspace Environment Variables
- Go back to the Gitpod workspace
- Run the following commands in the terminal:

export OPENAI_API_KEY="your_api_key_here"
gp env OPENAI_API_KEY="your_api_key_here" # this will save the API key to Gitpod Environment Variables

Your workspace is ready, to activate these changes start a new workspace after completing step 2 in the next stage.

Integrate with Aider Chat (Optional)

Back to ToC

Aider is AI pair programming in your terminal. Aider lets you pair program with LLMs, to edit code in your local git repository. Start a new project or work with an existing git repo.

Aider works with most of the well-known LLM models.

Note: Google currently offers free API access to the Gemini 1.5 Pro model.

Install Aider Chat

Run the following command inside the root directory of the workspace python -m pip install aider-chat
Set the LLM API key if you have not set it in the previous steps eg: export OPENAI_API_KEY=<key>
Now you can run aider inside the terminal to star - Aider uses gpt-4o by default
You can use aider --model <model-name> to use any other model. For example, if you want to use a specific version of GPT-4 Turbo you could do aider --model gpt-4-0125-preview.
Example using Google Gemini:

export GEMINI_API_KEY=<key> # Mac/Linux

aider --model gemini/gemini-1.5-pro-latest

# List models available from Gemini
aider --models gemini/

Stage 2: Create the Chatbot Web Application

Back to ToC

Use the following steps as a guideline, you can work with ChatGPT to change any step, code or details.

Web Application Workflow

Diagram

1. Setting Up the Environment

Back to ToC

Install Node.js and npm: These are tools that help us build our app. Imagine Node.js as the engine that makes everything run, and npm is a big toolbox with lots of useful tools.
- Go to the terminal inside VScode (kind of like a text box where you type commands).
- Type: sudo apt install nodejs npm and press Enter. This will install Node.js and npm.
Install VSCode Extensions: Extensions are like superpowers for VSCode that help you write code more easily.
- Go to the Extensions tab (it looks like four squares).
- Search for “JavaScript” and “React” and click “Install” on the ones you find.

2. Understanding the Structure of a React App

Back to ToC

Create a New React App:
- In the terminal, type: npx create-react-app my-chatbot-app and press Enter. This will create a new project folder with all the files you need.
- Create envload script at the root directory which will generate .env file inside your working directory "my-chatbot-app"
```
  #! /bin/bash

  # Create the environment variable file using the local variable
  echo -e "REACT_APP_OPENAI_API_KEY=$OPENAI_API_KEY" > my-chatbot-app/.env
```
- change the mode of envload by running this command: chmod +x envload
- run envload: ./envload
Key Files in Your Project:
- index.js: This is like the main door to your app. It’s where everything starts.
- App.js: Think of this as the brain of your app. It decides what’s shown on the screen.
- public/index.html: This is the basic page where your app will appear.

3. Interact with aider-chat or LLM chatbot

Back to ToC

As mentioned earlier, Aider-Chat will assist you in interacting with the LLM. This will enable you to create and update the code directly within the workspace without having to copy the code from ChatGP or any other LLM chatbot. You also have the option to use the LLM chatbot website to interact with the LLM.

Start by asking the LLM the questions in the following steps to help you create the code.

4. Building the User Interface (UI)

Back to ToC

Run the App
- Let's run the application, type this in the terminal: npm start
- Gitpod will open a link to the app in another window (make sure popup-window is allowed)
- You will not see much, but you can refresh the page as you do changes in the code.
Let's start, make the App Look Cool:
- Open App.js in VSCode.
- Create a simple box where people can type something (this is called an “input”) and a button they can press.
- Add some color and style using CSS. Imagine you’re decorating a cake – CSS makes your app look yummy!
Clear Out Unnecessary Code: If there’s any default code in App.js, you can remove it to start with a blank slate. Your App.js file should look something like this to start:

import React, { useState } from 'react';

function App() {
  return (
    <div className="App">
      {/* Your code will go here */}
    </div>
  );
}

export default App;

Create an Input box - Add an Input Element: This is where users will type their messages.

function App() {
  const [input, setInput] = useState(""); // This is where we store what the user types

  return (
    <div className="App">
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="Type your message here..."
      />
      <button>Send</button>
    </div>
  );
}

Explanation:
- input is a state variable that holds the current text in the input box.
- setInput is a function that updates the input value whenever the user types something.
- The onChange event handler listens for changes in the input box and updates the input state.

Add a Button to Send the Message
- Modify the Button: Add a click event to the button that will handle sending the message.

function App() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]); // This is where we store all messages

  const handleSend = () => {
    if (input.trim() !== "") {
      setMessages([...messages, { text: input, sender: 'User' }]);
      setInput(""); // Clear the input box after sending the message
    }
  };

  return (
    <div className="App">
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="Type your message here..."
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

Explanation:
- messages is a state variable that holds an array of all the messages in the conversation.
- handleSend is a function that adds the current message to the messages array and clears the input box.

Display the Conversation History
- Add a Display Area: We’ll add a section to show the messages that have been sent.

function App() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);

  const handleSend = () => {
    if (input.trim() !== "") {
      setMessages([...messages, { text: input, sender: 'User' }]);
      setInput("");
    }
  };

  return (
    <div className="App">
      <div className="chat-box">
        {messages.map((message, index) => (
          <div key={index} className={`message ${message.sender}`}>
            {message.text}
          </div>
        ))}
      </div>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="Type your message here..."
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

Explanation:
- The chat-box div will display each message in the messages array.
- We use map to loop over each message and display it in a div.
- The className allows us to style messages differently based on whether they were sent by the user or the chatbot.

Add Some Basic CSS for Styling
- Style the App: You can add CSS in a file like App.css to make the chat box look nice.

.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: 600px;
  margin: auto;
}

.chat-box {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.message {
  padding: 5px;
  margin: 5px 0;
  border-radius: 5px;
}

.User {
  text-align: right;
  background-color: #d1e7dd;
}

.Bot {
  text-align: left;
  background-color: #f8d7da;
}

input[type="text"] {
  width: 80%;
  padding: 10px;
  margin-right: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Explanation:
- .App centers the app and gives it some padding.
- .chat-box styles the area where the conversation is displayed, with a scroll bar for long conversations.
- .message styles each message bubble, and .User and .Bot give different colors to user and bot messages.
- input[type="text"] and button style the input box and send button to make them look nice and clickable.

5. Integrating a Basic Chatbot Logic

Back to ToC

Making the Chatbot Talk:
- We’ll teach the chatbot to respond to what people type.
- Use something called “state” in React. State is like a memory for your app, where it can remember what the user typed.
- ChatGPT can help you write a simple script where the chatbot says something back when you type a message.

Understanding State in React

In React, "state" is a way to keep track of information in your app that can change over time. For a chatbot, we'll use state to store the conversation history (messages) and the user's input.
Setting Up State Variables

We already have two state variables in place: input for the user's current input and messages for the conversation history. Let's review these:

const [input, setInput] = useState(""); // Stores the current input from the user
const [messages, setMessages] = useState([]); // Stores all the messages in the conversation

Creating a Function to Handle User Input >> Ask ChatGPT to help you with this step!

When the user types a message and hits the "Send" button (or presses Enter), we need to:

Add the User's Message to the Conversation: We'll add the user's message to the messages array.
Generate a Chatbot Response: We'll simulate a chatbot response by adding another message to the messages array.

Creating a Simple Chatbot Response Function Now, let’s create a basic function that simulates a chatbot response. This function can be as simple or complex as you like. For now, we'll keep it simple by making the bot respond with a predefined set of responses based on certain keywords.

const generateBotResponse = (userInput) => {
  const lowercasedInput = userInput.toLowerCase();

  if (lowercasedInput.includes("hello")) {
    return "Hi there! How can I help you today?";
  } else if (lowercasedInput.includes("how are you")) {
    return "I'm just a bot, but I'm doing great! Thanks for asking.";
  } else if (lowercasedInput.includes("bye")) {
    return "Goodbye! Have a great day!";
  } else {
    return "I'm not sure how to respond to that. Can you ask me something else?";
  }
};

Explanation of the Chatbot Logic:
- handleSend Function:
- Checks if the input is not empty.
- Adds the user's message to the messages array.
- Generates a response from the bot using generateBotResponse.
- Updates the messages array to include the bot's response.
- Clears the input field.
- generateBotResponse Function:
- Takes the user's input and checks for specific keywords.
- Returns a response based on the keyword found (e.g., "hello", "how are you", "bye").
- If no keyword is matched, it returns a default response.

6. Connecting the Chatbot to OpenAI

Back to ToC

Chatting with ChatGPT:
- You’ll learn how to send what you type to OpenAI and get a response back. This is called calling an API (which is just a way to talk to other computers).
- ChatGPT will help you write this part. You’ll type something in the chatbox, and OpenAI will answer, just like ChatGPT!

Set Up an API Key

React should be able to load the API key saved as REACT_APP_OPENAI_API_KEY in the .env file
Install Axios for API Requests

We'll use Axios, a popular JavaScript library, to make HTTP requests to the ChatGPT API. You can install it using npm:
npm install axios
Set Up the API Call in Your React App

Now, let's modify the handleSend function to send the user's input to OpenAI and receive a response.

Here’s how to do it:

- Import Axios at the top of your App.js:

 import axios from 'axios';

- Modify the handleSend Function to include the API call, update the code as required:

   // Call the ChatGPT API
    try {
      const response = await axios.post('https://api.openai.com/v1/chat/completions', 
      {
        model: "gpt-4o-mini", // Use "gpt-3.5-turbo" if you have access to GPT-4
        messages: [{ role: "user", content: input }],
      }, 
      {
        headers: {
          'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`, // OpenAI API key
          'Content-Type': 'application/json'
        }
      });

Explanation of the API Call
- API Endpoint: We are sending a POST request to https://api.openai.com/v1/chat/completions.
- Model: The model parameter specifies which version of GPT you are using. You can use "gpt-3.5-turbo" or "gpt-4o-mini" depending on your access.
- Messages: This contains the conversation history, with the user’s latest input being sent to the API.
- Headers: The request headers include the - Authorization header with your API key and specify that the content is JSON.
- Bot Response: Once the API responds, we extract the content of the bot’s response and add it to the messages array.

7. Testing and Debugging

Back to ToC

Test Your Chatbot:
- Run your app by typing npm start in the terminal.
- Try typing different things in the chatbox to see how it works.
- If something doesn’t work, don’t worry! Debugging is like solving a mystery. You’ll look for clues (called “errors”) in the console and figure out how to fix them.

8. Enhancing the Chatbot

Back to ToC

Add More Fun Features:
- Want your chatbot to do more? Maybe show a spinning wheel while it’s thinking or keep a history of the conversation.
- Ask ChatGPT for help with these ideas. You can keep adding new things to make your chatbot cooler!

9. Final Touches

Back to ToC

Polish Your App:
- Clean up any messy code, and make sure everything looks just right.

In the next blog post, we will guide you through the steps to deploy the web application on the cloud so you can access it from anywhere.

Deploying Your App with AWS CloudFormation and CodePipeline - A Comprehensive Guide

Bachar Hakam — Wed, 03 Jan 2024 15:59:31 +0000

I wrote a blog post earlier on how to create and deploy a containerized API-driven Python Streamlit web app using CICD on AWS. Although the steps I explained using ClickOps "AWS Console" were beginner-friendly, it's best to use a more automated method that's less prone to errors during production or big-scale development stages. That's where Infrastructure as a Code (IaC) comes in.

What is Infrastructure as Code (IaC)?

IaC refers to the process of managing and provisioning infrastructure through code instead of manual processes. The main benefit of IaC is that it automates the creation and management of infrastructure environments, so developers can focus on building and enhancing applications. This approach helps to control costs, reduce risks, and accelerate the process.

Another advantage of IaC is that it allows you to replicate the same environment and deploy it in another location using the same code. By designing the IaC in a modular way, it can be used anywhere with fewer restrictions, making deployment more agile. The more you design the IaC to be modular, the more agile the deployment will be.

IaC is commonly used in software development to build, test, and deploy applications.

In this article, we will explore a similar concept. I will explain the steps required to build and deploy the same environment and Web App "Streamlit Web App" used in the previous article, using AWS CloudFormation stacks and CodePipeline while increasing the Web App's scalability.

In my next blog post, I will demonstrate how to utilize this setup to integrate your web app with a GenAI model deployed using Amazon SageMaker JumpStart.

Getting Started

To begin with, we will create two ECR repositories. The first one will store the base image, while the second will store the web app image. We will then pull the base-image from Docker Hub and push it to the appropriate ECR repository. In this demo, we used the python:3.10-slim-buster as the base-image. You may follow the steps here.

Next, we need to prepare the content of the GitHub repository. This involves adding the source code, deployment scripts, definition files (such as Dockerfile, buildspec.yml, and appspec.yml), the "cfn" directory that contains all Cloudformation stacks, and the bin directory that contains all bash scripts to deploy the stacks. You can take a look at this repository sample to get an idea of how it should be structured. Each stack will have AWS resources with similar lifecycles and ownership.

After creating the repository, create a folder for each stack that contains a template.yaml file and parameters.json to define parameter values. Here's an example:

├── cfn
│   ├── compute
│   │   ├── parameters.json
│   │   └── template.yaml
│   ├── cdn
│   │   ├── parameters.json
│   │   └── template.yaml

Lastly, we will create a deployment script for each stack inside the bin directory and then deploy them in a specific order.

Note: While deploying directly to EC2 instances can be suitable for development, testing, or small-scale applications, for production environments, it's generally best to use container orchestration services like ECS or EKS for improved scalability, reliability, and maintainability.

We can discuss how to create a similar environment using either ECS or EKS, but we'll save that for another blog post. The benefit of this setup is that during the development or testing phases, you can deploy a different container using the same resources created by the stacks. You can use the same repository or another one, and you would only need to make a few changes such as updating the allowed ports by the Security Groups, Dockerfile, and the base image.

Now that the structure of the environment is in place, we can proceed to building the stacks.

Building The Stacks

We will create the necessary files for each stack, go through the configuration of the resources in each stack then develop the deployment scripts. You can clone the repository sample and update the files to suit your setup. In general, we will start the template by defining the parameters for each resource and use an external parameter file named parameters.json. Next, is the resource section, which will contain the configuration details of each resource. Finally, we will use the output sections to export the resource values that will be used in other stacks.

Before we proceed to the next steps, take a look at the solution diagram

First, we will start with the Networking stack to lay down the necessary network resources, next is the ALB stack to distribute the traffic to the Web App instances, then the Compute stack and the CDN stack.
Here is a high-level diagram of each stack and the cross-stack references.

1. Networking Stack

The Networking stack will create the base networking resources necessary for this environment. This will include the VPC that has an Internet Gateway, Route Table, two Availability Zones for redundancy, and one public subnet per Availability Zone.
To build the stack, create a Cloudformation template file inside the cfn/networking directory similar to this (template.yaml) file.

The template description includes a list of the resources that will be generated by it.

Description: |
  Networking stack Resources:
  - VPC
  - IGW
  - Availability Zone
  - Public Route Table
    - route to the IGW
    - route to Local
  - 2 Public Subnets

Here are the resources:

2. ALB Stack

The ALB stack will create an Application Load Balancer to decouple the traffic from the Web App and distribute the traffic load across the Web App instances. Additionally, it includes a Target Group that specifies the target instances, and the ALB Security Group manages the traffic security. Create a CloudFormation template file inside the cfn/alb directory similar to this (template.yaml).

The template description includes a list of the resources that will be generated by it.

Description: |
  WebApp ALB Stack:
  - ALB
    - ipv4
    - Internet facing
    - certificate attached from Amazon Certification Manager (ACM)
  - HTTPSListener
    - HTTPS to WebApp Target Group
  - Target Group
  - ALB Security Groups

Going forward we will use an external parameters file (parameters.json) to define some parameters, so you will have to create it in the same directory similar to this ALB stack parameter file(parameters.json) file.

Update the values for each of the following ParameterKey:

WebAppPort "The port your Web App will use"
CertificateArn "ACM certificate Arn"

Here are the resources:

3. Compute Stack

In the Compute stack, we will create an IAM Role, Launch Template, and an Auto Scaling Group. These will define the EC2 instance configurations and types, as well as the scalability capacity required for the Web App. Additionally, we will create a Security Group that will allow the required traffic.

Create a template file inside the cfn/compute directory similar to this (template.yaml) file.

The template description includes a list of the resources that will be generated by it.

Description: |
  WebApp Compute Stack:
  - Launch Template
  - LT Security Group
  - ASG
  - IAM Role and Policies

Create the Compute stack parameters file inside the same directory, similar to this (parameters.json)file

The content of the user-data can be changed by encoding the new file using base64 base64 user-data and updating the parameters.json file with the new value.

Here are the resources:

4. CDN Stack

In this stack, we will create a CloudFront Distribution with an ALB origin. Assuming that you have already a Domain Name registered in the Route 53 hosted zone, we will create a record to publish the distribution URL for the Web App.

Create a template file inside the cfn/cdn directory similar to this (template.yaml) file.

The template description includes a list of the resources that will be generated by it.

Description: |
  CDN Stack:
  - CloudFront Distribution
  - Route 53 Hosted Zone Record

Next, we will create the parameters file inside the same directory, similar to this parameters.json file.

Update the values for each of the following ParameterKey:

DomainName
HostedZoneRecord
DomainHostedZoneId
CustomDomainName
CertificateArn

5. CICD Stack

Lastly, we will create a CodePipeline Stack and two nested stacks to create and set up CodeBuild and CodeDeploy. The pipeline will build and then deploy the container image as you update the Web app code inside the GitHub repository.

First, we need to create a pipeline artifact bucket that will be defined as a parameter. Run the following aws cli to create the bucket:

aws s3api create-bucket --bucket codepipeline-webapp-$(date +%Y%m%d%H%M%S) --region us-east-1

Second, create the main pipeline template file inside the cfn/cicd directory. The file should be similar to this (template.yaml) file.

The template description includes a list of the resources that will be generated by it.

Description: |
  WebApp CICD Stack:
  - CodePipeline IAM Role
  - CodeDeploy IAM Role
  - Web App Pipeline

To be able to connect to the GitHub repository, we need first to create a CodeStar connection with the GitHub account.

Run the following command to create a new CodeStar connection:

aws codestar-connections create-connection --provider-type GitHub --connection-name MyGitHubConnection

make sure the repo is public otherwise you need to allow access to the private repo on GitHub
Go to the AWS CodePipeline console
Select Settings on from the left-side panel then click on Connections
Select the connection name "MyGitHubConnection"
Then click on "Update pending connection"

Next, we will create the parameters file inside the same directory, similar to this parameters.json file.

Update the values for each of the following ParameterKey:

GitHubConnectionArn
GitHubRepo
GitHubBranch
GitHubSourceRepo
ArtifactBucketName

Here are the resources:

5.1 CodeBuild Stack

The CodeBuild stack will create a CodeBuild project and the necessary IAM Role to build the container image and then push it to the ECR repository

Create a template file inside the cfn/cicd/nested directory similar to this (codebuild.yaml) file.

The template description includes a list of the resources that will be generated by it.

Description: |
  AWS CodeBuild Project as part of the CICDStack:
  - CodeBuild Service Role
  - CodeBuild Project

5.2 CodeDeploy Stack

This Stack will create CodeDeploy Application and Deployment Group to deploy the Web app Container. For this demo purposes, we will use (in-place deployment), but it is recommended to create a Blue/Green deployment with multiple compute resources to ensure the availability of the Web App.

Create a template file inside the cfn/cicd/nested directory similar to this (codedeploy.yaml) file.

The template description includes a list of the resources that will be generated by it.

Description: |
  - AWS CodeDeploy Application
  - Deployment Group

Deployment Scripts

At this stage we will create the bash deployment script for each stack, we will follow the same order we used to create the stacks by starting with the networking deployment script and so on.

You will have to define the following variables inside each script:

BUCKET="" # Cloudformation bucket
REGION="us-east-1" # replace with the relevant region
STACK_NAME=""

NOTE: if you change the STACK_NAME then you have to change the relevant stack name example: "NetworkingStack" value, in parameters.json of the other stacks.

If you do not have an existing Cloudformation artifact bucket, create a new one using the following aws cli:

aws s3api create-bucket --bucket cfn-artifact-$(date +%Y%m%d%H%M%S) --region us-east-1

Before we start, we need to install the following packages:

AWS CloudFormation Linter Validate the syntax and properties of resources by running cfn-lint with each template.yaml file.
Install JQ (JSON Processor) to transform the structure of the parameters.json into key=value structure. We will use jq tool inside the deployment scripts

Networking Stack Deployment Script

Create a bash file inside the bin directory similar to (networking-deploy).
The script will deploy the Networking Stack.

ALB Stack Deployment Script

Create a bash file inside the bin directory similar to (alb-deploy). This script will deploy the ALB Stack.

Compute Stack Deployment Script

Create a bash file inside the bin directory similar to (compute-deploy). This script will deploy the Compute Stack

CDN Stack Deployment Script

Create a bash file inside the bin directory similar to (cdn-deploy). This script will deploy the CDN Stack

CICD Stack Deployment Script

Create a bash file inside the bin directory similar to (cicd-deploy). This script will deploy the CICD Stack

Implementation

Build The Container Image

Although CodeBuild can be used to build the first version of the Web App image, the build project stack needs to be created outside the pipeline.
For now, we will just build the image using docker locally and then push it to the ECR repository. Here is an example

Let's Recap

We have stored the base-image and Web App image in the appropriate ECR repository. The definition files are ready and located in the root directory. The stack's templates and parameters files are in their corresponding stack folder, and all deployment scripts are available in the bin directory.

Stacks Deployment

We will walk through the steps required to deploy each stack in the right order. Starting with the Networking stack, that will create the necessary networking resources. Next, is the ALB stack which will create the ALB for the EC2 instances. After that, we will deploy the Compute stack to create the EC2 instances. Then, we will deploy the CDN stack which will create a CloudFront distribution and add it to the Route 53 host zone record. Finally, we will deploy the CICD stack which will create the pipeline to build and deploy future changes in the code.

Stacks Deployment Order

Networking Stack: networking-deploy
ALB Stack: alb-deploy
Compute Stack: compute-deploy
CDN Stack: cdn-deploy
CICD Stack: cicd-deploy >> Note: Make sure all scripts inside the bin directory are executable

Go to bin directory then run the first script ./networking-deploy
Copy the ARN from the output, similar to this

Waiting for changeset to be created..
Changeset created successfully. Run the following command to review changes:
aws cloudformation describe-change-set --change-set-name arn:aws:cloudformation:us-east-1:XXXXXXXXXXXX:changeSet/awscli-cloudformation-package-deploy-XXXXXXXXXX/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX

To execute the change set, run the command below with the ARN you copied.

aws cloudformation execute-change-set --change-set-name arn:aws:cloudformation:us-east-1:XXXXXXXXXXXX:changeSet/awscli-cloudformation-package-deploy-XXXXXXXXXX/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX

Go to the AWS Cloudformation console
Select the stack name and then Event tab to check the status of the stack
Once the status changes to "CREATE_COMPLETE", go to the next step

Repeat the above steps for the rest of the stack in the right order using the relevant script. Once all stacks are deployed successfully, try to access the Web App using the domain name you used in the CDN stack.

How to Build and Deploy an API-Driven Streamlit Python Microservice on AWS

Bachar Hakam — Wed, 25 Oct 2023 05:29:02 +0000

I wanted a feature that did not exist in the trading platform I'm using, so I built it as a Web App API-based microservice. To achieve this, I first read through the platform API documentation to gather the necessary parameters.

I then started building the application by creating a CLI version using Python. To ensure that each API parameter was functional, I tested them separately in a demo environment, followed by testing the entire application in a pre-production environment.

Recently, I came across several AI workshops that utilized the Streamlit framework for building plotting applications in a simple manner. Given the ease of use of Streamlit, I decided to build the trading web app version using Sreamlit as a microservice.

In this scenario, the communication between the frontend and the backend is through the API, the frontend is the Web App and the backend is the trading platform.

Streamlit App

Streamlit is an open-source app framework written in Python. It is similar to Flask and is used for creating simple web applications quickly and easily. While it is commonly used for projects related to Machine Learning and Data Science, it works perfectly with major Python libraries and can include HTML code or markdown, making it an excellent choice for building simple applications.
As a beginner to Streamlit, I used GenAI to convert my Python code to Streamlit code. It didn't take long for me to create a functional web app. I then tested and refactored the app until I reached the final version.

Building the Microservice

During the preparation phase of building the web app microservice, I first created an ECR repository named 'webapp-base-image' to store the container base-image. Then, I pushed the Docker base-image (python:3.10-slim-buster) to it. Next, I created another ECR repository to store the Web App container image.

After that, I created a GitHub repository and pushed the source code and artifacts to the repository directory. Then, I created the Dockerfile required to build the Web App container. Finally, to build the CICD pipeline using CodePipeline, I created 'buildspec.yml' for CodeBuild and 'appspec.yml' for CodeDeploy.

It's important to note that the usage and content of these files would vary depending on the chosen computing service.

The following are the available compute options on AWS to deploy the container, each would require a different procedure and minor configuration changes.

AWS App Runner (the fastest option, but limits infrastructure control)
Fargate (Serverless container service)
EC2 instance (Compute service with more control, but requires OS/Apps maintenance)

After the source code, artifacts, and configuration files were added to the web app repo, the container image was ready for deployment. I deployed the container on a free-tier EC2 instance as explained in the next phase.

Resources Creation

To build and deploy the Web App, I first created the necessary resources using an EC2 instance as the host, an Application Load Balancer to decouple the TLS connection from the EC2 instance and provide load balancing for future scaling, a Build project to package and build the container using CodeBuild, CodeDeploy application to deploy the container on the EC2 instance, and finally CodePipeline to run the CICD pipeline.

Afterward, I created the remaining resources that are needed to access the Web App via the Internet, including the CloudFront distribution and a Route 53 hosted zone record.

In an upcoming blog post, I will explain how to optimize this solution to improve scalability and make it more cost-effective using IaC.

Next, are the steps required to implement this solution.

Implementation

We will go through the steps required to build and deploy the Web App container.

Step 1: Create an Amazon Elastic Container Registry and Base-Image.

First, we will create an ECR repository to store the base-image, pull the image from Docker Hub, then push it to the ECR repository.
After that, we will create another ECR repository to store the Web App container image.

Step 1a: Create an ECR repository for the Base-image

Run the following aws command to create the ECR repository:



aws ecr create-repository --repository-name webapp-base-image --image-tag-mutability MUTABLE

Step 1b: Create the Base-Image

Set the Env variable on your machine ```bash

export AWS_ACCOUNT_ID=YourAWS-ID
export AWS_DEFAULT_REGION=AWS-Region
export ECR_PYTHON_URL="$AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/webapp-base-image"

- Login to ECR

  ```bash


  aws ecr get-login-password --region $AWS_DEFAULT_REGION | docker login --username AWS --password-stdin "$AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com"

Pull the image from Docker Hub



  docker pull python:3.10-slim-buster

Tag the image



  docker tag python:3.10-slim-buster $ECR_PYTHON_URL:3.10-slim-buster

Push the image to ECR repository



  docker push $ECR_PYTHON_URL:3.10-slim-buster

Step 1c: Create ECR repository for the Web App Container Image

Run the following aws command to create the ECR repository:



aws ecr create-repository --repository-name webapp --image-tag-mutability MUTABLE

Step 2: Create a GitHub repository.

We will need to create a new GitHub repository for the Web App. Once done, you can clone the repository on the local machine and move the source code and artifacts to the root directory of the repository.

Step 2a: Create Python requirements.txt

Next, you need to create the Python requirements.txt file which will include streamlit and other required packages and libraries for your Web App.



$ touch requirements.txt

$ echo 'streamlit' > requirements.txt

Step 2b: Create Dockerfile

Then create a Dockerfile similar to the following



# app/Dockerfile

# use the ECR repo base-image link

FROM [YourAccountID].dkr.ecr.[YourRegion].amazonaws.com/[ECR-repo-base-image]:3.10-slim-buster

WORKDIR /app

COPY requirements.txt requirements.txt

RUN pip install -r requirements.txt &&\

    apt-get update -y &&\

    apt-get install curl -y 

COPY . .

EXPOSE 8501

HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health

# replace YourWebApp.py with the relevant file name

ENTRYPOINT ["streamlit", "run", "YourWebApp.py", "--server.port=8501", "--server.address=0.0.0.0"]

Step 2c: Create the Deployment Scripts

Then create a 'scripts' directory within the repository's root directory that will contain the deployment scripts, similar to 'start_app.sh' and 'stop_app.sh'.

Step 2d: Create the buildspec.yml

Create the buildspec.yml at the GitHub repository's root directory.
CodeBuild will use the buidlspec.yml configuration file to build the container image and then store it in the ECR repository.

Step 2e: Create the appspec.yml

Create the appspec.yml at the GitHub repository's root directory. CodeDeploy will use the appspec.yml configuration file to deploy the container on the EC2 instance.

Step 3: Create the IAM Roles

Before creating the required resources, you will have to create IAM Roles for the EC2 instance and CodeDeploy.
It is recommended to customize each policy and create an inline policy to restrict access to the required resources, but for simplicity, we will use the policies managed by AWS

Step 3a: IAM Role for EC2 instance

This role has 2 policies to allow EC2 instance access to S3 and ECR ("AmazonEC2ContainerRegistryPowerUser", "AmazonS3ReadOnlyAccess")

Step 3b: IAM Role for CodeDeploy

This role has 2 policies to allow CodeDeploy access to EC2, ELB, Autoscaling and ECR ("AmazonEC2ContainerRegistryPowerUser", "AWSCodeDeployRole")

Step 4: Create an AWS EC2 instance

You will create an instance and attach this user-data file which will install the codedeploy-agent, and docker.

Go To AWS EC2 console
Choose Launch Instance.
Enter the instance Name
Application and OS Images: Choose AMI "eg: Amazon Linux 2023 AMI"
Choose Instance type "eg: t2.micro"
Choose Key pair (login)
Network settings: Enter the following details
- VPC: "eg: default VPC"
- Subnet: "eg: SubnetPub1"
- Auto-assign public IP: Enable
- Security Group: Select Create security group
  - Security group name: "eg: WebApp-SG"
  - Skip Inbound rules for now
Configure storage: add storage volume
Advanced details:
- IAM instance profile: Choose the IAM role created in the previous step
- User data: upload the user-data file
Choose Launch instance.

Step 5: Create an Application Load Balancer

Before creating the Load Balancer, create a Security Group with an Inbound Rule (Type: HTTPS; Source: Custom 0.0.0.0/0) and note the security group ID.

Step 5a: Configure a target group

Configure a target group then register the EC2 instance as a target

Go to the AWS EC2 console
Choose Target Groups from the navigation pane
Choose Create target group
Basic configuration:
- Target type: Select Instance
- Target group name: Enter a name "WebApp-TG"
- Select Protocol & Port
- Select IP address type: IPv4
- Select VPC: "eg: Default VPC"
Health checks:
- Select Health check protocol: HTTP
- Select Health check path: enter the health check route or keep the default / "eg: /HeathCheck"
Choose Next to register a target
Register targets:
- Select the instance created before, and the port, and then choose Include as pending below
- Choose Create target group.

Step 5b: Create a load balancer

Once the target group is ready, set up an application load balancer.

Go to the AWS EC2 console
Choose Load Balancers from the navigation pane
Choose Create Load Balancer.
Under Application Load Balancer, choose Create
Basic configuration:
- Load balancer name: Enter a name for your load balancer "eg: WebApp-ALB**
- Scheme: choose Internet-facing
- IP address type: IPv4
Network mapping
- VPC: select the VPC "eg: Default VPC"
- Mappings: Choose the subnets
Security groups: Select the security group created earlier
Listeners and routing:
- Protocol: HTTPS
- Port: 443
- Default action: Select the target group created above
Secure listener settings:
- Default SSL/TLS server certificate: Select Certificate source
Choose Create Load Balancer

Step 5c: Update EC2 instance security group

Now that ALB is ready, update the EC2 instance security group to allow ingress connection from ALB using a specific port

Go to the AWS EC2 console
Choose Security Groups from the navigation pane
Choose the security group created for the EC2 instance
Under Inbound rules Choose Edit inbound rules
Choose Add rule 1
- Type: Custom TCP
- Port: Enter the web app port
- Source: Custom - select the ALB security group
Choose Add rule 2
- Type: ssh
- Source: select My IP
Choose Save rules

Step 6: Create a CodeBuild project

The build project will build the container image and then push it to the ECR repository. You will need to follow the steps below to create the build project.

Go to the AWS CodeBuild console
Choose Create build project
Project configuration:
- Project name: Enter the project name
Source:
- Source provider: Select Github
- follow the instructions to connect (or reconnect) to GitHub and authorize access to AWS CodeBuild
- Repository: Select Public repo, or repo in your GitHub account
- GitHub repository: Enter the repo link "eg: https://github.com/YourGitHubUser/RepoName.git"
- Source version: Enter the branch name
- Webhook optional: Rebuild every time a code change is pushed to this repository
Environment:
- Environment image: Managed image
- Operating system: Amazon Linux
- Runtime(s): Standard
- Image: 5.0 or latest
- Select Privileged
- Service role: select New service role
- Role name: Enter a service role name
Buildspec:
- Build specifications: select Use a buildspec file
- By default, CodeBuild looks for a file named buildspec.yml in the source code root directory
Artifacts: select No artifacts for now, it will be updated during the setup of CodePipeline
Choose Create build project
Go to AWS IAM console
Choose Roles from the navigation pane
- Search & select the service role name you entered while setting up the build project
- Choose Add permissions: select attach policy
- Search & select policy: AmazonEC2ContainerRegistryPowerUser
- Choose Add permission

Step 7: Create an AWS CodeDeploy Application

In this demo, you will create a CodeDeploy application for an in-place deployment using the CodeDeploy console. Otherwise, it is recommended to create a Blue/Green deployment with multiple compute resources to ensure the availability of the Web App.

Create the Application

Go to the AWS CodeDeploy console.
expand Deploy, and then choose Getting started.
Choose Create application.
Application configuration:
- Application name: Enter an application name.
- Compute platform: EC2/On-premises.
- Choose Create application.
Choose the application name.
Choose Create deployment group under Deployment groups tab.
Deployment group name: Enter a deployment group name.
Service role: Select the service role created previously for CodeDeploy.
Deployment type: In-place.
Environment configuration:
- Select Amazon EC2 instances
- Enter the tag key used while creating the EC2 instance.
- Enter the tag value.
Install AWS CodeDeploy Agent: Never
Deployment configuration: CodeDeployDefault.AllAtOnce
Choose Create deployment group.

Step 8: Create an AWS CodePipeline

Now that build GitHub repository, build project, and CodeDeploy application are ready for the pipeline, you will follow the steps below to configure it.

Step 8a: Setup the Pipeline

Go to the AWS CodePipeline console.
Choose Create pipeline.
Pipeline settings:
- Pipeline name: Enter the pipeline name.
- Service role: Choose New service role or Existing service role if you have an existing role.
Source:
- Source provider: GitHub (version 2)
- Connection: Choose exiting Github connection or choose Connect to Github to create a new connection.
- Repository name: Enter the repository name "eg: YourGitHubUser/WebAppRepo"
- Branch name: Enter the branch name.
- Output artifact format: CodePipeline default.
Build:
- Build provider: AWS CodeBuild.
- Region: Select your region.
- Project name Choose the project name created earlier.
- Build type: Single build.
Deploy:
- Deploy provider: AWS CodeDeploy
- Region: Enter your region.
- Application name: Choose the application you created earlier.
- Deployment group: Choose the deployment group you created earlier.
Review the configuration then choose Create pipeline

Step 8b: Run the Pipeline

The pipeline will run once it is created. starting by running the Source stage to get the files from the GitHub repository, then running the Build stage to build the container image then push it to the ECR repository. Finally, run the Deploy stage which will deploy the container on the EC2 instance.

Step 9: CloudFront Distribution

You may choose to use CloudFront to cache your web app content and bring it closer to your users. This can help reduce the load on the ALB, resulting in lower costs. Additionally, you can add another layer of security by configuring WAF/Shield. However, it's important to note that using CloudFront is an optional step.

Step 9a: Create a CloudFront Distribution

Follow the steps below to create a CloundFront Distribution.

Go to the AWS CloudFront console.
Choose Create distribution
Origin:
- Origin domain: Select the ALB name
- Protocol: HTTPS only
- HTTPS port: 443
Default cache behavior:
- Viewer protocol policy: Redirect HTTP to HTTPS
- Cache key and origin requests: Cache policy and origin request policy
- Cache policy: CachingDisabled
- Origin request policy -: AllViewerAndCloudFrontHeaders
Settings:
- Custom SSL certificate: Select the ACM certificate
Choose Create distribution

Step 10: Publish the Web App

After deploying the CloudFront distribution, the final step is to publish your web application using Route 53. If you already have a domain name, you should create a new A record as an Alias and then choose the ALB URL or the CloudFront distribution URL if you have already created it. In case you do not have a domain name, you can create a new one using Route 53 and then add the A record.

Alternatively, you can use the CloudFront URL or the ALB URL if you are looking for a temporary option.

Conclusion

We have developed a MACH architecture for building and deploying a user-friendly Streamlit web application using AWS services. By utilizing CICD with AWS CodePipeline, we can dynamically build and deploy the web app on a container, which speeds up the process, provides flexibility, agility, and ensures availability. The solution is highly adaptable and can be deployed in any environment. It can also be optimized to scale using Auto-Scaling, which reduces costs based on the required traffic.

AWS CLI — Multiple profiles

Bachar Hakam — Wed, 23 Aug 2023 19:21:03 +0000

How to take advantage of multiple profiles feature? (with examples and tips)

Why and How?

The cloud environment should have multiple accounts, according to AWS best practice "Well-Architected Framework". Based on the security requirements, each account has different groups, roles, and users.
In such a configuration, you may have multiple profiles to use on a daily basis, either between different accounts or even within the same account, with each profile having different permissions or roles.

Setting Multiple profiles

Here is how you can add multiple profiles on AWS CLI

To create multiple AWS CLI profiles, you can use the aws configure command. This command will prompt you for information such as your AWS Access Key ID and Secret Access Key, as well as the default region and output format for your profile.

To create a new profile, you can use the --profile option, followed by the name of your profile. For example, if you wanted to create a profile named "dev", you could use the following command:

aws configure --profile dev

You can create as many profiles as you need, each with its own set of credentials and configuration options.

To use a specific profile, you can use the --profile option followed by the name of the profile you want to use. For example, if you wanted to use the "dev" profile you created earlier, you could use the following command:

aws s3 ls --profile dev

Now let's walk through the steps:

Open the command line or terminal.
Type in the following command: aws configure
When prompted, enter the access key ID and secret access key for the first profile.
When prompted for the default region name and output format, enter the desired values for the first profile.
Repeat steps 2-4 for each additional profile, using a different name and access key ID/secret access key for each one.
To switch between profiles, use the --profile flag followed by the profile name in subsequent AWS CLI commands. For example, to use the "dev" profile, you would use the command: aws --profile dev [command] [options]

Here is an example:

PS C:\> aws configure
AWS Access Key ID [None]: ANY0TH3R4CC3SSK3YL6V
AWS Secret Access Key [None]: 0C+tH1Sc0uLdb3aNYS3CR3tk3YG3n3RAt3d92
Default region name [None]: us-east-1
Default output format [None]: json

Add another profile:

PS C:\> aws configure --profile userdev2
AWS Access Key ID [None]: ANY0TH3R4CC3SSK3YOOZ
AWS Secret Access Key [None]: cP-0C+tH1Sc0uLdb3aNYS3CR3tk3YG3n3RAt3d6z
Default region name [None]: us-east-1
Default output format [None]: json

To list the available profiles, run the this command:

PS C:\>  aws configure list-profiles
default
userdev2

To view the default profile, run the below command:

PS C:\> aws configure list
      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile                  userdev              env    ['AWS_PROFILE', 'AWS_DEFAULT_PROFILE']
access_key     ****************YL6V              env
secret_key     ****************3d92              env
    region                us-east-1      config-file    ~/.aws/config

To view another profile, add "--profile" and the name of the profile to the above command:

PS C:\> aws configure list --profile userdev2
      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile                 userdev2           manual    --profile
access_key     ****************AGGH shared-credentials-file
secret_key     ****************Fpne shared-credentials-file
    region                us-east-1      config-file    ~/.aws/config

So what is the default profile?

The default profile is determined by the settings in the ~/.aws/credentials file on your local machine. You do not need to add "--profile" in your AWS CLI command, you can just type: aws [command] [options]

You can change the default profile manually by editing the ~/.aws/credentials file or you can run this command:

Windows - PowerShell:

PS C:\> $Env:AWS_PROFILE = 'userdev2'

Windows - CMD:

The below command will change the variable in the current CMD session only!

set AWS_PROFILE=userdev2

The below command will change the variable in all NEW CMD sessions

setx AWS_PROFILE userdev2

Note: make sure that the below variables are not set, otherwise setting AWS_PROFILE to the new profile will not force changing the credentials

-   AWS_ACCESS_KEY_ID
-   AWS_SECRET_ACCESS_KEY

Linux:

$ export AWS_PROFILE=userdata

Now run this command to verify that the default profile has been changed

aws configure list

You can run the following command to check the AWS account and IAM user of the current profile

$ aws sts get-caller-identity
{
    "UserId": "AUs3r1DF0rtH1sUs3rZL",
    "Account": "432109876543",
    "Arn": "arn:aws:iam::432109876543:user/userdev"
}

For more details, you may refer to the AWS CLI - Configuration basics.

You may be interested in:
How to use (AWS CLI -- Auto-prompt) to help you build your command faster!

Please feel free to share your feedback.

How to use (AWS CLI -- Auto-prompt) to help you build your command faster!

Bachar Hakam — Wed, 23 Aug 2023 19:18:45 +0000

What is auto-prompt mode?

The AWS CLI is a powerful tool for managing and setting up AWS services and automating them through scripting.

Since we use it in our daily operations, it would be helpful to have a list of the commands for quick reference.
Fortunately, AWS CLI has a handy feature that would be helpful when constructing commands. The auto-prompt mode lists the services or options as you type. This would be very useful, especially if you forget a few options.

There are 3 ways to use this feature. I will walk through them with examples.

1- Single command option

AWS CLI option --cli-auto-prompt can be used once per single command.

Example 1.1:

$ aws --cli-auto-prompt
> aws
 accessanalyzer                      Access Analyzer
 account                             AWS Account
 acm                                 AWS Certificate Manager
 acm-pca                             AWS Certificate Manager Private Certi...

Example 1.2:

$ aws s3 --cli-auto-prompt
> aws s3
          ls
          website
          cp
          mv
          rm
          sync
          mb
          rb
          presign

2- Using Environment variables

There are 2 settings that can be used to enable auto-prompt mode inside the environment variables.

on uses the full auto-prompt mode whenever you run aws command. Useful when you are new to aws commands.

AWS_CLI_AUTO_PROMPT=on

on-partial uses partial auto-prompt mode. This mode is particular useful if you have pre-existing scripts, runbooks, or you only want to be auto-prompted for commands you are unfamiliar with rather than prompted on every command.

AWS_CLI_AUTO_PROMPT=on-partial

2.1- How to set auto-prompt inside the environment variables

Windows

c:\> set AWS_CLI_AUTO_PROMPT=on-partial
c:\> set AWS_CLI_AUTO_PROMPT
AWS_CLI_AUTO_PROMPT=on-partial

PowerShell or Terminal

C:\> $Env:AWS_CLI_AUTO_PROMPT = 'on-partial'
> $Env:AWS_CLI_AUTO_PROMPT
on-partial

Linux

Terminal

$ export AWS_CLI_AUTO_PROMPT="on-partial"

3- Shared config files

You can enable auto-prompt mode per each profile by updating the AWS CLI config file located inside >> (~/.aws/).

Edit the config file then add one of the below settings for each profile.

cli_auto_prompt = on

Example:

```
[profile User1]
region=us-east-1 
cli_auto_prompt = on
```

cli_auto_prompt = on-partial

Example:

[profile User2]
region=us-east-1
cli_auto_prompt = on-partial

For more details, you may refer to the AWS CLI User Guide - Auto-prompt

How to build a Serverless and cost-effective failover solution using a backup website with traffic monitoring! (part 2/2)

Bachar Hakam — Thu, 17 Aug 2023 08:53:35 +0000

In the previous article (part 1/2) we have created an S3 static website as an origin to CloudFront distribution, then we updated the Route 53 configuration to add a new A record pointing to the static website and enabled failover routing policy.

In this phase we will continue deploying serverless services to enable traffic monitoring using S3 bucket to save the CloudFront access logs, create a Lambda function to reduce the log count and use Athena to query the access logs data.

Traffic Monitoring

We will create a new S3 bucket to store the CloudFront access logs, and create another bucket to be used by Athena, then we will enable CloudFront standard logging. Next, we will create a new database and table in Athena to query and analyze the access logs.

Go to AWS S3 console
- Create an access log bucket for CloudFront and enable ACL then create a log folder "cf_accesslogs"
- Create another bucket to be used by Athena
Go to AWS Cloudfront console
- Select the distribution then click Edit
- Turn On Standard logging then select the access log S3 bucket you have just created
- Prefix: the logs folder "cf_accesslogs"
- Save changes
- Wait until Cloudfront distribution is deployed
- If the Web App is down, access your web app domain then it will failover to the CloudFront distribution URL
- or access the Cloudfront distribution URL directly
- This will generate logs inside the S3 logs bucket
Go to AWS Athena console
- Make sure you are using the same region as the created bucket
- Select the Athena bucket to be used by Athena to store the data
- Add the following to the Query editor to create a accesslogs database create database accesslogs;
- Click Run
- Select the + sign to add a new query tab
- Add the following to create a table (replace YourS3LogsBucket/prefix with the bucket name and prefix)

CREATE EXTERNAL TABLE IF NOT EXISTS accesslogs.cloudfront_logs (
  `date` DATE,
  time STRING,
  location STRING,
  bytes BIGINT,
  request_ip STRING,
  method STRING,
  host STRING,
  uri STRING,
  status INT,
  referrer STRING,
  user_agent STRING,
  query_string STRING,
  cookie STRING,
  result_type STRING,
  request_id STRING,
  host_header STRING,
  request_protocol STRING,
  request_bytes BIGINT,
  time_taken FLOAT,
  xforwarded_for STRING,
  ssl_protocol STRING,
  ssl_cipher STRING,
  response_result_type STRING,
  http_version STRING,
  fle_status STRING,
  fle_encrypted_fields INT,
  c_port INT,
  time_to_first_byte FLOAT,
  x_edge_detailed_result_type STRING,
  sc_content_type STRING,
  sc_content_len BIGINT,
  sc_range_start BIGINT,
  sc_range_end BIGINT
)
ROW FORMAT DELIMITED 
FIELDS TERMINATED BY '\t'
LOCATION 's3://YourS3LogsBucket/prefix'
TBLPROPERTIES ( 'skip.header.line.count'='2' );

Run the query
Add another query tab to query the data from the table using the following

SELECT * FROM "accesslogs"."cloudfront_logs" limit 30;

Or select some of the important columns

SELECT date, time, location, request_ip, user_agent FROM "accesslogs"."cloudfront_logs" ORDER bY date DESC, time DESC limit 30;

Run the query to show the data
You will see useful data points such as: Date/time, Location, Request_IP, Method, status, and Host_Header ..

Table fields description Ref. https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/AccessLogs.html#access-logs-choosing-s3-bucket

A Lambda Function to reduce the log files

We will reduce the number of files inside the S3 access logs bucket by creating a lambda function that will keep the latest 5 logs files generated by CloudFront. The function will be triggered once a new log file is generated

Go to AWS Lambda console
Click Create function
- Function name: CF-Latest-logs
- Runtime: Pyhton 3.10
- Architecture: x86_64
- Click Create function
Replace the lambda function code with the following

import boto3
from datetime import datetime

def lambda_handler(event, context):
    s3 = boto3.client('s3')
    bucket_name = '<YourBucketName>' # replace the value <YourBucketName> with the access logs bucket name
    folder_name = '<LogsFolder>' # replace the value <LogsFolder> with the folder name "cf_accesslogs"
    last_x_objects = []
    xlogs = 30 # number of the latest log files

    # Get a list of all objects in the folder
    objects = s3.list_objects_v2(Bucket=bucket_name, Prefix=folder_name)['Contents']

    # Sort the objects by last modified date, with the most recent objects first
    objects.sort(key=lambda x: x['LastModified'], reverse=True)

    # Keep the last recent x objects
    for i in range(xlogs):
        if i < len(objects):
            last_x_objects.append(objects[i]['Key'])

    # Delete all objects in the folder except the last recent x objects
    for obj in objects:
        if obj['Key'] not in last_x_objects:
            s3.delete_object(Bucket=bucket_name, Key=obj['Key'])

    return {
        'statusCode': 200,
        'body': 'Objects deleted from S3 folder except the last recent x objects'
    }

Click Deploy

Add S3 Bucket Permissions

Go to Configuration tab inside the Lambda function
Select Permissions from the left-side menu
Click the Role name to add new permissions
Click Add permissions then Create inline policy
Click on JSON tab then replace the content with the following
- Replace "CF-ACCESSLOGS-BUCKET" with the respective value

 {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::CF-ACCESSLOGS-BUCKET/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::CF-ACCESSLOGS-BUCKET"
            ]
        }
    ]
}

Click Review policy
Enter a Name then click Create policy

Trigger The Lambda Function

Go to AWS S3 console
Select the CloudFront logs bucket you have created previously
Click on Properties
Click Create event notification under Event notifications
- Event name: cf-latest-logs
- Event types: select All object create events
- Destination: select Lambda function
- Select the lambda function "CF-Latest-logs" from the drop-down menu
- Click on Save changes

Conclusion

While the web app is under maintenance, access to the web app domain name will be redirected to the static website through CloudFront distribution, which will save the web traffic logs in the access logs bucket. Next, the Lambda function will be triggered, updating the bucket and retaining the latest xlogs number of log files. Lastly, we can then run Athena query to display the latest logs and analyze the data.

How to build a Serverless and cost-effective failover solution using a backup website with traffic monitoring! (part 1/2)

Bachar Hakam — Tue, 15 Aug 2023 13:23:30 +0000

Building and maintaining a website or a web app would take time and effort during the development phase or due to a major issue that could cause a downtime that require some time to resolve it.

We often design and configure our system to reduce or eliminate incidents that could cause a sever impact, by setting up backups and Disaster Recovery setup (Warm Standby or Active/Active) depending on the RPO/RTO requirements and cost implications. Along with this, especially during the development or pre-production stages in the cloud, we could build a serverless cost-effective failover solution to a backup website and monitor traffic.

During the AWS Cloud Bootcamp by Andrew Brown (ExamPro), we built a Cruddur web app, so I had to design and deploy a failover solution. In this example, the web app runs on ECS Fargate behind an ALB Load Balancer which is registered on Route 53 hosted zone. The failover solution consist of setting up a S3 static website as an origin to a CloudFront distribution, and registered on Route 53 hosted zone. We will enable Route 53 failover routing policy so that traffic is routed to the static website in the event that web app is unavailable.

The benefits of CloudFront would be to cache the content globally and utilize HTTPS using TLS which encrypt data in transit. To start, we first need to set up an S3 static website, after which we will create a CloudFront distribution with the S3 static website as the origin. Next, we will Update the Route 53 hosted zone, edit the primary A record to enable failover by evaluating target health, create a new A record with the same record name to point to the CloudFront Distribution domain name, and route as secondary failover.

Finally, we will monitor the web traffic by enabling CloudFront logging to a new S3 bucket and reduce the log file count by invoking a lambda function once a new log file is created. Lastly, we will query the logs using AWS Athena.

Create S3 Static Website Bucket

Go to AWS S3 console
Create a bucket using DomainName as the name of the bucket
Select the bucket then Edit Static website hosting under Properties tab
Select Enable Static website hosting
Enter the Index document file name e.g. index.html that display "Under Maintenance"
Save changes

Upload Static Website Files

We will upload the content of the static website. This can be a simple single-page website which only requires uploading the html and css files or more complicated website built using for example JavaScript, which requires npm build of the website files then upload the build files.

In both ways, we may follow the following steps.

Go To AWS S3 Console
Select the bucket name created previously
Click on Upload
Add the files of the static website
Select Upload

Cloudfront Distribution

We will use the existing ACM certificate which is already used by the ALB.

Go to AWS CloudFront console
Click on Create Distribution
Origin domain: Select the S3 bucket created previously
Click on Use website endpoint
Viewer/Viewer protocol policy: Redirect HTTP to HTTPS
- Allowed HTTP methods: GET, HEAD
Settings/Alternate domain name (CNAME): Add your DomainName
- Custom SSL certificate - optional: Select your ACM certificate
- Supported HTTP versions: Select both HTTTP 2/3
Click on Create distribution

Update S3 Bucket Policy

Go to AWS S3 console
Select Permissions tab, Edit Bucket policy
Add the following policy (replace the "S3-Bucket-ARN" & "cloudfront-ARN" with the respective value)

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::S3-Bucket-ARN/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront-ARN"
                    }
                }
            }
        ]
      }

Route 53 Hosted Zone Records

Enable primary failover routing policy for the exiting A record pointing to the web app, then create a new A record that will point to the CloudFront distribution URL "Static website" and enable secondary failover routing policy.

Go to AWS Route 53 console
Edit the exiting primary A record pointing to your website via the ALB
Change Routing policy: to Failover
Failover record type: Primary
Make sure Evaluate target health is enabled
Record ID: enter any value
Click on Save
Create a new A record to point to the static website:
- Select Create record
- Select Record type as A record
- Enable Alias then under Route traffic to select CloudFront distribution
- Select the CloudFront Distribution domain name created in the previous step
- Select Routing policy as Failover
- Select Failover record type as Secondary
- Record ID: enter any value
- Click on Create record

Route 53 can now failover to the static website in the event that the web app is unavailable due to maintenance.

In this phase we have completed deploying an S3 static website as an origin to the CloudFront distribution, then updated the Route 53 configuration to add a new A record pointing to the static website and enabled failover routing policy.

In the next phase (part 2/2) we will continue deploying serverless services to enable traffic monitoring using S3 bucket to save the CloudFront access logs, create a Lambda function to reduce the log count and use Athena to query the access logs data.

How to create an AWS Cross-Account Access? (A Step-by-Step Guide)

Bachar Hakam — Thu, 10 Aug 2023 19:19:04 +0000

We usually use multiple accounts when configuring a new or existing AWS environment, which could require cross-account access between those accounts. We could use the AWS Resource Manager to share some resources between the accounts. Alternatively, we can create a cross-account role to be assumed by users in another account to access more resources with higher permissions.

This article will demonstrate how to set up cross-account access between 2 accounts (Alice & Bob) using either AWS Management Console or CloudFormation stack.

Cross Account Setup

Using the accounts Alice and Bob as an example, Bob requests administrator access to Alice's account.
To begin, we'll create an Administrator role for account Alice that account Bob will use. The next step is to switch to account Bob so that user Bob can set up an inline policy allowing them to take on this new role in account Alice.

NOTE: It would be better to use a role with the least privilege permissions as per the best practice, but for the sack of simplicity we will use the Administrator access role policy in this article. In a real-world scenario, the policy should only have the necessary permissions for each user based on the use case.

Step 1: Account Alice - Administrator Role

Option-1: Using AWS Management Console

Go to The AWS IAM console inside Account Alice
Create a new role
Select Another AWS account then add Bob's account ID
Attach the required policy, in this example "AdministratorAccess"
Enter the name of the role "SwitchAccountBobAdminRole"
Select Create role

Option-2: Using AWS CloudFormation stack

Download the CloudFormation template CrossAccountRole-admin.yaml
Edit the template to update the Default value of the AccessToAccountId under Parameters
Replace ACCOUNT-B-ID with an actual AWS account ID "in this case account Bob"

Default: 'ACCOUNT-B-ID'

Go to AWS CloudFormation console
Click on Create stack (Standard)
Select Upload a template file then upload the updated template and click Next
Type the Stack name
Click on Next
Review the stack, select I acknowledge that AWS CloudFormation might create IAM resources. then click on submit

Step 2: Account Bob - Assume Role Policy

Option-1: Using AWS Management Console

Go to AWS IAM console
Select Policy then create a new policy
use the following json policy and change the relevant details (role ARN created previously)

{
  "Version": "2012-10-17",
  "Statement": {
    "Effect": "Allow",
    "Action": "sts:AssumeRole",
    "Resource": "arn:aws:iam::<AlicAccount-id>:<RoleName>"
  }
}

Enter the name of the policy "Alice-Account-AssumeRole"
Select Create policy
Attach the policy to user Bob

Option-2: Using AWS CloudFormation stack

Download the CloudFormation template AssumeRolePolicy-Bob.yaml
Edit the template to update the following values
- Rename the policy name as required

PolicyName: BobAssumeRoleFromAccountAlice

Replace ACCOUNT-ALICE-ID with an actual account ID

Resource: arn:aws:iam::ACCOUNT-ALICE-ID:role/CrossAccountAdminRole

Replace Bob with the actual username in the second account

UserName: Bob
- Go to AWS CloudFormation console
- Click on Create stack (Standard)
- Select Upload a template file then upload the updated template and click Next
- Type the Stack name
- Click on Next
- Review the stack, select I acknowledge that AWS CloudFormation might create IAM resources. then click on submit

Test & Verify

Now that the new role has been created in the first account (Account Alice) and you have attached the AssumeRole policy to the User inside the second account (Account Bob). You can verify that Bob can access Alice account by following these steps:

Log in to Account Bob
Click on the account ID at the top right
Click Switch role
Type the account ID of the other account (Account Alice)
Type the role name you have created in (Account Alice) "in this example we used CrossAccountAdminRole"
Type the display name, chose a color then click Switch Role

You should be able to access the other account (Account Alice) successfully then return back to (Account Bob) by clicking on the account ID on the top right then select Switch back

Conclusion

To sum up, using AWS cross-account features helps different AWS accounts work together by sharing resources and access. This article showed how to do this with a simple example involving two accounts, Alice and Bob. By creating roles and policies, we made sure Bob could easily access and work in Alice's account. This approach makes it easier for different accounts to collaborate securely, which is important for complex setups in AWS.