[Vibe Coding Thực Chiến #11] Đưa Web Ra Biển Lớn: Trỏ Tên Miền Riêng, Cấp SSL Let's Encrypt Tự Động & Cấu Hình Token Sharing Đa Tên Miền!
Tác giả: Lee
Series: Vibe Coding Thực Chiến Cùng EzyPlatform (#11)
Hạ tầng thực nghiệm: VPS Ubuntu 22.04 LTS (157.66.47.xxx) | Domain Admin:https://1576647xxx-admin.interdata.io.vn
Bộ công cụ: VS Code + Extensionyoungmonkeys.ezyarticle+ Claude Code CLI / Codex + Cloudflare DNS + EzySupport SSL
Ở bài viết số #10, chúng ta đã khép kín toàn bộ chu trình bán hàng thực chiến: khách vừa bấm đặt bánh trên website, Telegram nhóm nội bộ của chủ shop lập tức nổ "ting ting" sau 1.2s và hòm thư khách hàng nhận ngay hóa đơn điện tử HTML sang trọng.
Thế nhưng, nếu bạn gửi cho khách hàng một đường link dạng địa chỉ IP thô http://157.66.47.xxx hoặc một subdomain kỹ thuật dài ngoằng, trình duyệt sẽ lập tức hiện cảnh báo đỏ lòm: "Not Secure - Kết nối của bạn không an toàn".
Chắc chắn 99% khách hàng sẽ đóng tab ngay lập tức và không bao giờ dám nhập thông tin mua sắm!
"Làm sao để trỏ tên miền thương hiệu riêng (
lepetitbakery.vn) về VPS? Làm sao để kích hoạt kết nối bảo mật HTTPS (SSL Let's Encrypt) miễn phí mà không cần phải SSH vào máy chủ gõ lệnh certbot đau đầu? Và tại sao khi đổi tên miền thì màn hình Preview trong VS Code lại bị trắng tinh do lỗi Cookie?"
Trong bài viết số #11 này, mình sẽ cùng bạn giải quyết dứt điểm các bài toán hạ tầng Production: Trỏ DNS siêu tốc ➔ Cấp SSL Let's Encrypt 1-click qua EzySupport ➔ Khóa chặt cơ chế Token Sharing đa tên miền ➔ Bàn giao website sẵn sàng đón hàng ngàn khách hàng!
1. Kiến trúc Tên Miền & Cơ chế Cấp SSL Tự Động Trên EzyPlatform
Nhiều anh em dev khi nghe đến việc trỏ tên miền và cấp chứng chỉ SSL thường rất ngại vì nghĩ đến cảnh phải SSH vào Ubuntu, cài đặt certbot, viết file cấu hình VirtualHost Nginx, rồi lo lắng chứng chỉ hết hạn sau 90 ngày làm sập web.
Với hệ sinh thái EzyPlatform, plugin EzySupport đã tích hợp sẵn ACME Client để tự động hóa 100% quy trình này:
Luồng phân giải: Khách gõ tên miền ➔ Cloudflare DNS phân giải IP VPS ➔ EzySupport cấp SSL 1-click ➔ Nginx Reverse Proxy phân luồng an toàn.
Luồng điều hướng chuyên nghiệp giữa 2 tầng:
- Tên miền chính (
lepetitbakery.vn): Dành riêng cho khách hàng ghé thăm, xem thực đơn và đặt bánh. - Subdomain quản trị (
admin.lepetitbakery.vnhoặc subdomain kỹ thuật): Dành riêng cho quản trị viên và dev quản lý dữ liệu, phân quyền bảo mật độc lập.
2. Bí kíp sống còn: Cơ chế Token Sharing Đa Subdomain
Đây là lỗi kinh điển khiến 80% anh em mới làm việc với EzyPlatform bị "vò đầu bứt tai":
"Tại sao mình đăng nhập vào trang Admin thì mượt mà, nhưng khi mở sang trang web xem trước (Preview Iframe trong VS Code) thì lại bị trắng tinh hoặc bắt đăng nhập lại liên tục?"
Nguyên nhân nằm ở chính sách bảo mật SameSite / Third-Party Cookies của các trình duyệt hiện đại (Chrome 120+, Safari):
So sánh: Cookie Host-Only làm văng session khi chuyển trang, trong khi Token Sharing Domain chia sẻ token mượt mà giữa mọi subdomain.
- Nếu không cấu hình Token Sharing: Cookie đăng nhập chỉ có phạm vi ở đúng host đó (
admin.lepetitbakery.vn). Khi mở trang con ở domain khác hoặc iframe, trình duyệt từ chối gửi cookie ➔ Lỗi 401 Unauthorized hoặc trắng màn hình. - Giải pháp chuẩn mực của EzyPlatform: Khai báo cặp domain
lepetitbakery.vn:.lepetitbakery.vntrong cấu hình máy chủ. Cookie sẽ được gắn thuộc tínhDomain=.lepetitbakery.vn; SameSite=Lax; Secure, cho phép toàn bộ subdomain dùng chung phiên làm việc an toàn 100%!
3. Thực chiến 4 bước: Từ tên miền trần đến website khóa xanh hoàn hảo
Bây giờ, hãy cùng mình mở DNS Management và EzyPlatform Admin lên để cấu hình nhé!
Bước 1: Cấu hình bản ghi DNS trỏ về IP VPS 157.66.47.xxx
Đăng nhập vào trình quản lý DNS của bạn (Cloudflare, Namecheap, PA Vietnam, v.v.) và thêm 3 bản ghi cơ bản:
Cấu hình bản ghi A và CNAME trỏ về IP VPS 157.66.47.xxx với chế độ DNS Only.
| Type | Name | Content (IPv4) | TTL | Proxy Status |
|---|---|---|---|---|
| A | @ |
157.66.47.xxx |
Auto | DNS only |
| CNAME | www |
lepetitbakery.vn |
Auto | DNS only |
| A | admin |
157.66.47.xxx |
Auto | DNS only |
(Bí kíp 💡): Trong lần đầu cấp chứng chỉ SSL qua EzyPlatform, hãy để chế độ DNS only (đám mây màu xám trên Cloudflare) để Let's Encrypt xác thực chứng chỉ trực tiếp với máy chủ VPS mà không bị chặn bởi proxy trung gian.
Bước 2: Kích hoạt SSL Let's Encrypt 1-Click qua plugin EzySupport
Mở trang quản trị EzyPlatform, vào mục EzySupport > SSL Manager:
Chứng chỉ SSL Let's Encrypt được cấp phát thành công kèm tính năng tự động gia hạn 30 ngày trước khi hết hạn.
Chỉ cần nhập tên miền lepetitbakery.vn, admin.lepetitbakery.vn và bấm nút "Issue Certificate". Hệ thống tự động:
- Giao tiếp với máy chủ Let's Encrypt qua giao thức ACME.
- Xác thực quyền sở hữu tên miền trong 10 giây.
- Tự động nạp chứng chỉ SSL vào Nginx và kích hoạt HTTPS ngay lập tức mà không cần khởi động lại máy chủ!
Bước 3: Cấu hình Token Sharing & Allowed CORS trong /settings/regular
Để tránh lỗi văng phiên làm việc và trắng màn hình Preview, hãy truy cập vào menu Settings > Regular:
Thiết lập Token Sharing Domains và danh sách CORS Allowed Origins chuẩn mực.
Điền chính xác các giá trị:
- Token Sharing Domains:
lepetitbakery.vn:.lepetitbakery.vn, 1576647xxx-admin.interdata.io.vn:.interdata.io.vn - Allowed CORS Origins:
https://lepetitbakery.vn, https://admin.lepetitbakery.vn - Allowed Upload MIME Types: Bổ sung
image/svg+xml, text/css, application/javascript, font/woff2, image/webpđể không bị chặn upload ảnh bánh ngọt hay font chữ.
Bấm "Lưu Thiết Lập". Toàn bộ hệ thống giờ đây đã đồng bộ phiên làm việc xuyên suốt giữa các subdomain!
Bước 4: Kiểm tra thành quả trực quan với kết nối bảo mật HTTPS
Bây giờ, hãy mở tab ẩn danh trên Chrome và truy cập vào https://lepetitbakery.vn:
Website đạt chuẩn bảo mật HTTPS A+, tốc độ phản hồi TTFB chỉ 115ms và sẵn sàng phục vụ khách hàng!
Biểu tượng bảo mật xuất hiện kiêu hãnh trên thanh địa chỉ. Chứng chỉ bảo mật cấp bởi Let's Encrypt hợp lệ, toàn bộ luồng thanh toán và dữ liệu giỏ hàng được mã hóa SSL 2048-bit an toàn tuyệt đối! 🎉
4. 3 bẫy lỗi kinh điển khi Go-Live & Cách né 😡
Dù quy trình rất đơn giản, anh em dev vẫn thường gặp phải 3 lỗi "dở khóc dở cười" này:
Bẫy lỗi #1: Lỗi "Mixed Content" khiến kết nối HTTPS bị cảnh báo không an toàn (Broken Padlock) 😣
- Hiện tượng: Truy cập qua HTTPS nhưng trình duyệt hiện cảnh báo tam giác vàng hoặc ổ khóa bị gạch chéo: "Trang web này không an toàn hoàn toàn (Mixed Content)" và tự động chặn tài nguyên không mã hóa.
- Nguyên nhân: Trong file
head.htmlhoặccontent.html, bạn nhúng ảnh, font hoặc file script bằng đường dẫn tuyệt đối bắt đầu bằnghttp://(ví dụ:http://fonts.googleapis.com/...hoặchttp://157.66.47.xxx/media/...). - Cách né (Recommend 👍): Luôn dùng giao thức tương đối (
//fonts.googleapis.com/...) hoặc bắt đầu bằnghttps://. Trong EzyPlatform, luôn dùng các thuộc tính chuẩnezy:msrcvàezy:mhrefđể hệ thống tự động sinh link bảo mật.
Bẫy lỗi #2: Vòng lặp chuyển hướng vô tận (ERR_TOO_MANY_REDIRECTS) 😡
- Hiện tượng: Vừa bật đám mây màu cam (Proxy) trên Cloudflare xong, web lập tức sập với lỗi:
ERR_TOO_MANY_REDIRECTS. - Nguyên nhân: Cloudflare đang để chế độ SSL là Flexible (Cloudflare nối tới VPS bằng HTTP port 80), trong khi Nginx trên VPS lại ép chuyển hướng
HTTP ➔ HTTPS port 443, tạo thành một vòng lặp vĩnh cửu. - Cách né (Bí kíp 💡): Trên Cloudflare, vào mục SSL/TLS, chuyển chế độ mã hóa sang Full (Strict). Lúc này Cloudflare sẽ kết nối an toàn tới chứng chỉ Let's Encrypt thật trên VPS của bạn.
Bẫy lỗi #3: Quên dấu chấm . phía trước trong Token Sharing Domain ⚠️
- Hiện tượng: Điền
lepetitbakery.vn:lepetitbakery.vn(thiếu dấu chấm trước domain đích). Khi vào subdomainadmin., cookie không được chia sẻ và trang web tiếp tục bị trắng. - Cách né (Lưu ý ⚠️): Cú pháp chuẩn của RFC 6265 Cookie Specification bắt buộc phải có dấu chấm phía trước domain bao quát:
domain.com:.domain.com.
5. Checklist 10 Điểm Vàng Trước Khi Bàn Giao Web Cho Khách 📋
Trước khi chính thức gửi link website cho đối tác hoặc chạy quảng cáo bán hàng, hãy dành 5 phút kiểm tra lại bảng checklist sau:
| STT | Hạng mục kiểm tra | Tiêu chuẩn đạt | Trạng thái |
|---|---|---|---|
| 1 | SSL HTTPS | Khóa xanh hợp lệ, không có cảnh báo bảo mật | ✔ Đạt |
| 2 | Mixed Content | Không chứa bất kỳ link tài nguyên http:// nào |
✔ Đạt |
| 3 | Token Sharing | Iframe Preview VS Code và Admin không bị văng session | ✔ Đạt |
| 4 | Favicon & Logo | Hiển thị sắc nét trên tab trình duyệt (PNG/SVG) | ✔ Đạt |
| 5 | SEO Meta Tags | Có thẻ title, meta description và og:image |
✔ Đạt |
| 6 | Mobile Responsive | Menu, nút bấm, giỏ hàng không bị tràn ngang trên điện thoại | ✔ Đạt |
| 7 | Dark Mode FOUC | Chuyển chế độ không bị chớp trắng màn hình | ✔ Đạt |
| 8 | Webhook Telegram | Bấm đặt thử đơn hàng ➔ Telegram nổ tin nhắn sau < 2s | ✔ Đạt |
| 9 | Email Invoice | Khách nhận được email hóa đơn đẹp mắt, không vào Spam | ✔ Đạt |
| 10 | Tốc độ tải trang | TTFB < 200ms trên hạ tầng VPS | ✔ Đạt |
6. Tổng kết & Kỳ tiếp theo
Việc trỏ tên miền thương hiệu riêng và kích hoạt kết nối bảo mật HTTPS là cột mốc biến sản phẩm Vibe Coding của bạn từ một "dự án cá nhân thử nghiệm" thành một nền tảng kinh doanh sẵn sàng tạo ra doanh thu thực tế!
🎯 3 bài học cốt lõi từ bài viết này:
- SSL 1-Click với EzySupport: Xóa bỏ hoàn toàn nỗi sợ gõ lệnh certbot trong terminal.
- Token Sharing Domain là bí quyết sống còn: Cú pháp
domain.com:.domain.comgiúp phiên làm việc và iframe preview mượt mà 100%. - Luôn rà soát checklist 10 điểm vàng: Đảm bảo không dính bẫy Mixed Content hay lỗi vòng lặp chuyển hướng Cloudflare trước khi Go-Live.
Ở bài viết tiếp theo, chúng ta sẽ mở rộng hệ sinh thái thanh toán và người dùng lên tầm cao mới:
👉 [Vibe Coding Thực Chiến #12] Mở Rộng Hệ Sinh Thái: Tích Hợp Cổng Thanh Toán VietQR / VNPay Sandbox & Đăng Nhập 1 Chạm Google OAuth!
Chúng ta sẽ cho AI kết nối tính năng tạo mã VietQR động theo từng đơn hàng (khách quét mã chuyển khoản là đơn tự đổi sang "ĐÃ THANH TOÁN") và kích hoạt tính năng đăng nhập 1 chạm qua Google chỉ trong vài dòng cấu hình!
💬 Góc thảo luận: Anh em thích quản lý DNS trực tiếp trên nhà cung cấp tên miền hay qua Cloudflare? Đã bao giờ anh em bị "vật" bởi lỗi trắng màn hình iframe do cookie SameSite chưa? Hãy cùng chia sẻ kinh nghiệm bên dưới nhé!
Nếu thấy bài viết này hữu ích, đừng quên bấm Upvote 👍 và Bookmark (Clip) 🔖 để đón đọc tiếp Bài #12 nhé. Chúc anh em Vibe Coding thật thăng hoa!
All rights reserved
