Triển Khai Nginx Reverse Proxy Trên AWS EC2 Cho Ứng Dụng Fullstack | Giải Mã DevOps #11

Ở video trước mình đã nói Nginx, Reverse Proxy và Load Balancer là gì. Video này mình làm thật: dựng một EC2 riêng chạy Nginx làm cửa vào duy nhất cho Frontend (Next.js) và Backend (Spring Boot), truy cập bằng tên miền thay cho IP:port, rồi đóng cửa sau của app-server. 🚀 GIẢI MÃ DEVOPS CHO NGƯỜI MỚI #11: THỰC HÀNH NGINX REVERSE PROXY TRÊN AWS EC2 Trong video này: • Tạo EC2 proxy-server (t3.micro) và Security Group proxy-sg, cùng VPC với app-server và database-server • Cài Nginx bằng user ubuntu + sudo, test từng lớp: trên chính máy (curl localhost), rồi từ trình duyệt • Cây thư mục /etc/nginx: nginx.conf, include, sites-available và sites-enabled (symlink) • Trang "Welcome to nginx" đến từ đâu, sửa thử và reload • Từ proxy-server gọi được app-server qua Private IP chưa (curl :3000, :8080) • Viết cấu hình reverse proxy cho Frontend và Backend: server_name, proxy_pass, 4 header • Trỏ tên miền bằng file hosts trên Windows: 2 tên miền cùng một IP, Nginx chia theo Host • Sửa Frontend và Backend cho địa chỉ mới, lỗi CORS • Gỡ lỗi 404 do gõ sai server_name • Đóng cửa sau: app-server chỉ cho proxy-server vào 3000 và 8080 ⏱️ NỘI DUNG 00:00 Kiến trúc hôm nay: proxy-server đứng trước app-server 02:00 Tạo EC2 proxy-server và Security Group proxy-sg 04:00 Cài Nginx bằng user ubuntu (không dùng root) 05:25 Test Nginx trên chính máy: curl localhost 06:10 Mở port 80 và vào bằng trình duyệt 06:45 Cây thư mục /etc/nginx: sites-available và sites-enabled 11:00 Trang Welcome đến từ đâu? Sửa thử và reload 13:40 Chạy lại Frontend, Backend sau khi stop/start máy 15:05 Từ proxy-server gọi được app-server chưa? 15:45 Viết cấu hình reverse proxy: server_name, proxy_pass, 4 header 17:30 Cấu hình Backend và bật site bằng symlink 18:50 Trỏ tên miền bằng file hosts trên Windows 20:10 Web lên rồi nhưng lỗi CORS 20:40 Sửa Frontend gọi tên miền API, build lại 22:20 Sửa CORS ở Backend, build lại 23:55 Đăng nhập vẫn lỗi: Nginx trả 404 24:30 Sửa server_name gõ sai, reload 26:30 Đóng cửa sau: app-server chỉ cho proxy-server vào 27:50 Tổng kết, video tiếp theo 📋 FILE CẤU HÌNH NGINX (/etc/nginx/sites-available/online-course-fe) server { listen 80; listen [::]:80; server_name online-course.eliopham.online; location / { proxy_pass http://APP_PRIVATE_IP:3000; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } File online-course-be giống hệt, chỉ khác server_name api-online-course.eliopham.online và proxy_pass trỏ đến APP_PRIVATE_IP tại port 8080. Bật site bằng lệnh: sudo ln -s /etc/nginx/sites-available/online-course-fe /etc/nginx/sites-enabled/ sudo nginx -t && sudo systemctl reload nginx 🔎 ĐỌC LỖI ĐỂ BIẾT KẸT Ở ĐÂU • Web lên nhưng đăng nhập báo lỗi + CORS trong tab Network → Frontend và Backend giờ là hai tên miền khác nhau, Backend chưa cho phép origin của Frontend (CORS_ALLOWED_ORIGINS) • 404 Not Found trang trắng của nginx → Host của request không khớp server_name nào. Trong video là do gõ sai server_name của file Backend • Trình duyệt vào IP của proxy mãi không được → Security Group proxy-sg chưa mở port 80 📌 ĐÍNH CHÍNH Ở khoảng 23:15 mình nói "tách cấu hình ra biến môi trường thì không cần build lại". Điều này đúng với Backend (đổi giá trị chỉ cần restart), nhưng với Frontend Next.js thì biến NEXT_PUBLIC_* được nhúng vào file JS lúc build, nên đổi giá trị vẫn phải build lại. Mình sẽ nói rõ hơn ở video sau. ⚠️ LƯU Ý KHI LÀM THEO • Thay APP_PRIVATE_IP bằng Private IP của app-server của bạn (chạy hostname -I trên app-server) • Tên miền trong video chỉ trỏ bằng file hosts trên máy mình. Chưa có DNS thật và HTTPS, phần đó ở video tiếp theo • Nên chạy sudo nginx -t trước mỗi lần reload để bắt lỗi cú pháp • Trong video, SSH (port 22) của proxy-sg và app-sg đang mở cho mọi nơi để demo. Môi trường thật nên giới hạn về IP của bạn • Backend và Frontend chạy bằng nohup và PM2 nên sẽ không tự chạy lại khi máy khởi động. Cách bền hơn là systemd • Trên Chrome gõ đầy đủ http:// khi vào IP hoặc tên miền • Làm xong nhớ Stop / Terminate instance, xoá Security Group và VPC. Public IPv4 trên AWS cũng tính phí theo giờ 💻 SOURCE CODE Backend (Spring Boot): https://github.com/huypham67/course-o... Frontend (Next.js): https://github.com/huypham67/online-c... 📺 SERIES GIẢI MÃ DEVOPS CHO NGƯỜI MỚI ⏮ Tập trước (#10):    • Nginx là gì? Reverse Proxy và Load Balance...   ▶️ Xem từ tập 1:    • Code chạy ở Local rồi, sao người khác khôn...   ⏭ Tập tiếp theo (#12): Domain thật và HTTPS với Certbot, sắp ra mắt, subscribe để không bỏ lỡ nhé! 👨‍💻 HUY PHẠM ENGINEERING · @huypham.engineering Chia sẻ kiến thức về Software Engineering, Backend, Database, DevOps, Cloud và System Design. #DevOps #Nginx #ReverseProxy #AWS #EC2 #Linux #Backend #SystemDesign #deployment