Forem: Van Hoang Kha

Unlocking the Power of AWS GenAI: A Comprehensive Journey

Van Hoang Kha — Tue, 19 Nov 2024 10:14:40 +0000

Are you ready to harness the transformative potential of Generative AI (GenAI) but feeling overwhelmed about where to start? The AWS GenAI Journey Repository stands as your comprehensive guide, offering a structured path to implementing GenAI solutions that align perfectly with your business objectives.

Introduction to AWS GenAI Journey

The AWS GenAI Journey Repository (GitHub Link) serves as an extensive collection of practical demonstrations and use cases, designed to address common challenges in implementing GenAI solutions. Whether you're looking to integrate GenAI with your existing data infrastructure, enhance recruitment processes, or accelerate development cycles, this repository provides valuable insights and implementation guidelines.

Amazon Bedrock: The Foundation of GenAI Innovation

At the core of this initiative lies Amazon Bedrock, a robust platform providing access to industry-leading GenAI models. Key features include:

Customizable Solutions: Access to various models tailored for specific use cases
Cost Optimization: Flexible pricing models to balance capability with budget
Enterprise Integration: Seamless connectivity with existing data platforms
Security & Compliance: Built-in features ensuring data protection and regulatory compliance

Featured Applications and Use Cases

1. Intelligent Stock Market Analysis

AWS GenAI Market Sage
- Real-time market data integration
- Advanced trend analysis and forecasting
- Technical and fundamental analysis capabilities
Practical Demonstrations:
- Hoa Phat Analysis
- Apple Technical Analysis
- PNJ Market Analysis
- Integration with Anthropic Claude and LangChain

2. Virtual AI Assistants

Educational Support
- Personalized learning content generation
- Student-teacher interaction enhancement
Language Processing
- Multilingual translation with context awareness
- Document summarization and analysis
- Report and email content optimization
Demo Reference: Educational Assistant Demo

3. Advanced Computer Vision Applications

Claude 3 Integration
- Processing capability up to 200K tokens
- Comprehensive image analysis
Key Features:
- Product description generation from images
- PRIZM content-based analysis
- Content moderation for sensitive material
- Automated code generation (Selenium, ReactJS, Angular)

4. HR Assistant Tools

Resume Processing
- Automated resume scanning and evaluation
- Role-specific suitability analysis
- Structured candidate evaluation system
Benefits:
- Reduced manual processing time
- Improved candidate matching
- Standardized evaluation metrics

Repository Growth and Future Potential

The AWS GenAI Journey Repository currently hosts nearly 50 diverse demos, with regular updates and additions. This growing collection represents AWS's commitment to advancing GenAI applications across various industries and use cases.

Getting Started

To begin your GenAI journey:

Visit the AWS GenAI Journey Repository
Review the documentation and requirements
Select a use case that aligns with your needs
Follow the implementation guidelines
Leverage the community support and resources

Conclusion

The AWS GenAI Journey Repository represents more than just a collection of demos – it's a comprehensive resource for organizations looking to leverage the power of GenAI. Whether you're just starting your GenAI journey or looking to expand your existing capabilities, this repository provides the tools, guidance, and practical examples needed to succeed in the rapidly evolving landscape of artificial intelligence.

Note: For the most up-to-date information and additional resources, visit the official repository at https://github.com/aws-samples/AWS-First-GenAI-Journey.

Deployment of the GenAI-Educational-Assistant Streamlit App on AWS EC2 using Visual Studio Code (VSC)

Van Hoang Kha — Mon, 19 Aug 2024 08:40:53 +0000

Introduction: The Dream of a Young Coder

Once upon a time, in a bustling city brimming with technology enthusiasts and aspiring developers, there was a young coder named Kha. Ever since discovering the wonders of artificial intelligence (AI), Kha had been deeply fascinated by its potential to transform lives, especially in the field of education. With an insatiable curiosity, Kha dove into learning everything about AI—machine learning algorithms, natural language processing (NLP), and the vast possibilities of cloud computing. However, Kha wasn’t satisfied with merely acquiring knowledge; the true dream was to build something impactful, something that could help students worldwide learn more effectively.

Kha envisioned a virtual educational assistant—powered by generative AI—that could provide personalized learning experiences, answer complex questions, and guide students through challenging topics. The idea was simple yet profound: an AI assistant that could be accessed by anyone, anywhere, providing tailored educational support.

Discovering the Power of Amazon Web Services

One evening, while browsing through an online forum dedicated to AI enthusiasts, Kha stumbled upon a discussion about Amazon Web Services (AWS) and its potential for deploying AI applications. Intrigued, Kha spent the next few days researching AWS services, quickly realizing that AWS was the perfect platform to bring the GenAI-Educational-Assistant to life. The scalable and flexible infrastructure of AWS, combined with its vast array of AI and machine learning services, provided everything needed to build, deploy, and manage a powerful AI-driven application.

With renewed enthusiasm, Kha embarked on the journey to create the GenAI-Educational-Assistant. The first step was setting up an environment where the AI could be developed, tested, and eventually deployed. After careful consideration, Kha chose Amazon Bedrock, an AWS service designed specifically for deploying generative AI applications. Bedrock provided a comprehensive suite of tools and pre-trained models that could be customized for the educational assistant, saving valuable development time.

Step 1: Setting Up the AWS Environment

Kha began by logging into the AWS Management Console and navigating to Amazon Bedrock. The interface was user-friendly, allowing Kha to quickly select and deploy pre-trained models suitable for educational content generation.

1. **Launch Bedrock and Set Up the Environment:

Kha started by accessing Amazon Bedrock from the AWS Management Console.
Selected a pre-trained model from the available options tailored to NLP tasks.
Created a new project within Bedrock, which would serve as the workspace for developing the GenAI-Educational-Assistant.

2. Configure Security and Permissions:

Ensured that the necessary IAM roles were in place, granting the application the required permissions to access and use other AWS services.
Configured security groups to restrict access to only the necessary ports and IP addresses, thereby enhancing the security of the application.

3. Deploying a Development Environment:

Using an Amazon EC2 instance, Kha set up a development environment. This instance would be used to code, test, and deploy updates to the GenAI-Educational-Assistant.

Step 2: Developing the GenAI-Educational-Assistant

With the environment set up, Kha began the development process. The first task was to create the core logic of the educational assistant, focusing on how it would generate responses to students' queries.

1. Cloning the Project Repository:

Kha cloned the project repository from GitHub, which contained the foundational code for the assistant.
This included Python scripts that would handle user inputs, query the AI models hosted on Amazon Bedrock, and generate appropriate responses.

2. Customizing the Pre-trained Models:

Kha used Amazon Bedrock’s customization capabilities to fine-tune the pre-trained models. This involved feeding the models with educational datasets to improve their accuracy and relevance to students' needs.

3. Developing the User Interface:

For the front end, Kha chose Streamlit, a Python-based framework that allowed for quick development of interactive web applications.
The Streamlit app was designed to be intuitive, with a simple interface where students could input their questions and receive detailed, AI-generated explanations.

Step 3: Deploying and Testing the Application

After weeks of development, it was time to deploy the GenAI-Educational-Assistant for testing. Kha decided to run the application on the EC2 instance to simulate real-world usage.

1. Running the Streamlit Application:

The application was started on the EC2 instance, with the Streamlit app running on port 8080.
Kha accessed the application through the instance’s public IP, testing various features to ensure everything was functioning as expected.

2. Testing and Optimization:

Kha tested the application by inputting various educational queries, observing how well the AI-generated responses met the needs of different educational levels.
Based on feedback from initial testing, Kha made adjustments to the model parameters and optimized the Python code to improve performance.

Step 4: Preparing for Production Launch

Satisfied with the performance of the application, Kha began preparing for a public launch. This involved scaling the infrastructure to handle increased traffic and ensuring that the application was secure and reliable.

1. Scaling the EC2 Instance:

Kha upgraded the EC2 instance to a more powerful type to handle more simultaneous users.
Configured Auto Scaling to automatically adjust the number of instances based on user demand, ensuring the application remained responsive even during peak usage times.

2. Implementing Security Best Practices:

To protect user data, Kha implemented SSL encryption, ensuring that all communications between users and the server were secure.
Additional security measures, such as setting up a Web Application Firewall (WAF) and enabling DDoS protection, were put in place.

3. Monitoring and Maintenance:

AWS CloudWatch was set up to monitor the application’s performance, with alerts configured for any unusual activity.
Kha also set up regular backups and implemented a disaster recovery plan to ensure the application’s availability in case of any issues.

Step 5: Launch and Beyond

The day finally arrived when Kha was ready to launch the GenAI-Educational-Assistant to the public. The application was made available to students and educators worldwide, who quickly began to benefit from its capabilities.

1. Initial Reception:

The response was overwhelmingly positive. Students appreciated the personalized learning experience, while educators found the tool invaluable for supplementing their teaching materials.
The AI-driven assistant quickly became a trusted resource, helping students understand complex subjects with ease.

2. Continuous Improvement:

Kha remained committed to improving the application, regularly updating the AI models with new educational content and adding new features based on user feedback.
The success of the GenAI-Educational-Assistant inspired Kha to explore other potential applications of generative AI, leading to new projects and innovations.

Conclusion: The Impact of a Dream Realized

Months after the launch, Kha received numerous messages of gratitude from students and educators alike. One message, in particular, stood out—a student from a remote area, who had limited access to educational resources, shared how the GenAI-Educational-Assistant had transformed their learning experience.

"Thank you for creating this assistant," the message read. "It has changed my life."

Kha knew that the journey was far from over. The GenAI-Educational-Assistant would continue to grow, evolve, and impact countless lives around the world. And it all started with a dream, a passion for AI, and the powerful tools provided by Amazon Web Services.

Step-by-Step Deployment Guide: Building Your Own GenAI-Educational-Assistant

Now that you’ve followed Kha’s story, you might be inspired to create your own AI-driven application. Below is a detailed step-by-step guide to help you deploy the GenAI-Educational-Assistant using Amazon Bedrock and other AWS services.

Prerequisites

AWS Account: Ensure you have an active AWS account.
IAM Role/Policy: Attach an appropriate IAM role with permissions for necessary AWS services.
Security Group: Ensure the security group attached to your EC2 instance allows inbound traffic on port 22 for SSH and port 8080 for the Streamlit app.

Step 1: Launch and Connect to the EC2 Instance

Launch EC2 Instance:
- Navigate to the EC2 dashboard on AWS Management Console.
- Launch an EC2 instance using a Linux AMI.
- Choose an instance type, e.g., t2.micro.
- Configure the instance details, and attach the necessary IAM role.
- Configure security group settings, allowing inbound traffic on ports 22 (SSH) and 8080 (Streamlit).
- Review and launch the instance.
Connect to the EC2 Instance:
- Use SSH to connect to your EC2 instance from your local machine:
```
 ssh -i /path/to/your-key.pem ec2-user@your-ec2-public-ip
```

Step 2: Set Up Your Environment on EC2

Install Python:

Ensure Python 3 is installed on the EC2 instance:

 sudo yum install python3 -y  # For Amazon Linux
 sudo apt-get install python3 -y  # For Ubuntu

Set Up Python Virtual Environment:
- Install virtualenv and create a virtual environment:
```
 sudo pip3 install virtualenv
 virtualenv venv
 source venv/bin/activate
```

Install AWS CLI:

Install the AWS CLI to interact with AWS services:

 curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
 unzip awscliv2.zip
 sudo ./aws/install
 aws configure

Step 3: Clone the Repository and Install Dependencies

Clone the Repository:

Clone the GenAI-Educational-Assistant repository from GitHub to your EC2 instance:

 git clone https://github.com/awsstudygroup/GenAI-Educational-Assistant.git
 cd GenAI-Educational-Assistant

Install Required Python Packages:
- Install the dependencies listed in the requirements.txt file:
```
 pip3 install -r requirements.txt
```

Step 4: Run the Streamlit Application

Run the Streamlit App:
- Start the Streamlit application on port 8080:
```
 streamlit run Home.py --server.port 8080
```
Access the Application:
- Open your browser and navigate to http://your-ec2-public-ip:8080 to view and interact with the Streamlit app.

Step 5: Develop and Manage the Application using Visual Studio Code (VSC)

Set Up VSC for Remote Development:
- Install the Remote - SSH extension in VSC.
- Connect to your EC2 instance using VSC by configuring the SSH settings.
Develop and Test:
- You can now use VSC to develop and manage the GenAI-Educational-Assistant application directly on your EC2 instance. Any changes you make can be tested by rerunning the Streamlit app.

Step 6: Secure and Optimize the Deployment

Security Enhancements:
- Ensure the security group rules are tightened to allow only necessary traffic.
- Consider using an SSL certificate if deploying for production purposes.
Cost Optimization:
- Monitor the EC2 instance's usage and consider using Spot Instances or setting up Auto Scaling for cost efficiency.

Step 7: Monitoring and Maintenance

Monitoring:
- Use AWS CloudWatch to monitor the performance and logs of the EC2 instance and the Streamlit app.
- Set up alarms for any critical metrics.
Updates and Maintenance:
- Regularly pull updates from the GitHub repository and update dependencies to maintain security and functionality.

Conclusion

By following these steps, you’ll be able to deploy a GenAI-Educational-Assistant using Amazon Bedrock and other AWS services, creating a scalable, secure, and impactful educational tool. Whether you're a student, educator, or developer, this application demonstrates the transformative potential of generative AI in education, paving the way for a more personalized and accessible learning experience for all.

Technical Analyst Stock Markets

Van Hoang Kha — Sun, 18 Aug 2024 18:03:27 +0000

In the fast-paced world of stock market analysis, where every tick of the clock can mean profit or loss, having the right tools at your disposal is crucial. For technical analysts, who rely heavily on data-driven insights, the "Technical Analyst Stock Markets" application can be a game-changer. However, to ensure that this application delivers real-time data and insights seamlessly, it must be deployed on a robust and scalable platform. This is where Amazon Web Services (AWS) and its Elastic Compute Cloud (EC2) service come into play.

Deploying a powerful Streamlit app on AWS EC2 using Visual Studio Code (VSC) ensures that the application is not only functional but also scalable, secure, and ready for production. Let's embark on this step-by-step journey of deploying the "Technical Analyst Stock Markets" application on AWS.

The Journey Begins: Launching an EC2 Instance

Our deployment journey begins with launching an EC2 instance, the foundation of any scalable application on AWS. Imagine yourself in the AWS Management Console, where you navigate to the EC2 dashboard with the goal of setting up a production-grade instance that will host your Streamlit app.

Step 1: Choose an AMI and Instance Type

You start by selecting the Ubuntu Server 22.04 LTS Amazon Machine Image (AMI). This choice is crucial as Ubuntu provides long-term support, ensuring stability and reliability for your application. Next, you choose the instance type. For initial testing, a t2.micro instance might suffice, but anticipating the load your application will handle once live, you opt for a t3.medium instance. This instance type provides a good balance of compute power and memory, making it ideal for handling the demands of a real-time analytics app.

Step 2: Configure Instance Details

You proceed to configure the instance details, making sure to enable the Auto-assign Public IP option. This step is vital as it ensures your instance will be accessible over the internet, allowing users to interact with your app.

Step 3: Set Up Security Groups

Security is paramount. You create a security group that opens port 22 for SSH access, which is necessary for managing your instance remotely. You also open port 8080 for the Streamlit app, allowing users to access the application via a web browser. A single misconfiguration here could expose your app to vulnerabilities, so you double-check every setting before proceeding.

Satisfied with your configurations, you launch the instance and download the SSH key pair that will allow you to securely connect to the EC2 instance.

Connecting the Dots: Accessing EC2 via Visual Studio Code

With your EC2 instance up and running, the next task is to connect to it. Visual Studio Code (VSC) comes into play here, not just as an Integrated Development Environment (IDE) but as a bridge between local development and cloud deployment.

Step 4: Install the Remote - SSH Extension

In VSC, you install the Remote - SSH extension. This extension allows you to manage your EC2 instance directly from within VSC, streamlining the development and deployment process.

Step 5: Connect to EC2

You initiate a new SSH connection in VSC using the SSH key pair you downloaded earlier. The connection string is something like ec2-user@<EC2_PUBLIC_IP>. Once connected, the command line interface of your EC2 instance is accessible right from VSC, making it feel like an extension of your local environment.

Building the Foundation: Setting Up Python on EC2

Now that you’re connected to your EC2 instance, it’s time to prepare the environment for your Streamlit app.

Step 6: Update and Upgrade the System

The first command you run is to update and upgrade the system packages. This ensures that your instance has the latest security patches and software updates, providing a stable foundation for your deployment.

sudo apt-get update
sudo apt-get upgrade -y

Step 7: Install Python and Virtual Environment

Next, you install Python, which is the backbone of your Streamlit app. Alongside Python, you also install python3-venv to create a virtual environment that isolates your app’s dependencies from the system’s global Python environment.

sudo apt-get install python3-pip python3-dev -y
sudo apt-get install python3-venv -y

Step 8: Clone the Repository and Set Up the Environment

With Python installed, you clone your app’s repository from GitHub. After navigating to the app’s directory, you create and activate a virtual environment.

git clone https://github.com/vanhoangkha/Technical-Analyst-Stock-Markets.git
cd Technical-Analyst-Stock-Markets
python3 -m venv env
source env/bin/activate

Once the virtual environment is active, you install the required Python packages listed in the requirements.txt file.

pip install -r requirements.txt

The Moment of Truth: Deploying and Running the Streamlit App

With the environment ready, it’s time to deploy the application.

Step 9: Run the Streamlit App

You run the Streamlit app on port 8080. This is the moment where all your preparations come together.

streamlit run Home.py --server.port 8080

In your web browser, you enter the public IP of your EC2 instance followed by :8080 and press Enter. The "Technical Analyst Stock Markets" app loads, displaying a sleek interface with real-time stock market data and analytics.

Fortifying the Castle: Configuring EC2 for Production

Deploying the app is only half the battle. To ensure your application is truly production-ready, you must configure the EC2 instance for long-term use.

Step 10: Use Nohup to Keep the App Running

You use nohup to keep the Streamlit app running in the background, even after you close the SSH session.

nohup streamlit run Home.py --server.port 8080 &

Step 11: Implement Security and Monitoring

To secure your application, you consider setting up Nginx as a reverse proxy, which will enable SSL for secure HTTPS connections. Additionally, you configure AWS CloudWatch to monitor the instance’s performance, ensuring that any issues are promptly addressed.

Step 12: Optimize Costs

Finally, to optimize costs, you implement a strategy to stop the EC2 instance when it’s not in use, reducing unnecessary expenses. You also explore the possibility of using Spot Instances to further cut down on costs while maintaining scalability.

Conclusion

As you close your browser and reflect on the journey, you realize that deploying the "Technical Analyst Stock Markets" app was more than just a technical task. It was about building a robust, secure, and scalable environment capable of delivering real-time insights to analysts who depend on them. Every step, from launching the EC2 instance to configuring it for production, was a crucial part of the process. The app is now live, ready to help analysts navigate the complexities of the stock market, turning data into actionable insights. This journey is a testament to the power of cloud computing and the impact it can have on the financial world.

Step by Step: Build a Membership Website with Amplify, Stripe, and Next.js

Van Hoang Kha — Sat, 25 Mar 2023 22:29:44 +0000

Content of Table:

1. Create a Copy of the Design Project

Objectives

In this lab, you will learn how to:

Kick off a design project using the Amplify template
Theme the design to your taste

Creating the Project Design

We need to make a copy of this design file to get started. The design was created by cloning the official AWS Amplify UI template and adding a different theme.

We can see the design was created, you can zoom to show clearly :

Even though we’ll use the customized design file for this project, let’s also see how to use the official UI library for future projects.

1.So, in the Figma community, search for AWS Amplify UI Kit and open the kit maintained by the AWS Amplify Team.

2.Choose figma name AWS Amplify UI Kit of AWS Amplify.

3.Click the Get a copy button to create a copy of the AWS Amplify UI project into our Figma account.

The AWS Amplify project contains the following pages:

A readme: describes the UI project.
Primitives: like buttons and form controls that make up the component.
My Components: these are reusable components composed of primitives that we can drop on our website.
Examples: this page shows how to use the components.

Editing the Project design theme

We can change the default theme of the official UI template; to do that, we need to install the AWS Amplify theme editor from the Figma community page.

1.Let's search Amplify themefor the AWS Amplify and open it, click the plugin tab and click try it out it.

2.Click Primitives and Press the command + / keyboard keys to bring up the Figma command palette back to the Figma project.

3.Let's click Component for the AWS theme editor and open it, navigate to the components tab and search for button.primary. And set up the color (you can choose like picture). Then click Save.

4.When save, we should see that we updated the color of the button on the primitives' page.

Note

Amplify recommends that we don't change the primitives directly; the components' artboards are locked to prevent accidentally changing the Components.
The primitives have a one-to-one mapping with the AWS Amplify React UI library, which we'll use when pulling the component into our react project. Changing the primitives will make it fall out of sync with the React UI library.
Amplify will always give us an object containing the themes we are using. We can then pass it to the React UI library to customize it.

On the components page, you should see that all button colors have been updated accordingly, the same thing on the example page

The Design We'll Use

Instead of Official Amplify UI Kit in this project, we'll use an already customized one that suits our membership website. The following is what was edited:

On the Primitives page - the button color was changed to orange and the background color to dark blue, etc.
The Components page - utilizes the customized theme and creates the following components:

The Hero component.
The testimony component.
The story component
The Nav Component and the Footer component.

On the Examples page - a complete website was built using the components. The website includes a landing page and a paywall-protected page.

What's Next?

In the next lesson, you will learn how to setup an Amplify project.

2. Create an Amplify Project

Objectives

In this lab, you will learn how to:

Create an Amplify project
Setup authentication
Add data model
Generate fake data for your model
Import the components from Figma

Creating an Amplify Project

Log in to the AWS console, or create an account here. Search for AWS Amplify from the search bar and select it from the list of services.

Click Get Start

Next, click on the Get Start in item Build an app.

Give a name membership-website to the application and click the Confirm deployment button.

Wait to setting up

After the deployment process, click on the Launch studio button to launch a staging studio in a new tab.

In the Amplify studio, we'll add authentication to the project, model a database and deploy it, add contents to the database, and import UI components from Figma using the UI builder.

Adding Authentication

Navigate to the authentication tab since we need only signed-in users to access our content. The login mechanism stays the same; then, in configuring the sign-up section, click the password protection setting and make the password as strong or weak as possible.

Uncheck all other checkboxes except the Include lowercase characters checkbox and click Deploy to deploy the authentication.

Next click in Confirm deployment

This deployment can take a few minutes

If successfully it will show

Creating Data Model

Navigate to the data section and create the following data models:

Testimonial - this will have the id, name, avatar, and testimony fields.

Post - this will have the id, title, body, and description fields and also a readTime field with the type of integer.

After creating the models and adding fields click the Save and Deploy button to deploy the database.

Adding Content to the Data Model

Add this page we will see

Navigate to the content section, select either the Testimonial or the Post table from the select table dropdown, and click on Auto-generate seed data.

For the Testimonial table, set rows to 6, add constraints like in the below and click the Generate data button:

After generating the data, we can then update the avatar fields with desired avatar URLs.

Set the rows to 10 for the Post table, add constraints, and click the Generate data button to seed the table.

Importing UI Components from Figma

We'll import the customized design from Figma into Amplify Studio, grab the URL from Figma, and navigate the UI Library tab.

Next, click the Get Started button and paste the Figma design URL in the input field and click on Continue.

After successfully importing the Figma components, click on Accept all changes.

Next, click on Accept all to accept all the imported components.

Now, we have all the components in the Amplify project the same way they are in Figma.

What's Next?

In the next lesson, we'll setup a Next.js project.

3. Setup a Next.js Project

Objectives

In this lab, you will learn how to:

Setup a Next.js project

Setting Up a Next.js Application

To create a new Next.js application, let's run the following commands in our terminal:



npx create-next-app membership-website

After creating the application, we'll navigate into the project directory with the command below:



cd membership-website

Next, install the following dependencies:

aws-amplify - to give us access to the amplify SDK
@aws-amplify/ui-react - this dependency has a one-to-one mapping with the primitive's page in our Figma UI design.
@fontsource/inter - so we can tweak the fonts of our project.

The command below will install the above dependencies:



npm install aws-amplify @aws-amplify/ui-react @fontsource/inter

A few final steps:

Create a reset.css file inside the styles folder in the root directory.

Copy the globals.css properties and paste it inside the reset.css file.

Delete the styles in the globals.css and add a background color of #091B2A to the body.

What's Next?

In the next lesson, pull all the UI components and data model from Figma into the new Next.js project.

4. Pull Components from Amplify

Objectives

In this lab, you will learn how to:

Pull components and model from Amplify
Test the components

Pulling Components from AWS Amplify

To pull Amplify components down to the Next.js application, we should have the AWS Command Line Interface installed in the local machine and authorized.

Install the AWS CLI with the following command:



npm install -g @aws-amplify/cli

Click on Local setup instructions, copy the pull command and run it in the terminal in the Studio.

Next, authorize the Amplify CLI and follow the prompts below to pull the components, the data models, the authentication and other Amplify settings.

AWS will add the following folders to the Next.js application.

vscode - this houses some AWS to VSCode configurations
amplify - this contains AWS backend configurations.
models - this houses the model schemas
ui-components - this is the most important for our project. It includes all of our Figma designs/components.

Next, we'll import Amplify configurations and wrap the Next.js application with it. To do this, update the _app.js file with the following snippets:



import "../styles/globals.css";
import { Amplify } from "aws-amplify";
import { studioTheme } from "../ui-components";
import { AmplifyProvider } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import "@fontsource/inter";
import "../styles/reset.css";

import awsconfig from "../aws-exports";
Amplify.configure(awsconfig);

function MyApp({ Component, pageProps }) {
  return (
    <AmplifyProvider theme={studioTheme}>
      <Component {...pageProps} />
    </AmplifyProvider>
  );
}
export default MyApp;

In the snippets above, we did the following:

Imported Amplify from aws-amplify, studioTheme from ui-components, and AmplifyProvider from @aws-amplify/ui-react.
Imported awsconfig from "../aws-exports" and used it to configure Amplify.
Wrapped the Components with the AmplifyProvider and passed the studioTheme as the theme prop.

We've successfully connected the AWS backend environment with our Next.js application. To test things out, let's import a component from the ui-components folder in the index.js file like in the below:



import React from "react";
import { Hero } from "../ui-components";
import { View } from "@aws-amplify/ui-react";

function index() {
  return (
    <View>
      <Hero />
    </View>
  );
}
export default index;

Here, we imported the Hero component and View, like a wrapper div that wraps elements.

Next, run the following command to start the development server:



npm run dev #to start the dev server

Next.js will start a development environment at http://localhost:3000 in the browser; our application would look just like expected:

What's Next?

In the next lesson, you'll learn how to bind data to the components.

5. Bind Data to the Components

Objectives

In this lab, you will learn how to:

Bind data to the components
Bind events to the components
Binding data to Components

To breathe life into the components, we'll be binding data and events to them in the Amplify Studio. We'll start with the Nav component.

Click on the UI Library tab, click on the Nav and click on configure button to bind data and events to the Nav component.

Next, in configure dialog, click on the component's root (Nav) and click Add prop. We'll create the following top-level props and consume them in the elements with the Nav component.

username: this prop will receive the user names on the website.
authText: this prop will display the sign-in or sign-out buttons depending on the user authorization.
avatar: this will handle the user avatar.
handleAuth: this will handle the authorization event.

In the Nav component, we want to hide the username if there's no user, so select the user element and click on the Set prop button; beside the child properties.

Select a display from the list of props, click on the three vertical dots beside it, click on add conditional and add conditions like in the below:

For the avatar text, select it, click on the Set text label button and set the label to the avatar, and for the user name, select it and set its label to the username.

For the button, select it, click on Set an onClick action, select the onClick prop and set its value to handleAuth. Also, click on Set prop, select label prop, and set the value to authText.

For the Hero component, we'll create a top-level prop handleClick and set its type to an Event handler. Select the Button element and set its onClick prop to the handleClick we created above.

We'll create two top-level props for the Persuade component, handleClick, and banner, then set their types to the Event handler and String.

Next, select the Button element, select the onClick prop and set it to the handleClick we created. Select the Banner element, select the src prop and set it to the banner prop we created.

For the Testimony component, we'll bind data a bit differently; unlike the earlier components, we'll be binding data provisioned in our database to the Testimony component.

Click on the Testimony Component and click on configure, select the Component's root and click on Add prop, Create a top-level prop testimonyModel, and set its type to Testimonial data model. All the elements of the Testimony Component will have access to the rows in the Testimonial table.

Now, let's set the Testimony Component elements to different rows of the Testimonial data model.

Select the image element, click on Set prop, select the src prop and set it to testimonyModel.avatar.

Select the Author element, click on Set prop, select the label prop and set it to testimonyModel.name.

Select the Testimony text element, click on Set prop, select the label prop and set it to testimonyModel.testimony.

Next, click on Create collection to generate cards for the total number of records in the Testimonial data table. Change the display to Grid on the collection page and set the column to three.

Next, navigate back to UI Library; let's repeat the process for the Story Component just like we did for the Testimony Component.

Now, select the Story Component, click the configure button, select the Component's root, and click on Add prop. Create a top-level prop postModel and set it to the Post data model.

To bind postModel data to the Story Component elements, we'll select:

Banner element, set its src prop to any static image.(You can choose https://loremflickr.com/320/240?lock=212 this image)

Click on Set prop and set the label prop to postModel.title for the title element.

Description element and set its text label prop to postModel.description.

ReadTime element and set its label prop to postModel.readTime; also, we'll concatenate a string mins read..

Next, click the Create collection button, name the collection Stories. In the collection page, set the display to Grid and the column to 3, then add a padding 10px round the box.

What's Next?

In the next lesson, you'll learn how to build the complete website using the components.

6. Build the Website pages

Objectives

In this lab, you will learn how to:

Use the components to build the website
Build the Website

First, run the following command to pull the data binding changes we made into the Next.js project.



amplify pull

Next, create a components folder; inside it, create a Layout.js file with the following snippets:



//components/Layout.js
import React from "react";
import { View } from "@aws-amplify/ui-react";
import { Nav } from "../ui-components";
function Layout({ children, authText, handleClick, username }) {
  return (
    <View width="1200px" marginLeft="auto" marginRight="auto">
      <Nav
        marginTop={"20px"}
        handleAuth={handleClick}
        authText={authText}
        username={username}
        avatar={username.split("")[0].toUpperCase()}
      />
      {children}
    </View>
  );
}
export default Layout;

In the snippets above, we:

Imported View from "@aws-amplify/ui-react" and Nav from ui-components.
Rendered View as a wrapper div for the Nav component and the children prop.
Rendered the Nav component and passed some layout props to it.

Next, modify the index.js file like the below:



//pages/index.js
import React from "react";
import { Flex, View } from "@aws-amplify/ui-react";
import { Footer, Hero, Persuade, Testimonies } from "../ui-components";
import Layout from "../components/Layout";
function index() {
  return (
    <Layout handleClick={() => {}} authText="Sign Up" username="none">
      <View marginBottom="135px">
        <Hero handleClick={() => {}} />
      </View>
      <View>
        <Testimonies />
      </View>
      <Flex justifyContent={"center"}>
        <Persuade banner="https://i.imgur.com/MxbD3N4.png" />
      </Flex>
      <View marginTop="50px" marginBottom="50px">
        <Footer />
      </View>
    </Layout>
  );
}
export default index;

In the snippets above, we:

Imported Flex and View from "@aws-amplify/ui-react" and Hero, Persuade, Testimonies, and Footer components from ui-components.
Imported Layout.js from the components directory, rendered it and passed handleClick, authText, and username props.
Used View and Flex and rendered our components within the Layout.js wrapper component. Notice that the username component is not visible in the Nav. That is because we passed none as to its value.

Next, let's create a post page where we will render the Stories component; inside the pages directory, create a post.js file with the following snippets:



//pages/post.js
import React from "react";
import { Heading, Text, View } from "@aws-amplify/ui-react";
import Layout from "../components/Layout";
import { Footer, Stories } from "../ui-components";
function Post() {
  return (
    <Layout
      handleClick={() => {}}
      authText="Sign Out"
      username={"christian@hotmail.com".split("@")[0]}
    >
      <View marginTop="50px" marginBottom="30px">
        <Heading level={2}>Welcome to our backstage</Heading>
        <Text marginTop="20px">
          Discover stories,thinking, and expertise from writers on any top{" "}
        </Text>
      </View>
      <Stories />
      <View marginTop="50px" marginBottom="50px">
        <Footer />
      </View>
    </Layout>
  );
}
export default Post;

In the snippets above, we did the following:

Imported Heading and Text components to format our texts and View component to wrap the Text and other components.
Imported the Layout.js components, rendered them, and implemented the post page inside it.

If we navigate to /post in the browser, we would see our post page with the stories component in it. To navigate to the post page from the landing page, let's update the index.js with the below snippets:



//pages/index.js
//other imports here
import { useRouter } from "next/router";
function index() {
  const router = useRouter();
  return (
    <Layout
      handleClick={() => {
        router.push("/post");
      }}
      authText="Sign Up"
      username="none"
    >
      //other components implementations here
    </Layout>
  );
}
export default index;

Here, we imported useRouter from "next/router" and created a constant router with the useRouter() function, and then updated the handleClick. When we click on the Sign-Up button on the landing page, we'll be redirected to the post page.

What's Next?

In the next lesson, you'll learn how to create a checkout fow with Stripe.

7. Create a Checkout Flow

Objectives

In this lab, you will learn how to:

Setup stripe
Create a checkout flow
Test checkout

Creating a Checkout flow with Stripe

First, sign in to Stripe or create an account here; click on the Settings icon from the dashboard, click on the Checkout and Payment Links, and create a Company name.

Next, scroll down and Enable client-only integration.

Next, navigate to the Products tab and create a product like in the below:

Save the product and grab the product price id; we’ll use it later to implement the checkout.

Next, grab the publishable key from the home page and let’s implement the checkout.

Next, install the Stripe client SDK with the following command:



npm install @stripe/stripe-js

Now, let's implement the checkout so that when a user clicks on the Become a Member button in the Hero Component, we will redirect the user to the Stripe checkout page to subscribe.

Let's update the index.js file with the following snippets:



//pages/index.js
//other imports here
import { loadStripe } from "@stripe/stripe-js";
function index() {
  // router here

  async function handleClick() {
    const stripe = await loadStripe(
      "pk_test_51L4jXPKdTSV8bg8w0fz0kimSG031Xoc5jeB4gXeGCt8x7mASfkAYLQzmJSdYNTbQtNIdeHUnJin1xprNw3958ump00e9nhhn9v"
    );
    const { error } = await stripe.redirectToCheckout({
      lineItems: [{ price: "price_1L4lEGKdTSV8bg8wWWfunlGh", quantity: 1 }],
      mode: "subscription",
      successUrl: "http://localhost:3000/post",
      cancelUrl: "http://localhost:3000/cancel",
    });
  }
  return (
    <Layout
      //handleClick here
      authText="Sign Up"
      username="none"
    >
      <View marginBottom="135px">
        <Hero handleClick={handleClick} />
      </View>
      //other components here
    </Layout>
  );
}
export default index;

In the snippets above, we:

Imported loadStripe from "@stripe/stripe-js" and used the publishable key and price to implement the handleClick function.
Provided the success and canceled redirect URLs.
Passed the handleClick function to the Hero Component.

When users click on the Become a Member button, we'll redirect them to the Stripe checkout page.

To test things out, click the button, enter the Stripe test card details, and on successful subscription, we'll be redirected to the post page, as we specified in the handleClick function.

What's Next?

In the next lesson, you'll learn how to create accounts for users after they make payment.

8. Create User Accounts

Objectives

In this lab, you will learn how to:

Setup a Stripe webhook
Create a serverless function for the webhook
Create user accounts

Creating a User Account

The idea here is when a user subscribes, we'll get the user details from Stripe and create an account for the user. We'll create a webhook that Stripe will call on a successful subscription to achieve this. First, run the following command and follow the prompt.



amplify add api

Choose the following options to complete the process:

Next, navigate into the membershipwebsite5dcac801 file we created above with the following command:



cd amplify/backend/function/membershipwebsite5dcac801/src

Now, install the aws-sdk and Stripe with the command below:



npm install aws-sdk stripe

Next, navigate into this amplify/backend/function/membershipwebsite5dcac801/src directory and update the app.js file with the following snippets:



const express = require("express");
const bodyParser = require("body-parser");
const awsServerlessExpressMiddleware = require("aws-serverless-express/middleware");
const aws = require("aws-sdk");
// declare a new express app
const app = express();
app.use(
  bodyParser.json({
    verify: function (res, req, buf) {
      req.rawBody = buf.toString();
    },
  })
);
app.use(awsServerlessExpressMiddleware.eventContext());
// Enable CORS for all methods
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "*");
  next();
});
const getStripeKey = async () => {
  const { Parameters } = await new aws.SSM()
    .getParameters({
      Names: ["stripe_key"].map((secretName) => process.env[secretName]),
      WithDecryption: true,
    })
    .promise();
  return Parameters[0].Value;
};
  // post method
app.post("/webhook", async function (req, res) {
  const stripeKey = await getStripeKey();
  const stripe = require("stripe")(stripeKey);
  const customer = await stripe.customers.retrieve(
    req.body.data.object.customer
  );
  const userEmail = customer.email;
  const cognito = new aws.CognitoIdentityServiceProvider({
    apiVersion: "2016-04-18",
  });
  cognito.adminCreateUser(
    {
      UserPoolId: process.env.AUTH_MEMBERSHIPWEBSITE_USERPOOLID,
      Username: userEmail,
      DesiredDeliveryMediums: ["EMAIL"],
      UserAttributes: [
        {
          Name: "email",
          Value: userEmail,
        },
      ],
      ValidationData: [
        {
          Name: "email",
          Value: userEmail,
        },
      ],
    },
    function (err, data) {
      if (err) {
        console.log(err);
      } else {
        console.log(data);
      }
    }
  );
});
app.listen(3000, function () {
  console.log("App started");
});
module.exports = app;

Most snippets above were generated when we followed the amplify add api command prompts, and we added the following:

Imported the aws-sdk using the require function
Added the verify option to the bodyParser function and set it to an anonymous function.
Implemented the post route and did the following:
- Created the stripeKey constant and set to the getStripeKey() function.
- Imported stripe using the Node.js require function and added the stripeKey.
- Retrieved the customer detail using the stripe instance and set the userEmail to customer email. cognito, called the adminCreateUser() function, and created the user.
- We passed an anonymous function as a second parameter to the route.

When a user subscribes again, we'll get an email with the user email as username and a generated temporal password. Also, if we inspect the Stripe webhook, we will see the user details.

If successfully, we will see the email

What's Next?

In the next lesson, you'll learn how to protect the website from unauthorized customers.

9. Authenticate the Customers

Objectives

In this lab, you will learn how to:

Create UI for authentication
Protect the customer area from unauthorized access
Authenticating Users

We want to protect the post page so the only signed users can access it; let's update the post.js file with the following snippets:



//pages/post.js
//other imports here
import {Authenticator,Flex,Heading,Text,useTheme,View,} from "@aws-amplify/ui-react";
import { Footer, Logo, Stories } from "../ui-components";
function Post() {

const authComponents = {
    Header() {
      const { tokens } = useTheme();
      return (
        <Flex
          justifyContent={"center"}
          direction="column"
          paddingTop={tokens.space.xxxl}
          paddingBottom={tokens.space.xxl}
        >
          <Logo />
        </Flex>
      );
    },
  };

  return (
    <Authenticator components={authComponents} hideSignUp={true}>
      {({ signOut, user }) => (
        <Layout
          handleClick={() => signOut()}
          authText="Sign Out"
          username={user.attributes.email.split("@")[0]}
        >
          // other components here
        </Layout>
      )}
    </Authenticator>
  );
}
export default Post;

In the snippets above, we:

Imported Authenticator, useTheme, and Flex from "@aws-amplify/ui-react" and imported Logo from "ui-components."
Created authComponent object, created a Header() function inside it, destructured tokens from the useTheme() function, and used Flex to render the Logo component.
Wrapped the Layout with Authenticator and passed authComponent to its components prop.
Passed the signOut function to the Layout handleClick event and updated the username value with the user parameter.

Click Sign Up, when the page pops up like this

Copy Your temporary password from your email and change your password

When you re-enter the site, you will have to re-verify your information

Check your email

And you have done the customer authentication part.

10. Conclusion

In this lab, you learned how to:

Theme a design in Figma for your AWS Amplify project
Create Amplify projects
Convert convert components in Figam to React code
Integrate Stripe with your AWS Amplify project
Protect your website with authentication

If you're looking to learn more about Amplify, head to our docs and join our Discord community.

Step by step: Build your first AWS Amplify and React App

Van Hoang Kha — Sat, 25 Mar 2023 00:22:13 +0000

Full Stack for Front-End Developers: Building Your First AWS Amplify and React App Introduction

In this course, you will learn how to build full-stack applications with AWS Amplify Studio. We will be building a note-taking app with authentication, authorization, and data features. Additionally, we will use Amplify Studio's Figma to generate code that facilitates a seamless transition from design to React components.

If you are a front-end developer looking to build full-stack apps, then you have come to the right place!

Prerequisites

Knowledge of React, including states, event handlers, and props.
Familiarity with using the command-line interface on your computer. You don't have to be an expert, though!
Although not mandatory, it would be useful to learn about Figma before building your own applications with AWS Amplify Studio.

Things You Will Build

We will build a note-taking app with the following features:
All notes will be listed on the homepage.
Ability to create, update, and delete notes.
User accounts will be able to login, create accounts, and log out.
Users will only be able to view and modify their own notes.

1. Create data model

The first thing we need to do for our note-taking app is to create data models. We will want to store our notes in a database so that users can access them on different devices.

If you don't have an AWS account, go ahead and create one. You also may want to read about AWS Amplify pricing and how to set a billing alarm.

Go to the AWS Amplify Console.

Continue to Start in Amplify Studio.

Enter Application Name: notes . Select Confirm Development.

When development app is selected Launch studio.

Select Data and Setup on the left navigation

Data models allow us to organize and normalize data - in JavaScript it would be very difficult to do with an array of objects where each object has different keywords. Instead, we want to normalize our data so that each version has the same properties. We also want the data types to be normalized.
For example, if you are going to create a data model for items in an online store, you will have the item name and description you want as strings. You will also have the price, float and image, which will be a URL. Normalizing your data in this way will make your interaction much easier.

In Studio, create a named Notes data model and add two fields, title and text. Preserve the String data type.

Once you've done this, click Save and deploy - your data will simply be mined to AWS!

AWS Amplify Data Storage

When you create a data model with AWS Amplify Studio, you are using the DataStore. DataStore stores your data both online and offline without any extra work. In the browser, it stores data in IndexedDB similar to localStorage. It will also save your data to the cloud using an Amazon DynamoDB database.

2. Use the AWS Amplify Data Manager to Seed Data

Go to the Content tab in Amplify Studio.

In the Content page select Actions and select Auto generate data.

Here you will be able to modify your application data. I will create 100 rows of data and add some constraints. I want my title to be 1-3 words long. I want each of my text fields to be 1-5 sentences long. Then I will click Generate Data.

You should now see 100 rows of data in the Amplify data manager.

You can access and edit any rows of data, create new notes, or delete them using the data manager.

3. Import Figma Designs into Amplify Studio

Go to UI Library in Studio. Select Sync with Figma.

For this course, I pre-created a remixed Figma file from the original Amplify UI Kit for your use. has the necessary components for the note taking application. Click get a copy on Figma to use it. You'll be prompted to create a Figma account if you don't already have one -- this project is on their free tier.

Select My Components you will see your UI components in Amplify Studio

Copy the link to your Figma file and return to Amplify Studio. Paste your link into the input, then click Continue.

Amplify Studio allows you to take these components and export them to human-readable React code - we'll do this in a few lessons!

4. Connect Data Models to UI Components

Go to UI Library in Studio. Select NoteUI then enter Configure

Click on the title on the existing card that says T-Shirt.

On the right side of the page, Select Set Text Label. We'll want to make this the title of the note.

Set the label holder: note.title.

You should see the t-shirt text change to one of the titles of one of the generated notes. If you click Shuffle Preview Data you will cycle through different notes!

Do the same for the note text - select the paragraph below the title.

Set the label to note.title.
Click on the trash can icon.
Set onClick holder to Delete under data. Then select Note model and set ID to note.id

Create a form

Back to UI Library.

Click on the CreateNote form, then select Configure. Click Save and add

Prop: `onClick.
Action: Create new.
Model: Note.
Then select title input to fill in the title model field and the like for the text.
The name TextField comes from Figma - you can rename the elements within it!

Update form

Back to UI Library.

Click UpdateNote , then select Configure. Click Save and add as shown below.

We have now linked the data we created in Amplify Studio with the UI components we created in Figma.

5. Create a collection view

Go to UI Library in Studio. Select NoteUI then enter Configure

Then select Create Collection.

Then change the gallery style to grid and set the number of columns 3 and set the page size 9 which will eventually add 10px to each side of the note.

You can set the sort or filter conditions for your collection on the right side.

6. Setup a Local AWS Amplify Application

Create a React Application

First, create a React app using your command line interface. We will use Create React App (https://create-react-app.dev/) to create a boilerplate React app.

Run npx create-react-app notes. Then change to the created directory, cd notes.

Run Amplify Pull

We will install the AWS Amplify CLI: npm install -g @aws-amplify/cli.

Return to Amplify Studio and click Local Setup Guide. Here you will receive an amplify pull command for your application - the application ID will be specific to your application. Copy this command by clicking on it, then run the command in your CLI.

A screen will appear asking if you want to log in to the Amplify CLI in your browser, select Yes and then you will be asked questions about your application in the CLI.

Press enter to answer each default question.

Open the application code in your text editor. You will notice that a few folders have been created in Amplify Studio.

Amplify Configure

Install Amplify libraries and React components.
npm i aws-amplify @aws-amplify/ui-react

Once installed, open /src/index.js file and add the following above the React native code.

// src/index.js import { Amplify } from 'aws-amplify' import config from './aws-exports' Amplify.configure(config)

Set Up Amplify UI

We have some setup steps to follow in order for the components to render as expected.

Import the component and the Amplify CSS file.

// src/index.js import { AmplifyProvider } from '@aws-amplify/ui-react' import '@aws-amplify/ui-react/styles.css'

Then set the AmplifyProvider component as the top-level component for your application according to the existing root.render method:

`
// src/index.js
root.render(

Finally, add the Inter font file to src/index.css:

/* src/index.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');

We've set up a React app linked to the AWS Amplify backend and configured Amplify's UI components.

7. Using AWS Amplify Studio Components Locally

Run the Create React application development server through the CLI: npm run start. Keep this app running in the background so you can see its changes in the browser.

Go to /src/App.js and remove the return replace boilerplate with React Fragment:

function App() { return ( <></> ) }
You can also delete existing entries.

Add NavBar component to the application.

import { NavBar } from './ui-components'

Then create a component instance in return

function App() { return ( <> <NavBar /> </> ) }

When you view the NavBar in the browser you will notice that it doesn't span the entire page add the width=100% prop to the element:

```
<NavBar width="100%" />
```

Now render the collection of notes below the title:

```
import { NavBar, NoteUICollection} from './ui-components'

function App() {
  return (
    <>
      <NavBar width="100%" />
      <NoteUICollection />
    </>
  )
}
```

You will notice that the NavBar is really close to the notes, add a bottom margin.

```
<NavBar width="100%" marginBottom='20px' />
```

Add at the end of your index.css file. This will be helpful to make our composition look even better!

```
/* Add to the end of /src/index.css */
.modal {
  position: absolute;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  left: 0;
  right: 0;
  top: 100px;
  border: .5px solid gray;
}

.container {
  margin: 0 auto;
  max-width: 900px;
}
```

Wrap NoteUICollectiondiv with a class container so that they are displayed in the center of the page:

```
function App() {
  return (
    <>
      <NavBar width="100%" />
      <div className='container'>
        <NoteUICollection />
      </div>
    </>
  )
}
```

You can check the CreateNote form (when it's not hidden) and it will add a new note to your UI!

```
import { CreateNote, NavBar, NoteUICollection, UpdateNote } from './ui-components'

function App() {
  return (
    <>
      <NavBar width="100%" />
      <div className='container'>
        <NoteUICollection />
      </div>
      <div className='modal' style={{display: 'none'}}>
        <CreateNote />
      </div>
      <div className='modal' style={{display: 'none'}}>
        <UpdateNote />
      </div>
    </>
  )
}
```

We have now created the basic user interface for our application.

8. Modify AWS Amplify Studio Generated Components in Code

First, we will create state fields to know if each modal is displayed or not. We'll also create a status field to store which notes should be updated.

```
import { useState } from 'react'

function App() {
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [showUpdateModal, setShowUpdateModal] = useState(false)
  const [updateNote, setUpdateNote] = useState()
...
```

Open the /src/ui-components/NavBar.js file. You will notice a Button child component with getOverrideProps inside it.

The second argument getOverrideProps is the Figma key, in this case Button31632483 is .

You can pass the overrides prop to instances of your component, which will contain an object. Key will be the key of subcomponent, value will be the property we want to override. We will add an onClick button that toggles showCreateModal to true.
<NavBar marginBottom='20px' width='100%' overrides={{ Button31502513: { onClick: () => setShowCreateModal(true) } }} />

Now we will conditionally expose the CreateNote method to show only when showCreateModal is true. We will also override the X symbol to close the modal. For accessibility, I would also make it a button.
<div className='modal' style={{ display: showCreateModal === false && 'none' }}> <CreateNote overrides={{ MyIcon: { as: 'button', onClick: () => setShowCreateModal(false) } }} /> </div>

Clicking the edit button on the note will show the update method and also set the version of the note we want to update/
<NoteUICollection overrideItems={({ item, idx }) => { return { overrides: { Vector31472464: { as: 'button', onClick: () => { setShowUpdateModal(true) setUpdateNote(item) } } } } }} />

Add an override to UpdateNote to hide the update method when it closes and we will also pass the version of the note that we want to update.
<div className='modal' style={{ display: showUpdateModal === false && 'none' }}> <UpdateNote note={updateNote} overrides={{ MyIcon: { as: 'button', onClick: () => setShowUpdateModal(false) } }} /> </div>

Now our full UI is working as expected.
You can use overrides to customize user interface elements created by AWS Amplify Studio in your own code.

9. Add Authentication to your Application

We'll be adding authentication to our app so users can be created, logged in, and signed out.

We'll be adding both authorization and authentication to this app - let's quickly define both:

Authorization - Allows users to have different actions they can take, e.g. only admins can update blog posts or only data creators can viewable.

Authentication - Make sure someone is what they say, such as by asking them to enter a password.

Instruct

Click Authentication in Setup. You can configure different login mechanisms, properties, password protection, and more. using the form provided. Select the default configuration, then click Deploy.

After your deployment is done, run `amplify pull` in your CLI to synchronize the changes with your local application.

In the App.js component, we will use the WithAuthenticator function to require the user to login to view the page. It will also implement the user creation process.

First, import the ingredients:

import { withAuthenticator } from '@aws-amplify/ui-react'
Then on your output line, wrap the Application component in a function:
export default withAuthenticator(App)

If you return to your app, you'll need to sign in to view your page.

Implement the logout button! The withAuthenticator function passes a signOut function (and user information) to the component it wraps as a prop. Let's destroy it:
function App ({ signOut })

In the NavBar component that runs the function when the Sign Out button is clicked.
<NavBar marginBottom='20px' width='100%' overrides={{ Button31502513: { onClick: () => setShowCreateModal(true) }, Button31502517: { onClick: async() => { signOut() } } }} />

We now have a full authentication flow for our application.

10. Add owner-based authorization rule

In AWS Amplify Studio, go to the data tab under Setup. Then click the Note model. Enable Enable Owner Authorization. Select all activities. Delete an existing rule.

Then click Save and Deploy.

Once your data updates are deployed, run amplify pull in your CLI to sync your changes locally.

Import the DataStore library:
import { DataStore } from 'aws-amplify'
In the NavBar component, add the following line of code to clear local data before logging out.
<NavBar marginBottom='20px' width='100%' overrides={{ Button31502513: { onClick: () => setShowCreateModal(true) }, Button31502517: { onClick: async() => { + await DataStore.clear() signOut() } } }} />

We now have authorization rules in our application.

11. Add UI Themes to your Project

First, install the AWS Amplify Theme Editor Plugin. Then go to your project's Figma file.
Click the Figma icon in the navigation bar, then plugins, then click AWS Amplify Theme Editor.

You will see an interface to change the theme of the application. Choose any color you like, then scroll to the bottom and click Update Theme

You'll see all your components in the My Components tab updated to match the color theme. You can also do this with spacing, font size, and individual elements.

To sync your changes locally, run amplify pull from the command line in your project. We will need to pass the color theme to the element in the index.js file.

Enter subject object: import { studioTheme } from './ui-components'
Then add it as a prop for AmplifyProvider: <AmplifyProvider theme={studioTheme}> Your color theme should now match the one you set up in Figma! You can now update themes and components in Figma and synchronize them with your local application.

12. Hosting Your First AWS Amplify and React App UI

First, create a GitHub repository for your app.

Go to the new repo page and add a name. Then click Create Repository.

Push your code to GitHub.
`

    git add .

    git commit -m "Amplify Studio tutorial"

    git remote add origin YOUR_REPO_URL

    git push -u origin main
    ```

Go to AWS Amplify Console . Select the Amplifier app you're building, then click it. Switch to Hosting environmentstab, select GitHub, then click Connect Branch.

Give GitHub permission when you are prompted.

Then in the drop-down list select your repository. Also select the branch you want to deploy to. Then click "Next"

select the "staging" backend environment. Click Create New Role.

Next tap each screen.

Click Create Role

Then return to Amplify's Archive page and select your role Click Next.

Click Save and Deploy.

After a few minutes, you should see a checkbox that says your app is deployed!

You can click the URL to view or share your app. From here you can add a custom domain, set up pull request previews, and control access.

Now, both your application frontend and backend are deployed to AWS.

13. Resources Delete

First, create a GitHub repository for your app. pricing page .

You can delete an Amplifier resource in two ways. The first is by running amplify delete in the project's directory from your CLI.

The alternative is to go to Amplify Console , select your app, then in the Actions dropdown menu , select Delete App.

Deleting the Amplify app in any way will remove AWS resources from your account.

14. Conclusion

Conclude

You've now built a complete app with authentication, authorization, data, and a React UI built using AWS Amplify Studio.

Next step

To test your skills and keep learning Amplify, you can add more features to this app, for example:

Add images to your notes. Enable storage via Amplify Studio, then use Amplify JS Library to access the images in your application.
Turn your app into a Next.js app, then move some of your backend logic to the side. server .
Write logic and authorization rules so that notes can be shared between users (for example, you can share a to-do list with your significant other).

Git repository

DynamoDB Basic - Part 1: Introduction DynamoDB

Van Hoang Kha — Fri, 24 Mar 2023 22:09:35 +0000

1. Core Components of Amazon DynamoDB

Table: Like other database systems, DynamoDB stores data in tables. A table is a collection of items.
Item: Each table contains zero or more items. Items in DynamoDB are similar to the concept of rows in relational databases, records, or tuples in other database systems. In DynamoDB, there is no limit to the number of items that can be stored in a table.
Attribute: Each item includes one or more attributes. An attribute is a basic data element that does not need to be broken down further. Attributes in DynamoDB are similar to columns in other database systems in many ways.

2. Primary Key

When creating a table, you must specify the primary key of the table in addition to the table name. The primary key uniquely identifies each item in the table, ensuring that no two items can have the same key. DynamoDB supports two different types of primary keys: the partition key and the composite primary key.

The partition key is a simple primary key consisting of an attribute called the partition key. DynamoDB uses the value of the partition key as input to the internal hash, and the output from the hash defines the partition (physical memory inside DynamoDB) in which the item will be stored. In a table with only a partition key, no two items can have the same partition key value.

The composite primary key, on the other hand, consists of the partition key and a sort key. DynamoDB uses the partition key value as input to the internal hash, and the output from the hash defines the partition (physical memory inside DynamoDB) in which the item will be stored. All items with the same partition key value are stored together, in sorted order by the sort key value. In a table with a partition key and a sort key, multiple items can have the same partition key value, but those items must have different sort key values. The composite primary key gives you more flexibility when querying data.

3. Secondary Indexes

You can create one or more Secondary Indexes on a table.
Secondary Indexes allow querying data in the table with different keys from the original partition key and sorting of the table. With DynamoDB, data query operations are much faster and more cost-effective than scanning.
Here is an example DynamoDB table:

If we perform a data query operation, we can find data by the value of the Partition Key and Sort Key.

If we perform a data scan operation, we will scan the entire table and then filter by any attribute. (When implementing the filter, we still have to spend the cost of scanning the entire table.)

DynamoDB doesn't force you to use indexes, but they do give your applications more flexibility when it comes to data queries. After creating a Secondary Index on the table, you can read data from the index in the same way as reading data from the table.
DynamoDB supports two types of indexes:

Global secondary indexes, which have partition keys and sort keys that may be different from indexes on the table.

Local secondary indexes, which have the same partition key as the table but have a different sort key.

Each table in DynamoDB has a maximum of 20 Global secondary indexes (the default limit) and 5 Local secondary indexes.

4. Naming Rules and Data Types

Tables, properties, and other objects in DynamoDB must have names. The following are the naming rules for DynamoDB:

All names must be encoded with UTF-8 and be case sensitive.
Table names and index names must be between 3 to 255 characters and can only contain the following characters:

a to z
A to Z
0 to 9
_(underscore)
(hyphen)
. (dot)

Attribute names must be at least one character long, but no longer than 64 KB.

The following are exceptions. These property names cannot be longer than 255 characters:

The key name of the Secondary Index partition.
Secondary Index sorts the key names.
The name of any user-specified expected properties (applies only to local SecondaryIndexes).

DynamoDB supports many different data types for attributes in the table, which can be classified as follows:

Scalar types: A scalar type can represent only one value. Scalar types are numeric, string, binary, Boolean, and null.
Document types: A document type can represent a complex structure with nested properties, such as a JSON document. The document types are list and map.
Set types: A set type can represent many scalar values. Set types are string set, numeric set, and binary set.

5. Read Consistency

Eventually Consistent Reads

When you read data from a DynamoDB table, the response may not reflect the result of a recently completed write operation.
Responses may include some stale data.
If you repeat your read request after a short time, the response will return the latest data.

Strongly Consistent Reads

When you request Strongly Consistent Reads, DynamoDB returns a response with the most up-to-date data, reflecting updates from all previous writes that were successful. However, this consistency comes with some downsides:

Strongly Consistent Reads may not be available if there are network problems or outages. In this scenario, DynamoDB may return server error (HTTP 500).
Strongly Consistent Reads may have higher latency than eventually consistent reads.
Global secondary indexes are not supported Strongly Consistent Reads.
Strongly Consistent Reads uses double throughput capacity than eventually consistent reads.

6. Read/Write Capacity Mode

On-Demand Mode

Amazon DynamoDB on-demand is a flexible payment option capable of serving thousands of requests per second without capacity planning. DynamoDB on-demand offers pay-on-demand for read and write requests so you only pay for what you use.
When you select on-demand mode, DynamoDB instantly responds to your workloads as they increase or decrease to whatever traffic level was previously reached. If the workload's throughput reaches a new peak, DynamoDB adapts quickly to accommodate the workload. Tables using on-demand mode offer the same single-digit millisecond latency, service level agreement (SLA) commitment, and security that DynamoDB already provides. You can choose on demand for both new and existing tables, and you can continue to use existing DynamoDB APIs without code changes.
On-Demand mode is a good choice if any of the following are true:
- You create a new board with an unknown workload.
- You have unpredictable application traffic.
- You just love the ease of paying for what you use.

Provisioned Mode

If you select provisioned mode, you specify the number of reads and writes per second that you require for your application. You can use auto-scaling to automatically adjust your table's provisioned capacity in response to changes in traffic. This helps you manage your DynamoDB usage to stay at or below the specified request rate for cost predictability.
The mode provided is a good option if any of the following are true:
- You have predictable application traffic.
- You run applications with consistent or incremental traffic.
- You can forecast capacity requirements to control costs.

AWS Import/Export - Part 2: Export VM from AWS

Van Hoang Kha — Wed, 08 Mar 2023 22:18:51 +0000

Table of content:

1. Configure S3 for exporting

When we export instances from AWS to virtualized environment formats, we will have to store them on the S3 bucket.

This process will be performed by the default AWS user vm-import-export@amazon.com. Therefore, you need to assign permissions to this user on the S3 bucket via the ACL.

Create an s3 bucket to store export.

Access the Amazon S3 Management console.
In the navigation bar, select Buckets.
Select Create bucket to create a new S3 bucket.
On the Create bucket page, set the parameters for the S3 bucket.
Bucket name: Enter the bucket name. This name must be unique and not duplicate. (Ex: import-bucket-2021)
Region: Select the storage region of the bucket.

Uncheck Block all public access to allow public access. AWS will then issue a warning, and you select I acknowledge that the current settings might result in this bucket and the objects within becoming public.

Select Create bucket.

Finish creating the bucket.

Edit Access control list(ACL). Select bucket owner enforced

Select ACLs enabled, select Save changes.

Select Add grantee

Enter Canonical ID and select Write Objects and Read of the Bucket ACL. Then select Save changes.

Canonical ID list of user vm-import-export@amazon.com by Region:

Africa (Cape Town)
Asia Pacific (Hong Kong)
{% raw %}

Europe (Milan)
{% raw %}

Middle East (Bahrain)
{% raw %}

China (Beijing)
{% raw %}

AWS GovCloud (US)
{% raw %}

All other Regions
{% raw %}

2. Export from instances

To export virtual machines for deployment to virtualized environments, AWS supports direct export from EC2 Instance using the AWS CLI.

Export virtual machines from EC2 Instance.

Please access the EC2 Management console to get the Instance ID information to export.

Run the command aws ec2 create-instance-export-task to launch the process of exporting EC2 Instance to the desired format for your virtualized environment. You need to enter the following parameters:

--instance-id: The Instance ID retrieved from the list of EC2 instances.
--target-environment: Target virtualization environment (eg microsoft)
--export-to-s3-task: Specify the exported virtual machine parameters:
- Format (vhd)
- S3 bucket storage (export-bucket-2021)
- Storage path in the bucket (vms/)
- To minimize the possibility of incorrect input, create a file named file.json to store the parameters passed to the parameter --export-to-s3-task

{% raw %}

{
"ContainerFormat": "ova",
"DiskImageFormat": "VMDK",
"S3Bucket": "export-bucket-2021",
"S3Prefix": "vms/"
}

It will take some time to be able to export the instance to a VHD file used for deployment on a Hyper-V virtualized environment (or a VMDK file if you use VMWare Workstation). You can use aws ec2 describe-export-tasks command to check export progress



aws ec2 describe-export-tasks --export-task-ids <YourExportTaskID>

Once done, you will have the virtual machine's files stored in the S3 bucket.

Deployment of exported virtual machine

After downloading the vhd hard disk file to the on-premise system, you can try to deploy the virtual machine using this vhd file.

3. Export virtual machine from AMI

Export virtual machine from EC2 AMI

To export virtual machines for deployment to virtualized environments, AWS supports exporting from AMI through the use of the AWS CLI.

Please access the EC2 Management console to get the AMI ID information to export.

Run the command aws ec2 export-image to launch the process of exporting the AMI to the desired format for your virtualized environment.

--image-id: The AMI ID retrieved from the list of EC2 instances.
--disk-image-format: Virtual machine hard disk/virtual machine file format (e.g. vmdk or vhdx)
--s3-export-location: Specify the location of the exported file:
S3 bucket storage (eg import-bucket-2021)
Storage path in the bucket (eg export/)

It will take some time to be able to export the AMI to a VHD file used for deployment on a Hyper-V virtualized environment (or a VMDK file if you use VMWare Workstation). You can use the aws ec2 describe-export-image-tasks command to check the export progress.



aws ec2 describe-export-image-tasks --export-image-task-ids <YourExportImageTaskID>

Once done, you will have the virtual machine's disk file stored in the S3 bucket.

Deployment of exported virtual machine

After downloading the vhd hard disk file to the on-premise system, you can try to deploy the virtual machine using this vhd file.

4. Clean up resources

In this section, you will clean up resources on AWS Cloud to avoid incurring costs.
Delete the EC2 Instance created in the lab
- Access EC2 Management Console
- On the left navigation bar, select Intances
- Select all EC2 Instances related to the lab.
- Click Actions.
- Click Manage Instance State.
- Select Terminate.
- Click Change State.
Delete the Security Group created with EC2 Instance
- Access EC2 Management Console
- On the left navigation bar, select Security Groups
- Select all Security Groups related to the lab.
- Click Actions.
- Click Delete security groups
- Click Delete
Delete AMI
- Access EC2 Management Console
- On the left navigation bar, select AMIs
- Select the AMI related to the lab.
- Click Actions.
- Click Deregister.
- Click Continue.
Delete S3 Bucket
- Access S3 Management Console
- On the left navigation bar, select Buckets
- Select the Bucket related to the lab and delete all the content. Or, tick the Bucket related to the card and select Empty.
- When you see the Empty Bucket prompt, type permanently delete in the empty box.
- Select Exit.
- Tick the Bucket that has just been deleted and select Delete.
- When you get the Delete bucket prompt, type the name of the bucket you want to delete in the empty box.
- Select Delete Bucket.
- Repeat until all buckets related to the post are deleted.
With the IAM Role vmimport, you can keep it for future use.

The following sections

AWS Import/Export - Part 1: Import

AWS Import/Export - Part 2: Export VM from AWS

AWS Import/Export - Part 1: Import

Van Hoang Kha — Sat, 04 Mar 2023 21:18:00 +0000

Content of Table:

Overview

VM Import/Export

VM Import/Export is a service that allows you to import virtual machines (VMs) from your virtualized environment to Amazon EC2 and vice versa. This feature allows you to migrate applications and infrastructure resources from an on-prem virtualized environment to Amazon EC2, back up your virtual machines to EC2, and create an archive of virtual machines for redundancy, and recovery after the crash.

You can use VM Import/Export with no service charges (except for EC2 VMs and S3 Bucket).

AWS Simple Storage Service (S3)

AWS S3 is a large data storage service, with a S3 bucket containing many Objects. You can store an object up to 5TB in size and there is no limit to the number of objects stored in a bucket.

In this step, you will perform the initialization of a virtual machine on your on-prem virtualization environment. The virtual machine that will be initialized is Ubuntu Desktop.

As part of the exercise, you will deploy virtual machines in a virtualized environment VMWare Workstation on-premise.

1. Prepare virtual machine in virtualized environment VMWare Workstation

Install VMWare Workstation Pro at Download WMWare Workstation Pro.

Download OS Ubuntu

Access VMWare Workstation, select Create a New Virtual Machine

At Welcome to the New Virtual Machine WWizard, select Typical (recommended)

In Guest Operating System Insstallation, select Image file (.iso) of the latest Ubuntu desktop version. You can download this file from the [Ubuntu Release] page (https://ubuntu.com/download/desktop)

At Easy Install Innformation enter Username as awsstudent and enter password.

At Name the Virtual MMachine name the virtual machine Ubuntu

At Specify Disk Cacity enter 20GB

Review the parameters and select Finish to proceed with the installation.

Complete the Ubuntu installation in VMware.

User configuration.

After the installation and configuration process is complete, you install OpenSSH Server to connect SSH to this virtual machine with the following commands:

sudo apt install openssh-server
sudo systemctl start ssh
sudo systemctl enable ssh

2. Export virtual machine from On-premise

In this step, we will export the virtual machine to use for the migration to the AWS platform.

Go to VMWare Workstation, select the newly created virtual machine, select File, and select Export to OVF…

Choose the location to save the export file

Wait about 5 minutes to export.

Access to the virtual machine export location, the file we use will be the .vmdk file

Upload virtual machine to AWS

In this step, we will use Amazon S3 to store the virtual machine file that has been exported from the virtualized environment.

Create S3 bucket to store virtual machines

To create an S3 bucket, we perform the following steps:

Access the Amazon S3 Management console.

In the navigation bar, select Buckets.
Select Create bucket to create a new S3 bucket.

On the Create bucket page, set the parameters for the S3 bucket.

Bucket name: Enter the bucket name. This name must be unique and not duplicate. (Example: import-bucket-2023)
Region: Select the storage region of the bucket.

Select Create bucket.

Successful bucket creation

3. Upload virtual machine to S3 Bucket

After creating the bucket, we will proceed to upload the virtual machine file that we exported in the previous section.

Access to the S3 bucket you created above. (Example: import-bucket-2023)
In the Objects section, select Upload

Drag and drop the exported virtual machine file from the on-prem virtualization environment into the window or select Add files to select the virtual machine file. Then select Upload.
You create a virtual machine using VMWare Workstation, the virtual machine file in the example is Ubuntu-disk1.vmdk.

It will take some time for the file to be uploaded to the S3 bucket.

4. Import virtual machine to AWS

In this step, you will create a role named vmimport and import the virtual machine that was uploaded to the S3 Bucket in the previous step into an AMI. The entire process will be handled with the AWS CLI.

Create vmimport role

Before performing the Import of virtual machines into AWS. You need to check the role required for this implementation.

Access the IAM Management console.
In the navigation bar, select Roles

If you do not see the vmimport role, proceed to create the vmimport role.
Create a file named trust-policy.json to allow the VM Import/Export service to accept your upcoming vmimport role.

{
   "Version": "2012-10-17",
   "Statement": [
      {
         "Effect": "Allow",
         "Principal": { "Service": "vmie.amazonaws.com" },
         "Action": "sts:AssumeRole",
         "Condition": {
            "StringEquals":{
               "sts:Externalid": "vmimport"
            }
         }
      }
   ]
}

Use the create-role command to create an IAM role named vmimport and assign trust-policy.json to the parameter --assume-role-policy-document

replace "E:\trust-policy.json" with the path to the trust-policy.json file on your environment

aws iam create-role --role-name vmimport --assume-role-policy-document "file://E:\trust-policy.json"

Check the created role.

See Trust relationships

Create a file role-policy.json containing the following policies to allow the IAM role to access buckets containing virtual machines to exercise the permissions in the "Action" section:. Inside:

disk-image-file-bucket is the name of the S3 bucket used to store the exported files from onpremise (import-bucket-2023 in this example).
export-bucket is the name of the S3 bucket used to export the ec2 instance that will be used for the Export VM from AWS later.

{
   "Version":"2012-10-17",
   "Statement":[
      {
         "Effect": "Allow",
         "Action": [
            "s3:GetBucketLocation",
            "s3:GetObject",
            "s3:ListBucket" 
         ],
         "Resource": [
            "arn:aws:s3:::disk-image-file-bucket",
            "arn:aws:s3:::disk-image-file-bucket/*"
         ]
      },
      {
         "Effect": "Allow",
         "Action": [
            "s3:GetBucketLocation",
            "s3:GetObject",
            "s3:ListBucket",
            "s3:PutObject",
            "s3:GetBucketAcl"
         ],
         "Resource": [
            "arn:aws:s3:::export-bucket",
            "arn:aws:s3:::export-bucket/*"
         ]
      },
      {
         "Effect": "Allow",
         "Action": [
            "ec2:ModifySnapshotAttribute",
            "ec2:CopySnapshot",
            "ec2:RegisterImage",
            "ec2:Describe*"
         ],
         "Resource": "*"
      }
   ]
}

Use the following command to assign the roles described in the role-policy.json file to the created vmimport role

aws iam put-role-policy --role-name vmimport --policy-name vmimport --policy-document "file://E:\role-policy.json"

Check permissions. You can also check to see if the vmimport role has been successfully created by going to the IAM Management Console and selecting the role. You can also edit the role policy directly by selecting Edit policy.

Import virtual machine to AMI

We will use the AWS CLI to launch the Import virtual machine to AMI process.

In Terminal on Linux (or Command Prompt/Power Shell on Windows), run the command aws ec2 import-image to start importing the exported virtual machine and convert it to AMI. The following settings are relevant:

--deescription: Set description for AMI
--disk-ccontainers: Contains information identifying virtual machine files such as:
Format format (eg: vhdx or vmdk)
Storage bucket (eg import-bucket-2023)
File path (e.g. Ubuntu.vhdx or Ubuntu-disk1.vmdk)

aws ec2 import-image --description "VM Image" --disk-containers Format=vhdx,UserBucket="{S3Bucket=import-bucket-2021,S3Key=Ubuntu.vhdx}"

It will take 5-10 minutes depending on the size of the virtual machine for AWS to convert the virtual machine into an AMI.

Once completed, we will see in the AMI list there will be one more AMI with the AMI name being the task id we created above.

You must check that EBS is not Encrypted

5. Deploy Instance from AMI

To deploy the virtual machine from the imported AMI, we perform the following steps:

Access to EC2 Management console.
In the navigation bar, select AMIs.
Select the AMI you just imported from the virtual machine (eg import-ami-08a9efac866dfcb04). Then select Launch.

Name, enter Import-Server

Keep the default AMI.

Keep Instance type and select Create new key pair

Fill in the key pair information and select Create key pair

Leave the default Network settings

Select View all instances

Check the created instance.

Do SSH into the instance.

Select SSH

Complete SSH credentials.

Enter the password.

Complete SSH.

Test ping test.

The following sections

AWS Import/Export - Part 1: Import

AWS Import/Export - Part 2: Export VM from AWS

Get started with CloudFront - Part 4: Lambda@Edge function

Van Hoang Kha — Wed, 01 Mar 2023 21:05:42 +0000

Table of Content

1. Create Lambda@Edge function

In this section, we will create a Lambda@Edge function.

Go to the AWS Console and make sure you are in the US-EAST-1 N. Virginia region.
Go to Lambda console and select Create function

Perform configuration:

Select "Author from scratch"
Select "Create function"
Name: "LambdaEdgeImmersionDayLabFunction"
Runtime: "Node.js 18.x"

Role: "Create new role from AWS policy templates"

Role name: "lambda_edge_execution_role"
Policy templates: "Basic Lambda@Edge permissions (for CloudFront trigger)"
Click "Create function"

Finish creating Lambda function. You have successfully created a new IAM role, which is used to allow CloudFront to invoke Lambda and log to CloudWatch.

Select tab Test

Select Create new test event
Event Name : “TestEvent”

Replace Hello World JSON with the following json:

{
    "Records": [
      {
        "cf": {
          "config": {
            "distributionDomainName": "d123.cloudfront.net",
            "distributionId": "EDFDVBD6EXAMPLE",
            "eventType": "viewer-request",
            "requestId": "MRVMF7KydIvxMWfJIglgwHQwZsbG2IhRJ07sn9AkKUFSHS9EXAMPLE=="
          },
          "request": {
            "clientIp": "2001:0db8:85a3:0:0:8a2e:0370:7334",
            "method": "GET",
            "querystring": "size=large",
            "uri": "/picture.jpg",
            "headers": {
              "host": [
                {
                  "key": "Host",
                  "value": "d111111abcdef8.cloudfront.net"
                }
              ],
              "user-agent": [
                {
                  "key": "User-Agent",
                  "value": "curl/7.51.0"
                }
              ]
            },
            "origin": {
              "custom": {
                "customHeaders": {
                  "my-origin-custom-header": [
                    {
                      "key": "My-Origin-Custom-Header",
                      "value": "Test"
                    }
                  ]
                },
                "domainName": "example.com",
                "keepaliveTimeout": 5,
                "path": "/custom_path",
                "port": 443,
                "protocol": "https",
                "readTimeout": 5,
                "sslProtocols": [
                  "TLSv1",
                  "TLSv1.1"
                ]
              },
              "s3": {
                "authMethod": "origin-access-identity",
                "customHeaders": {
                  "my-origin-custom-header": [
                    {
                      "key": "My-Origin-Custom-Header",
                      "value": "Test"
                    }
                  ]
                },
                "domainName": "my-bucket.s3.amazonaws.com",
                "path": "/s3_path",
                "region": "us-east-1"
              }
            }
          }
        }
      }
    ]
  }

Select Create

Return to the Lambda function interface and select Code

Now we will write a function to generate generated HTML.
Copy and paste the following code into the function code window:

const handler = (event, context, callback) => {
    console.log("Request Event:" + JSON.stringify(event, null, 2));

    const requestHeaders = event.Records[0].cf.request.headers;

    var htmlContent;

    //Insert code to generate the html content content here.

    const response = {
        status: '200',
        statusDescription: 'OK',
        headers: {
            'cache-control': [{
                key: 'Cache-Control',
                value: 'max-age=100'
            }],
            'content-type': [{
                key: 'Content-Type',
                value: 'text/html'
            }],
            'content-encoding': [{
                key: 'Content-Encoding',
                value: 'UTF-8'
            }],
        },
        body: htmlContent,
    };

    callback(null, response);
};

module.exports.handler = handler;

Save
Chọn Deploy
Sau đó chọn Test

View Test Results

Let's see the result of the execution. Notice that the output is a JSON version of the HTTP 200 response that CloudFront will use to respond to the request. In this case, the response is still missing the body.

In the Log output, we can see that the test event we configured is logged as a Request Event on the function's input. This JSON represents the properties of the request received by CloudFront, which can be read or modified. In this exercise, we will read the headers and return the result as a nice HTML table.

Replace the comment with the code needed to generate the HTML body. You can use console.log to output and debug your code.

exports.handler = (event, context, callback) => {
    const requestHeaders = event.Records[0].cf.request.headers;

    let str = '<table border="1" width="100%">' +
              '<thead>' +
                '<tr><td><h1>Header</h1></td><td><h1>Value</h1></td></tr>' +
              '</thead>' +
              '<tbody>';

    for (const key in requestHeaders) {
      if (requestHeaders.hasOwnProperty(key)) {
        str += '<tr><td>' + key + '</td><td>' + requestHeaders[key][0].value + '</td></tr>';
      }
    }

    str += '</tbody></table>';

    const htmlContent = `
      <html lang="en">
        <body>
          <table border="1" width="100%">
            <thead>
              <tr><td><h1>Lambda@Edge Lab</h1></td></tr>
            </thead>
            <tfoot>
              <tr><td>Immersion Days - Edge Services - Module 3</td></tr>
            </tfoot>
            <tbody>
              <tr><td>Response sent by API</td></tr>
            </tbody>
            <tbody>
              <tr><td>${str}</td></tr>
            </tbody>
          </table>
        </body>
      </html>
    `;

    const response = {
      status: '200',
      statusDescription: 'OK',
      headers: {
        'cache-control': [{ key: 'Cache-Control', value: 'max-age=100' }],
        'content-type': [{ key: 'Content-Type', value: 'text/html' }],
        'content-encoding': [{ key: 'Content-Encoding', value: 'UTF-8' }],
      },
      body: htmlContent,
    };

    callback(null, response);
  };

Save
Select Deploy
Select Test

View Test Result

Return to Lambda function, select Versions

Select Push new version

Enter

version 1

and select Publish

Complete Lambda Function creation using CloudFront.

2. Deploy Lambda@Edge function to CloudFront

In this section, we will add CloudFront as a trigger for your Lambda function.

In the same lambda console, you have implemented version 1 of the Lambda function. Click the Add trigger button and select CloudFront.

Click Deploy to Lambda@Edge.

Configure the trigger to use the previously created CloudFront Distribution and Cache Behavior with the following settings:

Distribution:
Cache behavior: "/serverless"
CloudFront event: Origin request
Select "I acknowledge that on deploy a new version of this function will be published with the above trigger and replicated across all available AWS regions."
Click Deploy

Deployment will take approximately 5 minutes to complete for CloudFront distribution. In some cases, you can start testing in less than 5 minutes, depending on your location.

Return to Lambda interface and select Replicas.

Now search for your Lambda function in the Lambda functions list and you will find a Lambda function Replica in us-east-1 for the Lambda function you created.

When you move to other AWS regions, you will find that there is a Lambda function replica in all regions where CloudFront has a Regional Edge Cache. These are the Lambda functions that will be called when your CloudFront distribution executes Lambda@Edge. Once your CloudFront distribution has been deployed, test your CloudFront distribution by accessing Distribution in a browser with a serverless path.

3. Metrics and Logs

To generate traffic from different geographic locations, you can use CloudShell to send HTTP requests. It is a shell environment that includes the curl tool to safely interact with your AWS resources. Send multiple requests using the curl tool to generate traffic to CloudFront from different regions.

Go to the AWS Lambda console and select an AWS region near one of the locations you selected to send requests.

View CloudWatch Logs.

View detailed Log events.

Clean up resources

Delete S3 bucket

Step 1: Log in to the AWS Management Console.
Step 2: Select S3 service.
Step 3: Select the bucket you want to delete.
Step 4: Click the Delete bucket button at the top of the screen.
Step 5: Enter the bucket name in the confirmation box and click Delete.

Note: If the bucket contains any objects, you will not be able to delete the bucket directly. You must delete all objects in the bucket before deleting the bucket. If you want to delete some specific objects, select the object and click the Delete button.

Use the AWS Command Line Interface (CLI) to delete a bucket

You can also use the AWS CLI to delete buckets. Here are the steps to delete a bucket using the AWS CLI:

Step 1: Open Command Prompt or Terminal.
Step 2: Sign in to the AWS CLI.
Step 3: Use the following command to delete the bucket:

aws s3 rb s3://bucket-name --force

Where, bucket-name is the name of the bucket you want to delete. The --force option is used to confirm the deletion of the bucket.

With the steps above, you can delete a bucket in AWS S3 using the user interface or the AWS CLI. Make sure you back up all your data before deleting the bucket, and do this carefully.

Terminate EC2

Step 1: Login to AWS Management Console
- To delete EC2, you first need to log in to the AWS Management Console. This can be done by going to https://aws.amazon.com and logging in with your AWS account.
Step 2: Search for EC2 instance to delete
- After logging in to the AWS Management Console, you need to find the EC2 instance that you want to delete. You can use the search engines or browse the EC2 instance lists to find the instances you want to delete.
Step 3: Delete EC2 instance
Once you find an EC2 instance to delete, you can delete it by performing the following steps:
- Right click on the EC2 instance you want to delete.
- Select "Instance State" from the menu that appears.
- Select "Terminate" to delete EC2 instance.
- You will receive a warning to confirm the deletion of the EC2 instance. If you are sure you want to delete the EC2 instance, select "Yes, Terminate".

Delete CloudFront Distribution

Step 1: Access AWS Console
First, you need to sign in to the AWS Console with your account at https://console.aws.amazon.com/.
Step 2: Select CloudFront . service
After logging in to the AWS Console, you need to select the CloudFront service by clicking the "Services" icon on the top bar and searching for CloudFront. You can enter the keyword "CloudFront" in the search box to find the service faster.
Step 3: Select CloudFront Distribution to delete
In the CloudFront screen, you will see a list of CloudFront Distributions. Find and select the CloudFront Distribution you want to remove by clicking on its name.
Step 4: Delete CloudFront Distribution
After selecting the CloudFront Distribution to delete, you need to click the "Distribution Settings" button. In the distribution settings page you will see a "Delete" button. Click this button and confirm deletion of CloudFront Distribution by entering "Yes" in the confirmation dialog.

Note: When deleting CloudFront Distribution, all data related to it will be deleted from the system and cannot be recovered. Therefore, make sure that you have backed up your important data before performing the delete operation.

Delete Lambda Function

Step 1: Log in to your AWS account and go to the Lambda service management page.
Step 2: Find and select the Lambda Function you want to delete.
Step 3: Click the Actions button and select Delete Function.
Step 4: Confirm deletion by pressing Delete.

Note: You cannot restore a deleted Lambda Function.

Remove Lambda Edge

Step 1: Log in to your AWS account and go to the Lambda service management page.
Step 2: Select the Functions tab and select the Lambda Function used by Lambda Edge.
Step 3: Find and click the Triggers tab and select Edge Association.
Step 4: Click the Delete button and confirm by pressing Yes.

Note: After removing Lambda Edge, you need to wait about 10 minutes for the changes to take effect across the CDN network.

The following sections

Get started with CloudFront - Part 1: CloudFront Distribution

Get started with CloudFront - Part 2: Distribution Invalidations

Get started with CloudFront - Part 3: Response Headers and Cache Behavior

Get started with CloudFront - Part 4: Lambda@Edge function

Get started with CloudFront - Part 3: Response Headers and Cache Behavior

Van Hoang Kha — Wed, 01 Mar 2023 20:17:21 +0000

Table of Content

1. Response Headers

In this section, you will configure the security headers in the S3 response returned by your Distribution CloudFront. You don't need to configure your origin or use Lambda@Edge or CloudFront custom functions to insert these headers. Amazon CloudFront now supports configurable response headers.

Go to the AWS Management Console and select the CloudFront service.

Select the Distributions tab and select your Distributions ID.
In the Behaviors tab, select Default(*) behavior and click the Edit button.

In the "Cache key and origin requests" section, under "Response headers policy - optional", open the drop-down list to see a list of options. Select "Security headers" and click the "Save changes" button.

This step will set up a response policy that matches the security header you added in the previous step. When requests come to CloudFront, security headers are inserted into the S3 response from your Distribution. This helps to protect your website from various attacks.

Update the Inbound rule of the security group, change MyIP to Anywhere

This Management Response Policy will add a set of security headers to all responses that CloudFront sends to viewers. For more information about these security headers, see Mozilla's web security guide.

With this response policy, CloudFront will add X-Content-Type-Options: nosniff to all responses, regardless of whether the response CloudFront receives from Origin contains this header. For all other headers in this policy, if the response CloudFront receives from Origin contains that header, CloudFront uses the header received (and its value) in its response to its viewers. , instead of using the header in this policy.

Return to your site with your CloudFront URL (eg http://dxxxx.cloudfront.net), open your browser's developer tools and check the response headers sent by CloudFront. Security headers added using the response policy that you have configured will be listed in the "Response Headers" section of the response.

You learned how to create a Distribution with multiple origins and multiple behaviors to serve static content and forward dynamic content API to your origin.
You learned how to set up an origin group to provide rerouting in the event of a problem.
You also learned how to set up a custom error page and disable content on the fly.
Finally, you learned about some important CloudFront headers for debugging and how to add a response policy to the response.

Cache Behavior

In this section, you will create a new Cache Behavior in the CloudFront distribution you created. You will use this Cache Behavior to connect the Lambda@Edge function that you will write.

Go to the CloudFront dashboard and select the distribution you created in Part 1.
Go to "Cache Behaviors" tab and click "Create Behavior"

Make the following configuration:

Path : "/serverless"
Origin:

Cache Policy: “Managed-CachingDisabled”

Origin Request Policy: “Managed-AllViewer”
Leave all other settings at default values.

Click “Create”

Finish creating the new Cache Behavior.

The following sections

Get started with CloudFront - Part 1: CloudFront Distribution

Get started with CloudFront - Part 2: Distribution Invalidations

Get started with CloudFront - Part 3: Response Headers and Cache Behavior

Get started with CloudFront - Part 4: Lambda@Edge function

Get started with CloudFront - Part 2: Distribution Invalidations

Van Hoang Kha — Wed, 01 Mar 2023 19:49:08 +0000

Table of Content

1. Test Distribution Invalidations

When using Amazon CloudFront to distribute resources to the website, some resources will be stored in CloudFront's cache to speed up access for users. However, when you make changes to a cached resource but cannot change the URL to point to the new version, you need to perform Invalidations to discard the old version and reload the session. new version from the original server.

Access the Invalidations tab on the CloudFront Console interface.

Create an Invalidation for the index.html resource.

You can specify / in Object paths because we have set index.html as default root object.

Invalidations in progress

Create successful Invalidations

After a few seconds, retry the site using the browser developer tool, you will see that it is no longer cached by CloudFront and reload a new version from the origin server.

Note: Invalidations may take a few minutes to complete, and during that time, users may be able to access an older version of the resource. Therefore, you need to consider and perform Invalidations at the right time to ensure the latest resources are delivered to users.

The data shows that when you perform Invalidations, if a resource is already cached in CloudFront, it will be removed from the cache and a new version will be downloaded from the origin server when the user requests access. access that resource. This helps ensure that users receive the latest version of the resource without having to clear the browser cache or wait for the CloudFront cache to expire.

Using Invalidations in Amazon CloudFront also saves costs and increases the performance of your website. When a resource is stored in CloudFront's cache, downloading it from the origin server consumes a lot of your time and system resources. When you use Invalidations to remove old versions, CloudFront will no longer have to reload these old versions, saving resources and reducing your website's operating costs.

In short, Invalidations is an important tool that helps ensure that users receive the latest version of the resource and helps speed up the website. It also saves resources and lowers your website's operating costs.

2. Custom Error Page

When testing a random URL with your CloudFront domain, you will get a 403 Forbidden response from S3 behind CloudFront because the file doesn't exist. By default, CloudFront temporarily stores this response for 10 seconds.

Create the error.html file on your computer using a text editor with the HTML content below and upload it to your S3 bucket as you did before for the index.html file.

Open a text editor on your computer
If you use Windows, you can use Notepad or Notepad++ to edit text
If you use MacOS, you can use TextEdit or other text editors to edit text
Create error.html file with HTML content below:

<html lang="en">
  <body>
    <h1>CloudFront Lab</h1>
    <strong>Ops, this is a nice error page!</strong>
  </body>
</html>

Save the error.html file with UTF-8 format and give the file an arbitrary name (eg error.html)
Log in to AWS Console and select the S3 . service
Select the S3 bucket where you want to upload the error.html . file

Select "Upload" to upload the error.html file from your computer to the S3 bucket

Wait for the upload to complete

To check if the error.html file has been uploaded successfully, select it on the S3 bucket and preview its contents.

Instructions for configuring a custom error page in CloudFront

To configure a custom error page in CloudFront, you can do the following:

Select the CloudFront Distribution for which you want to configure the custom error page
Select the "Error Pages" tab
Find and select the "Error Pages" tab
Create custom error page
Click "Create custom error response" button

You can configure a custom error page with the following settings.

HTTP error code > 403 Forbidden
Error caching minimum TTL: 60
Customize error response: Yes
Response page path: /error.html
HTTP Response code: 200 OK
Select Create custom error response
- With these settings, when your site encounters an HTTP error > 403 Forbidden, it will display a custom error page previously configured and cache it for at least 60 seconds. Customers visiting your website will receive a custom error response with the path /error.html and the HTTP response code 200 OK.

Create a successful custom error response.

Test your custom error page by requesting a random page from CloudFront. It may take a few minutes for the update to deliver and propagate to the Edge locations. Make sure you use a different random value than in the previous test, or else you will get the same cached version as when you tested in the last 5 minutes.

To check custom error page, follow these steps:
- Open a web browser and visit a random page from CloudFront.
- Wait a few minutes for CloudFront to update and spread the distribution.
- Enter a random value different from the previous test.
- Get HTTP > 403 Forbidden error messages from CloudFront.
- Check if custom error page is displayed or not. If the custom error page is displayed, the configuration is successful.
If you're still getting the default CloudFront error message, double check your custom error page configuration and make sure you've saved the changes. You should also check that your values match the required settings.

Create a new custom error page to display when CloudFront cannot connect to the source. Use the following settings:

HTTP error code > 504 Gateway Timeout
Error caching minimum TTL: 5
Customize error response: Yes
Response page path: /error.html
HTTP Response code: 200 OK
Select Create custom error response

Finish creating 2 Error pages.

Change Inbound rule of Security group

Access to EC2 Console.
At the EC2 Console interface, select Security Groups in the left panel.
Select Security Group containing Inbound rule to access EC2 instance running Nodejs API.

Edit Inbound rule for HTTP from 0.0.0.0/0 to MyIP

Select the Save Rules button to save the changes made.

Edit Security group successfully.

Open a web browser and enter the CloudFront URL of the index.html page in the address bar.

Press Enter to access the website.
Check if the website is working properly or not.
You will see the interface as shown

3. Create Origin Group

In this section, you will configure an Origin Group to provide rerouting in the event of a problem. You can associate an Origin Group with a caching behavior so that requests are routed from the primary source to the secondary source for high availability.

Go to the S3 dashboard, create a new S3 bucket in a different area

Give the S3 bucket a unique name, remember that the S3 bucket name is globally unique, so add a personalization suffix, for example:

cloudfrontlab-s3bucket-secondary-<YourNameHere>

Select Create bucket

Create a secondary-index.html file on your computer with the HTML content below:

<html lang="en">
  <body>
    <h1>CloudFront Lab</h1>
    <strong>Hi, this is a page from my secondary Origin! We now support Origin group and failover!</strong>
  </body>
</html>

Open a web browser and log in to the S3 console.
- Select the name of the S3 bucket that you want to upload the file to.
- Click the "Upload" button in the upper right corner of the web page.
- Select the secondary-index.html file from your computer by clicking the "Add files" button or dragging and dropping the file into the upload area.
- Click the "Upload" button to upload your secondary-index.html file to S3.

Upload successful.

Go to your AWS account and select the CloudFront service.

Find and select the CloudFront Distribution for which you want to configure the origin group.
Create a new origin by selecting the "Create Origin" option

Choose your origin domain name and select the new S3 bucket containing the secondary-index.html file.

Set up access to the S3 bucket by selecting "Yes, use OAI" and selecting "Select" to select the OAI you created earlier.

Update the bucket policy by selecting "Yes, update the bucket policy".
Select Create origin

Create origin successfully. Click the Create Origin Group button to create a new Origin Group.

Make origin group configuration. Select the source from the drop-down list and click the Add button to add the source to the Origin Group.

Use cloudfrontlab-s3bucket-* as primary origin
And cloudfrontlab-s3bucket-secondary- as secondary origin
For failover criteria, select 403 Forbidden and 404 Not Found.
Click the Create origin group button to finish adding the source to the Origin Group.

Once done, you have successfully added the source to Origin Group on CloudFront. When the primary source fails, CloudFront automatically redirects to the second source to ensure service continuity.

Edit default behavior on CloudFront to use new Origin Group

- Select the Behaviors tab
- Select Default(*) and click the Edit button to edit the default behavior of the distribution.

Select the Origin Group created in the previous step.

Click the Save changes button to save the changes.
Once done, CloudFront will use the new Origin Group as the source when accessing the distribution. You can test failover functionality by trying to visit the website and temporarily disconnecting from the network to check if CloudFront redirects to the second source.

Once the distribution status is changed to Deployed, you can request the secondary-index.html site from CloudFront. If CloudFront is working correctly, you should see the second S3 origin serving your request.
- Open a web browser and access the URL of the CloudFront distribution.
- Change the URL from /index.html to /secondary-index.html to request the site from the second S3 origin.
- Check if the web page has been uploaded from the second S3 origin. If the web page is properly uploaded and displayed, it is an indication that CloudFront is working correctly and redirects to the second S3 origin when necessary.
- Note: If the site is not uploaded or displayed incorrectly, double check your settings to make sure it is properly configured and working as expected.

The following sections

Get started with CloudFront - Part 1: CloudFront Distribution

Get started with CloudFront - Part 2: Distribution Invalidations

Get started with CloudFront - Part 3: Response Headers and Cache Behavior

Get started with CloudFront - Part 4: Lambda@Edge function

Get started with CloudFront - Part 1: CloudFront Distribution

Van Hoang Kha — Tue, 28 Feb 2023 19:10:38 +0000

Overview

Amazon CloudFront is the static and dynamic content delivery service of Amazon Web Services (AWS). With the ability to increase the speed and stability of your web applications, Amazon CloudFront provides a temporary storage solution for your content on Amazon Edge servers.

Amazon CloudFront is customizable and flexible allowing you to configure features such as EC2 and S3 Origins, CloudFront Distribution, Custom Error Page, Origin Group, Response Headers, create new cache behavior, create Lambda@Edge function and deploy Lambda@Edge function to CloudFront. This increases content availability and reduces response times.

In addition, Amazon CloudFront provides features that monitor and analyze the performance of content delivered through this service. By logging in to S3 and using tools like Amazon Athena and Amazon Redshift, you can easily monitor and analyze the performance of your assets.

To help you better understand Amazon CloudFront, let's look at some of its features and usage:

EC2 and S3 Origins: Amazon CloudFront allows you to connect content from EC2 or S3. This increases the speed and reduces the response time of your web application.
CloudFront Distribution: To use Amazon CloudFront, you need to create a distribution. Distribution is a collection of Amazon's Edge servers, on which your content is temporarily stored.
Custom Error Page: You can customize your error page to be compatible with your website.
Origin Group: If you have multiple Origin servers, you can configure them into a group. CloudFront will automatically switch to other servers in the pool if the origin server crashes.
Response Headers: You can configure HTTP response headers to customize client requests.
Create a new cache behavior: If you want to create a new cache behavior, you need to configure its features on the origin server or by using Lambda@Edge.
Create Lambda@Edge function: If you want to process a CloudFront request, you can use the Lambda@Edge function.
Deploy Lambda@Edge to CloudFront: You can deploy your Lambda@Edge function to CloudFront using the AWS CLI.
Metrics and Logs: Amazon CloudFront provides features to monitor and analyze the performance of content delivered through this service. By logging in to S3 and using tools like Amazon Athena and Amazon Redshift, you can easily monitor and analyze the performance of your assets.

As such, Amazon CloudFront is a great service to increase the speed and stability of your web application. With its features and strengths, Amazon CloudFront is a reliable and flexible content delivery solution.

Best practice

To get the most out of Amazon CloudFront's potential, there are a few best practices that you should follow:

Use S3 Bucket or EC2 Instance as Origin: Using S3 Bucket or EC2 Instance as Origin for your CloudFront Distribution will increase response speed and reduce bandwidth costs.
Use SSL/TLS Encryption: Use SSL/TLS Encryption to protect data in transit between Origin and Edge Locations. You can use a free or paid SSL certificate to ensure the security of your data.
Use Compression: Use compression in CloudFront Distribution to reduce file size and speed up page loading.
Use CloudFront Behaviors: Create CloudFront Behaviors to customize how CloudFront handles requests. For example, you can create a cache behavior to optimize performance for GET or HEAD requests.
Use Caching: Use the caching feature in CloudFront to reduce page load times and reduce bandwidth costs. You can configure the cache to cache resources temporarily and reduce the number of requests to the origin.
Use Lambda@Edge: Use Lambda@Edge to customize and process customer requests on CloudFront. Lambda@Edge provides the ability to add, modify, or remove HTTP headers or resources on your site.
Use AWS WAF: Use AWS WAF to protect your applications on CloudFront. AWS WAF provides security policies, filters, and access management for your applications.
Use CloudFront Logs: Use the logging feature in CloudFront to monitor and analyze the performance of your delivered assets. You can use data analytics tools, like Amazon Athena or Amazon Redshift, to analyze logs and make smart business decisions.

Preparation steps

To get the most out of Amazon CloudFront, you need to create origins for your content. These origins will contain data and are used by CloudFront to deliver content to end users. The two primary origins for use with Amazon CloudFront are Amazon S3 (Simple Storage Service) and Amazon EC2 (Elastic Compute Cloud).

Amazon S3 (Simple Storage Service): If you are using Amazon S3 to store content, you can create an S3 bucket as the origin for CloudFront. An S3 bucket is a simple storage space for storing objects such as images, videos, or documents. After creating an S3 bucket, you can inject objects into it and use this S3 bucket as the origin for CloudFront.
Amazon EC2 (Elastic Compute Cloud): If you are using Amazon EC2 to run your application, you can create an EC2 instance as the origin for CloudFront. An EC2 instance is a virtual machine running on Amazon's cloud platform. After creating an EC2 instance, you can install and configure your application on it, and then use this EC2 instance as the origin for CloudFront.

Originating your content is essential to using Amazon CloudFront effectively. If you are using Amazon S3 or Amazon EC2, it is very simple to create an origin for CloudFront. Using these sources makes it possible to quickly and securely distribute your content.

Content

Create EC2

Amazon EC2 (Elastic Compute Cloud): If you are using Amazon EC2 to run your application, you can create an EC2 instance as the origin for CloudFront. An EC2 instance is a virtual machine running on Amazon's cloud platform. After creating an EC2 instance, you can install and configure your application on it, and then use this EC2 instance as the origin for CloudFront.

Access to EC2

Select Instances
Select Launch instances

Enter the instance name

Select AMI as Amazon Linux

Select t2.micro

Select Create new key pair

Enter the key name and select Create key pair

Configure networking

Select VPC
Create security group
Configure security according to the picture

Scroll down to the User data section, enter the following script:

#!/bin/bash
#Update the system and install Node.js

yum update -y
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
yum install -y nodejs

#Install PM2 and Express
npm install pm2@latest -g
npm install express --save

#Create and configure the Express app
cat <<'EOF' >> app.js
let express = require('express');
let app = express();

app.get('/api', (req, res) => {
  console.log(JSON.stringify(req.headers));
  let message = {
    timestamp: new Date().toISOString(),
    headers: req.headers,
  };
  res.json(message);
});

app.listen(80, () => {
  console.log('api is up!');
});
EOF


#Start the app with PM2
sudo pm2 start ./app.js
sudo pm2 startup systemd
sudo pm2 save

#Enable PM2 to start on system boot
systemctl enable --now pm2-root.service

Select Launch instance

Successful EC2 Creation

View the details of the newly created EC2.

Copy Public IPv4 DNS

Use Public IPv4 DNS included with /api

Create S3

Click the Create bucket button to start the process of creating a new bucket.

Enter the bucket name. The bucket name must be unique throughout the S3 system and cannot contain spaces.

Select the storage area (Region) for the bucket. The storage area will affect the access speed and hosting price. You should choose an area close to the user to optimize access speed.

Select other options as needed. AWS provides many options for configuring the bucket, such as encrypting data, sharing the bucket with other users, configuring access permissions, and more.

Click the Create bucket button to complete the bucket creation process.

After creating the bucket, you can access the bucket and add, delete, and edit files in it. To access the bucket, you can use the browser or the AWS SDK management tools.

Instructions to create index.html file on Amazon S3

Create file index.html

Open a text editor on your computer and create a new file named index.html. Paste the following HTML content into this file:

<!DOCTYPE html>
<html lang="en">
  <body>
    <table border="1" width="100%">
      <thead>
        <tr>
          <td><h1>CloudFront Lab</h1></td>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Immersion Days - Edge Services - Module 1</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Response sent by API</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>
            <iframe src="/api" style="width: 100%; height: 100%"></iframe>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Save the index.html file to an easy-to-remember address on your computer.

Upload index.html file to Amazon S3

Go to the Amazon S3 console and select the bucket that was created.

At the bucket interface, click the Upload button to upload the index.html file.

In the next window, click the Add files button and select the index.html file from your computer. Then, click the Next button to go to the next page.

On this page, leave all default settings and click the Next button again. Continue to set other settings and click the Upload button to complete the upload.

Check the index.html . file

When accessing the index.html file using the Object URL provided by Amazon S3.

You will see an access denied message because the file is not configured for public access.

Create CloudFront Distribution

Go to CloudFront on the AWS console and click Create a CloudFront Distribution.

Configure the default source for the previously created S3 bucket and grant CloudFront access to the bucket using the Origin Access Identity setup:

Origin domain > Select your S3 bucket
Access S3 bucket > Yes using OAI (bucket can limit access only to CloudFront)

Origin access identity

Click Create new OAI

In the displayed dialog, click Create

Policy bucket > Yes, update the bucket policy

Configure the Default Cache Behavior as follows:

View protocol policy > Redirect HTTP to HTTPS.

Cache key and origin requests

Cache policy and origin request policy (recommended)
Cache policy > CachingOptimized (Recommended for S3 source) CloudFront provides a set of managed cache policies that you can attach to any cache behavior of your distribution. With a managed cache policy, you don't need to write or maintain your own cache policy. Management policies use settings optimized for specific use cases.

In the Settings section:

In this lab you will use a domain name provided by CloudFront, however, if you want to use your own domain name, you can configure it with Alternate Domain Names , you can add a new entry in the section Alternate domain name (CNAME) - optional.
Configure the Default root object - optionally index.html- And leave all remaining values as default

Click Create distribution

Create a successful CloudFront distribution.

CloudFront starts creating the distribution and it usually takes 5 to 10 minutes to fully deliver. The status of the delivery will be In Progress. To check the status, you can click on the Distribution menu on the left sidebar.

Add EC2 Origin

Access the CloudFront distribution management page.

Select the distribution ID corresponding to the site you want to configure.
Select the Origins tab.
Check existing origins. If you already have an origin, press the Create Origin button to add a new origin.
At the Origins page, click the Create Origin button to create a new origin for the API.

Enter the DNS name of the EC2 instance in the Origin Domain Name field. Configure by setting Origin Protocol Policy to HTTP only.

Keep defaults and select Additional settings

Increase keep alive timeout to 60 seconds.

Note that although we want to serve content over HTTPS to users, we want to keep the HTTP connection to origin to minimize the overhead of TLS.

Select Create origin

Create origin successfully

Configure a second Behavior cache to use EC2's origin with the following parameters to use CloudFront as a proxy and ignore any cache classes.

Path pattern > /api

Origin and origin groups > Select previously created EC2 Origin

Viewer protocol policy > Redirect HTTP to HTTPS

Cache key and origin requests

Cache policy and origin request policy (recommended)
Cache policy > CachingDisabled
Origin request policy - options -> AllViewer
In the above configuration, we use two types of management policy, CachingDisabled is a managed cache policy -- this policy disables cache, it is useful for dynamic content and for requests that cannot be handled cached -- and AllViewer is an origin-managed request policy -- this policy includes all values (header, cookie and query string) in the viewer's request.

Select Create behavior

Create successful behavior.

Check the application

When you create a new CloudFront distribution, it will be in progress and it will take some time to spread to all the points of presence globally. However, you can check if the distribution is ready for local use by looking up its CloudFront domain with the nslookup command in the command line. When you lookup a CloudFront domain, CloudFront returns multiple IP addresses to increase application availability.
Once the distribution has reached all points of presence, the delivery's status will change to deployed (deployed) and you can use it on your web browser using your own CloudFront URL.
Access to EC2

Make a connection to EC2.

Once the distribution is complete, you can test your web page on your browser served by CloudFront using your CloudFront URL http://dxxxx.cloudfront.net.

In the web page, you can see the various headers that CloudFront forwarded and attached to your API endpoint:

x-amz-cf-id: A unique id for this request provided by CloudFront. If you refresh the site you will see that the request id changes. It's useful to log it on your web server in general. Additionally, this id will be sent back to every viewer request and sent to the CloudFront access log. If you need to debug any issue, you can open a support ticket and give them the request id.
Notice how CloudFront redirected the request to HTTPS.

If you use your favorite web browser development tools, you can check the response headers sent by CloudFront. Three notable titles to check out:

x-amz-cf-id: Contains the request id assigned by CloudFront.
x-amz-cf-pop: Indicates the location of the CloudFront edge that served your request. Each edge position is identified by a three-letter code and an arbitrary number, for example, DFW3. The three-letter code usually corresponds to the International Air Transport Association airport code for an airport near the edge location.
x-cache: Indicates whether the request was evaluated as a pass or fail. Normally for your html file you will get 'Hit from Cloudfront' value in subsequent requests, but always 'Miss from CloudFront' for /api request because caching has been disabled for this behavior.

This means that if you visit your site again, the request will be retrieved from the cache and returned with the results stored in it instead of having to reload from the original server, improving time. load pages and increase performance. However, if you make changes to your site, you may want to refresh the cache to ensure that your users see the latest changes.

In case you need to access the distribution from a different geographic region, you can use CloudFront's alternate domains, including domain names for each of the different geographies. This helps ensure that users in each region are served by their nearest CloudFront edge, which optimizes page load times and minimizes latency.

If you need to create a copy of an existing CloudFront distribution, you can use the clone feature to create an exact copy of the current distribution. This can be useful when you need to serve another version of your website or application at the same time, or when you need to deal with any issues with an existing distribution.
When you need to set up access policies to limit access to your distribution, you can use CloudFront's access management feature. This allows you to set up access policies based on IP address, domain name, HTTP method and more, helping to ensure that only authorized users can access your distribution. Friend.
Finally, if you need assistance from the AWS technical team, you can open a support ticket and provide details about your issue, including CloudFront request IDs and other information about your issue. your distribution. The AWS technical team will try to assist you in resolving your issue as soon as possible.

The following sections

Get started with CloudFront - Part 1: CloudFront Distribution

Get started with CloudFront - Part 2: Distribution Invalidations

Get started with CloudFront - Part 3: Response Headers and Cache Behavior

Get started with CloudFront - Part 4: Lambda@Edge function