☁️ Bước 1 của deployment

Hosting cho frontend

Hosting là nơi đặt giao diện app để nó chạy trên internet. Thay vì tự dựng máy chủ, bạn dùng dịch vụ chuyên hosting: đẩy code lên, nó tự build và cho bạn một đường link.

Nhớ một điều: với app vibe coding, hầu hết hosting frontend đều miễn phí lúc bắt đầu và nối thẳng với GitHub để tự cập nhật.
Code trên GitHubmã nguồn app
Nguồn
↓hosting tự build↓
App có đường linkchạy trên internet
Live
▲Vercel
◆Netlify
🟧Cloudflare
Giới thiệu

Hosting frontend là gì?

Hiểu ngắn: một dịch vụ nhận code giao diện của bạn, dựng nó thành trang web, rồi phục vụ cho mọi người qua một đường link.

☁️ Nơi giao diện app sống

Hosting frontend lo giúp bạn:

  • Nhận code (thường từ GitHub) và tự build.
  • Phân phối app qua mạng lưới toàn cầu cho nhanh.
  • Cấp đường link và khóa bảo mật HTTPS sẵn.
  • Tự deploy lại mỗi khi bạn cập nhật code.

🙌 Vì sao hợp người vibe coding

Bạn không cần làm gì phức tạp:

  • Miễn phí lúc bắt đầu, đủ cho học và app nhỏ.
  • Nối GitHub một lần, sau đó tự động.
  • Không phải quản máy chủ, không lo cập nhật hệ thống.
  • AI rất quen các nền này nên hỗ trợ tốt.
Ẩn dụ dễ nhớ: Build giống như nấu món ăn từ nguyên liệu (code), còn hosting là cái nhà hàng bày món đó ra cho khách. Bạn đưa nguyên liệu, nhà hàng lo nấu và phục vụ.
Các lựa chọn phổ biến

Vài nơi hosting frontend hay dùng

Cập nhật 2026. Cả bốn đều có gói miễn phí và nối GitHub. Khác nhau ở thế mạnh.

🟧
Cloudflare Pages

Băng thông không giới hạn, rất nhanh nhờ mạng lưới lớn, không lo hóa đơn bất ngờ. Lựa chọn tiết kiệm và mạnh.

▲
Vercel

Trải nghiệm làm việc mượt nhất, đặc biệt hợp với Next.js. Bảng điều khiển và preview rất tiện.

◆
Netlify

Lâu đời, nhiều tính năng kèm theo như form, function. Dễ dùng cho người mới.

🐙
GitHub Pages

Đơn giản nhất, miễn phí, hợp trang tĩnh, tài liệu, trang cá nhân. Ít tính năng nâng cao.

Chưa biết chọn nền nào? Có trang riêng so sánh chi tiết theo tiêu chí và gợi ý theo nhu cầu.

So sánh & chọn nơi deploy →
Phần chính

Các bước deploy frontend

Trình tự chung ở mức khái niệm. Hầu hết các nền đều theo lối này.

1

Đưa code lên GitHub

Lưu mã nguồn app vào một repository trên GitHub.

Vì sao: đa số hosting lấy code từ GitHub để tự build và deploy.
2

Nối hosting với repo

Trên Vercel, Netlify hay Cloudflare Pages, chọn repo của bạn để kết nối.

Vì sao: kết nối một lần, sau đó cập nhật là tự deploy.
3

Khai báo cách build

Cho hosting biết lệnh build và thư mục kết quả. Đa số nền tự nhận ra, hoặc AI giúp điền.

Vì sao: build đúng thì app mới hiện ra đúng.
4

Khai báo environment variable

Nếu app cần khóa hay đường nối backend, điền vào phần cấu hình của hosting.

Vì sao: thiếu bước này là lỗi deploy kinh điển (xem trang Env).
5

Deploy và lấy link

Bấm deploy, chờ build xong, bạn có một đường link công khai để mở app.

Vì sao: đây là lúc app bước ra internet.
6

Gắn tên miền & kiểm tra

Gắn domain riêng nếu muốn, rồi mở thử trên máy và điện thoại xem chạy đúng không.

Vì sao: link mặc định hơi dài, tên miền riêng dễ nhớ và chuyên nghiệp hơn.
Sát thực tế

Khác biệt từng nền khi deploy

Các bước trên giống nhau ở mọi nền. Đây là vài điểm hơi khác để bạn đỡ bỡ ngỡ. Muốn so sánh để chọn, xem trang So sánh.

🟧

Cloudflare Pages

Nối GitHub rồi chọn preset. Thường cần khai lệnh build và thư mục kết quả. Có thể chọn sẵn khung (framework preset) cho nhanh.

▲

Vercel

Gần như không phải cấu hình. Tự nhận ra khung app, mỗi nhánh tự tạo bản xem trước. Mượt nhất với Next.js.

◆

Netlify

Cấu hình bằng giao diện hoặc một file riêng. Có cả cách kéo thả thư mục để deploy nhanh. Nhiều tính năng kèm.

🐙

GitHub Pages

Deploy thẳng từ một nhánh trên GitHub. Chỉ cho trang tĩnh. Lưu ý đường dẫn có thể nằm trong tên repo nên cần để ý đường dẫn gốc.

Cho đủ bản đồ

Deploy lên AWS / Google Cloud có khác không?

Có. Cloud lớn cũng host được frontend, nhưng đi theo hai đường, một đường gần giống khung chung, một đường thủ công hơn.

✅ Đường "managed" - gần giống khung chung

  • AWS Amplify Hosting và Firebase Hosting.
  • Nối GitHub hoặc dùng một lệnh để đưa lên, rồi tự build và ra link.
  • Gần như các bước bạn đã học, chỉ khác giao diện.
  • Nếu buộc dùng cloud lớn cho frontend, hãy ưu tiên đường này.

🧱 Đường "ghép gạch thô" - thủ công hơn

  • AWS: S3 (kho file) + CloudFront (CDN). GCP: Cloud Storage + CDN.
  • Tự build ở máy, rồi tải các file kết quả lên kho lưu trữ.
  • Đặt một CDN phía trước cho nhanh, và tự lo làm mới cache mỗi lần cập nhật.
  • Nhiều bước, dễ sai, hợp người đã rành cloud.
Chốt cho dễ nhớ: Với app vibe coding, bốn nền chuyên dụng ở trên là đủ và dễ nhất. Chỉ chọn AWS hay Google Cloud khi bạn đã ở sẵn trong hệ đó hoặc quy mô doanh nghiệp, và khi đó nên đi đường "managed" cho gần với khung chung. Tầng này nặng và hay đổi, nên khi tới đó hãy xem tài liệu chính thức của từng nền.
Phòng trước cho đỡ khổ

Lỗi thường gặp & mẹo nhờ AI

Người mới hay vấp đúng vài chỗ này khi deploy frontend.

🏗️

Build lỗi trên hosting

Chạy máy mình thì ổn nhưng hosting build hỏng, thường do thiếu khai báo hoặc sai lệnh build.

Cách sửa: đọc build log, điền đúng lệnh build và thư mục kết quả.
🧩

Quên environment variable

App lên link nhưng trắng trang hoặc không nối được backend vì thiếu khóa.

Cách sửa: khai báo lại mọi env trong cấu hình hosting (xem trang Env).
🔗

Đường dẫn sai khi lên link

Ảnh hoặc trang con bị vỡ vì dùng đường dẫn chỉ đúng trên máy mình.

Cách sửa: dùng đường dẫn tương đối, kiểm tra lại sau khi deploy.
💤

Quên là phải deploy lại

Sửa code xong nhưng quên đẩy lên, link cũ vẫn là bản cũ.

Cách sửa: bật tự deploy theo GitHub để mỗi lần sửa tự cập nhật (xem trang CI/CD).
Ví dụ cách giao việc cho AI "Hãy giúp tôi deploy app này lên Cloudflare Pages từ GitHub. Cho tôi biết lệnh build và thư mục kết quả cần khai báo, và nhắc tôi những environment variable nào phải điền trên hosting."

Hosting biến code thành một đường link ai cũng mở được.

Chọn một nền hợp với bạn, nối GitHub, khai báo env, là app đã ra internet. Bước tiếp theo là cho nó một cái tên đẹp.

← Về trang chủ deployment · Phong Ho - AI Business