Xây Dựng ứng Dụng Web Cơ Bản - Amazon AWS

Skip to main content Build a Basic Web Application

TUTORIAL

Introduction

Create Web App

Build Serverless Function

Create Data Table

Link Serverless Function to Web App

Add interactivity to Web App

Clean up Resources

Introduction: Build a Basic Web Application

Follow step-by-step instructions to build your first web application

Overview

In this tutorial, you will learn to create a simple full-stack web application using AWS Amplify. Throughout this tutorial, you will build and host a React application on AWS, use Amplify to add authentication, data, and a serverless function to capture the signed-up user's email and save it in the database. Then, you will implement a frontend for your app that integrates with your cloud resources.

What you will accomplish

In this tutorial, you will:

• Host: Build and deploy a React application on the AWS global content delivery network (CDN).
• Authenticate: Add authentication to your app to enable sign-in and sign-out functionality.
• Database: Integrate a real-time API, database, and a serverless function.
• Function: Implement a lambda function that is triggered when a user signs up to the App.

Prerequisites

Before starting this tutorial, you will need:

• An AWS account: if you don't already have one follow the Setup Your Environment tutorial.
• Your AWS profile configured for local development.
• Installed on your environment: Nodejs and npm.
• Familiarity with Git and a Github account.

AWS experience

Beginner

Minimum time to complete

35 minutes

Cost to complete

Free Tier eligible

Requires

• AWS Account with administrator-level access*
• AWS profile configured
• Nodejs and npm
• A Github account

[*]Accounts created within the past 24 hours might not yet have access to the services required for this tutorial.

Services used

AWS Amplify, AWS AppSync, AWS Lambda, and Amazon DynamoDB

Last updated

July 12, 2024

Application architecture

The following diagram provides a visual representation of the services used in this tutorial and how they are connected. This application uses AWS Amplify, GraphQL API, AWS Lambda, and Amazon DynamoDB.

As you go through the tutorial, you will learn about the services in detail and find resources that will help you get up to speed with them.

Tasks

This tutorial is divided into six tasks. You must complete each task in order before moving on to the next one.

1. Create Web App (5 minutes): Deploy static resources for your web application using the AWS Amplify Console.
2. Build Serverless Function (5 minutes): Build a serverless function using AWS Lambda.
3. Create Data Table (10 minutes): Persist data in an Amazon DynamoDB table.
4. Link Serverless Function to Web App (5 minutes): Deploy your serverless function with API Gateway.
5. Add Interactivity to Web App (5 minutes): Modify your web app to invoke your API.
6. Clean Up Resources (5 minutes): Clean up resources used in this tutorial.

You will be building this web application using the AWS Management Console accessible directly from your browser.

Was this page helpful?

Feedback Close Thank you for your feedback Feedback helps us improve our experience. If you would like to share more details on the feedback, please click the feedback button below. Feedback Start Task One

Create Web App

Ending Support for Internet Explorer

Got it AWS support for Internet Explorer ends on 07/31/2022. Supported browsers are Chrome, Firefox, Edge, and Safari. Learn more » Got it