Series · 16 phần
AWS cho Frontend Developer
Series tiếng Việt 16 phần giải thích chính xác điều gì xảy ra với file và request của bạn sau khi rời máy local lên AWS, viết cho frontend developer chưa từng mở AWS Console. Chặng tư duy bắt đầu bằng vòng đời một request qua Route 53, CloudFront, S3, ALB và backend, rồi lấp những lỗ hổng nền tảng hay gặp nhất: DNS, HTTPS và ACM, HTTP header, CORS tận gốc, VPC và Security Group ở mức đủ dùng. Chặng S3 và CloudFront là trọng tâm: bucket và hai cách phục vụ file, upload build đúng cách, presigned URL, behavior và cache key, chiến lược cache chuẩn, invalidation, sửa lỗi F5 bị 403 cho SPA, CloudFront Functions và Lambda@Edge, signed URL. Chặng backend đứng sau đi qua ALB với health check và bảng mã lỗi, các nơi chạy code từ EC2, ECS, Lambda tới Amplify, bốn con đường deploy Next.js, API Gateway và Cognito. Chặng vận hành bao biến môi trường build-time và runtime, CI/CD với GitHub Actions và OIDC, preview environment, giám sát và sổ tay debug sáu bước, bảo mật, hiệu năng và chi phí, rồi khép lại bằng lộ trình tám tuần, năm dự án thực hành, từ điển, checklist production và câu hỏi phỏng vấn.
01 Tư duy và nền tảng web
Từ npm run dev sang hạ tầng, vòng đời một request, Region và Edge Location, IAM tối thiểu, rồi DNS với Route 53, HTTPS với ACM, HTTP header, CORS, VPC và Security Group.
-
Mở đầu series: điều gì xảy ra với file và request sau khi rời localhost, sơ đồ vòng đời một request qua Route 53, CloudFront, S3 và ALB, Region và Edge Location, IAM tối thiểu, lab thiết lập tài khoản và lộ trình 16 phần.
- 02 AWS cho Frontend Developer · Phần 2 — DNS với Route 53, HTTPS với ACM và HTTP header phải đọc được
Bốn loại bản ghi DNS bạn thật sự dùng, ALIAS khác CNAME chỗ nào, hosted zone và TTL, xin chứng chỉ ACM đúng region bằng DNS validation, và bảng HTTP header mà 80% việc debug trên AWS xoay quanh.
-
CORS là luật của trình duyệt chứ không phải server: preflight, bảng ai trả header CORS trên AWS, bẫy CloudFront trả nhầm header, cách né CORS bằng cùng origin, rồi VPC, subnet và Security Group đủ để hiểu vì sao API treo rồi 504.
02 S3 và CloudFront
Nơi file build thực sự nằm, upload build và presigned URL, rồi CDN, behavior, cache key, chiến lược cache, invalidation, SPA routing, edge function và signed URL.
-
S3 là object storage chứ không phải hệ thống file: bucket, key, metadata, vì sao không có thư mục thật, hai cách phục vụ file và cái 403 gây hiểu nhầm, OAC để bucket kín hoàn toàn, script sync hai bước với Cache-Control đúng từng loại file.
-
Cho user upload thẳng lên S3 mà backend không chịu tải: ký presigned PUT bằng SDK v3, PUT bằng fetch trần, bốn lỗi kinh điển, presigned POST giới hạn dung lượng, CORS bucket, rồi Versioning và lifecycle làm lưới an toàn, kết bằng Lab 3.1.
-
Distribution, origin, behavior, cache key: behavior xét theo thứ tự và lỗi POST /api bị 403, cache key quá hẹp thì trả nhầm dữ liệu, quá rộng thì CDN vô dụng, managed policy nên dùng và cách phân biệt Cache Policy với Origin Request Policy.
-
Bảng Cache-Control chuẩn cho từng loại file, vì sao asset không bao giờ cần invalidate còn index.html thì có, dùng invalidation đúng liều, và hai cách sửa dứt điểm lỗi F5 bị 403/404 của SPA: Custom Error Response hoặc CloudFront Function.
-
Chọn CloudFront Functions hay Lambda@Edge, security header không cần code bằng Response Headers Policy, bật nén brotli đúng cách, signed URL và signed cookie cho nội dung trả phí, sổ tay lỗi CloudFront và Lab 4.1 dựng distribution đầy đủ.
03 Backend đứng sau
ALB với health check, timeout và bảng mã lỗi; các nơi chạy code từ EC2, ECS, Lambda tới Amplify và bốn con đường deploy Next.js; API Gateway và Cognito.
-
ALB đứng giữa CloudFront và backend: listener, rule, target group, health check quyết định web sống hay chết, chuỗi timeout 30s/60s, bảng mã lỗi 502/503/504 đọc là biết lỗi của ai, và X-Forwarded-Proto gây mixed content.
- 10 AWS cho Frontend Developer · Phần 10 — Nơi code chạy: EC2, ECS, Lambda, Amplify và deploy Next.js
So sánh EC2, ECS Fargate, Lambda, App Runner và Amplify Hosting; ba kiểu render CSR/SSG/SSR lên AWS thế nào; bốn con đường deploy Next.js kèm Dockerfile chạy được; và ba kiến trúc tham chiếu từ SPA tĩnh tới SSR.
-
Khi nào API Gateway thay ALB, HTTP API và REST API khác gì, bẫy stage trong URL, rồi Cognito: User Pool, App Client, ba loại token, lưu token ở đâu cho an toàn và đoạn interceptor refresh token bạn sẽ cần.
04 Cấu hình, CI/CD và vận hành
Biến môi trường build-time và runtime, pipeline GitHub Actions với OIDC và preview environment, giám sát và sổ tay debug, bảo mật, hiệu năng và chi phí.
-
VITE_*, NEXT_PUBLIC_*, REACT_APP_* không phải bí mật vì nằm nguyên văn trong bundle. So build-time với runtime, mẫu config.json để một bản build chạy mọi môi trường, và chỗ đặt secret thật: SSM, Secrets Manager, proxy ở backend.
-
Pipeline frontend chuẩn 8 bước, vì sao upload asset trước HTML, cấp quyền AWS cho GitHub Actions bằng OIDC không cần access key, workflow deploy hoàn chỉnh, preview environment cho mỗi PR và chiến lược rollback trong 2 phút.
-
Trên AWS "không hoạt động" là câu vô nghĩa: bạn phải chỉ ra chặng nào hỏng. Bài này liệt kê nguồn thông tin và metric nên theo dõi, quy trình chẩn đoán 6 bước, bộ lệnh curl/aws nên thuộc lòng và bảng tra cứu triệu chứng → nguyên nhân.
-
Sáu security header nên có và cách gắn qua Response Headers Policy, CSP cho SPA đi từ Report-Only, AWS WAF đáng bật gì, bảy đòn bẩy hiệu năng CloudFront, rồi hoá đơn: cái gì tốn tiền, ước tính ba kịch bản và checklist tự bảo vệ.
05 Lộ trình và tra cứu
Lộ trình tám tuần, năm dự án thực hành, từ điển thuật ngữ, checklist trước khi lên production và câu hỏi phỏng vấn thường gặp.
-
Bài khép series: lộ trình 8 tuần với tiêu chí hoàn thành từng tuần, năm dự án thực hành để bỏ vào CV, từ điển thuật ngữ, checklist trước khi lên production và mười câu hỏi phỏng vấn thường gặp kèm câu trả lời.