🚀 สร้างระบบ Full-stack Web App: React/Angular + API Gateway + Lambda + DynamoDB

Sharing is caring!

บทนำ

ในยุคที่เว็บแอปพลิเคชันต้องรองรับผู้ใช้จำนวนมาก ระบบต้องถูกออกแบบให้สามารถ “ขยายตัวได้ง่าย” (Scalable), “ไม่ต้องดูแลเครื่องเอง” (Serverless), และ “พัฒนาได้รวดเร็ว” วันนี้เราจะมาดูกันว่า Developer สามารถสร้างระบบ Full-stack Web App ด้วยเทคโนโลยี React / Angular บนฝั่งหน้าเว็บ และ API Gateway + Lambda + DynamoDB บนฝั่งหลังบ้านได้อย่างไร

1. สถาปัตยกรรมของระบบ

ระบบ Full-stack ที่เราจะสร้างจะประกอบด้วย 4 ส่วนหลักดังนี้:

1. Frontend: React หรือ Angular (Static Hosting บน S3 + CloudFront)
2. Backend: AWS Lambda + API Gateway
3. Database: DynamoDB (NoSQL Database)
4. Authentication: AWS Cognito (ถ้ามีผู้ใช้ล็อกอิน)

2. สร้าง Frontend ด้วย React / Angular

สำหรับตัวอย่างนี้เราจะใช้ React แต่แนวคิดเดียวกันสามารถใช้กับ Angular ได้เช่นกัน เริ่มต้นด้วยการสร้างโปรเจค React:

npx create-react-app my-aws-webapp
cd my-aws-webapp
npm start
    

จากนั้นสร้างไฟล์ src/api.js เพื่อเชื่อมต่อกับ API Gateway:

// src/api.js
const API_URL = "https://your-api-id.execute-api.ap-southeast-1.amazonaws.com/prod";

export async function getItems() {
  const res = await fetch(`${API_URL}/items`);
  return res.json();
}

export async function addItem(data) {
  const res = await fetch(`${API_URL}/items`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  return res.json();
}
    

3. สร้าง API ด้วย API Gateway + Lambda

API Gateway จะทำหน้าที่เป็น “ทางเข้า” ของทุก Request จาก Frontend และจะเชื่อมต่อไปยัง AWS Lambda ซึ่งเราจะเขียนโค้ด Backend Logic ด้วย Node.js ตัวอย่างโค้ด Lambda ฟังก์ชัน:

// index.js
const AWS = require("aws-sdk");
const dynamo = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {
  const method = event.httpMethod;

  if (method === "GET") {
    const result = await dynamo.scan({ TableName: "ItemsTable" }).promise();
    return { statusCode: 200, body: JSON.stringify(result.Items) };
  }

  if (method === "POST") {
    const item = JSON.parse(event.body);
    await dynamo.put({ TableName: "ItemsTable", Item: item }).promise();
    return { statusCode: 200, body: JSON.stringify(item) };
  }

  return { statusCode: 400, body: "Unsupported method" };
};
    

4. ตั้งค่า DynamoDB Table

DynamoDB เป็น NoSQL Database ที่เหมาะกับระบบแบบ Serverless เราสามารถสร้าง Table ได้ง่ายผ่าน AWS Console หรือ CLI:

aws dynamodb create-table \
  --table-name ItemsTable \
  --attribute-definitions AttributeName=id,AttributeType=S \
  --key-schema AttributeName=id,KeyType=HASH \
  --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=5
    

5. เชื่อมโยง API Gateway กับ Lambda

หลังจากสร้าง Lambda แล้ว ให้เชื่อมกับ API Gateway โดยกำหนด Resource เช่น:

• GET /items → เรียกฟังก์ชัน Lambda เพื่ออ่านข้อมูล
• POST /items → เรียกฟังก์ชัน Lambda เพื่อเพิ่มข้อมูล

6. Deploy และทดสอบ API

ใช้ AWS Console หรือ CLI ในการ Deploy API:

aws apigateway create-deployment \
  --rest-api-id abcd1234 \
  --stage-name prod
    

จากนั้นลองเรียก API ผ่าน Postman หรือ curl:

curl https://your-api-id.execute-api.ap-southeast-1.amazonaws.com/prod/items
    

7. Deploy Frontend ขึ้น AWS S3 + CloudFront

หลังจาก build แอปแล้ว ให้นำไฟล์ขึ้น S3:

npm run build
aws s3 sync build/ s3://my-frontend-bucket
    

แล้วเชื่อมกับ CloudFront เพื่อให้ผู้ใช้เข้าถึงได้เร็วจากทั่วโลก

8. การทำ Observability และ Logging

ใช้ CloudWatch ในการเก็บ Logs ของ Lambda และ Metrics ของ API Gateway เพื่อดูประสิทธิภาพและตรวจสอบข้อผิดพลาด

9. สรุปภาพรวมระบบ Full-stack

เมื่อทุกส่วนเชื่อมต่อกัน เราจะได้ระบบ Full-stack ที่สามารถรองรับผู้ใช้จำนวนมาก มีการ Scale อัตโนมัติ และไม่ต้องดูแล Server เอง เหมาะกับทั้ง Web Application, Dashboard, หรือระบบ Enterprise

📘 บทความโดย King Pool

ภาพประกอบ: AWS Lambda, API Gateway, DynamoDB, React/Angular Integration

อ่านต่อ: การออกแบบระบบ Serverless Architecture ที่รองรับหลักล้าน Request