Mục tiêu

Biến app từ “chỉ mình thấy” thành “cả thế giới thấy” — có link URL thật, gửi cho ai cũng mở được.

Sau bài này, bạn sẽ:

• ✅ Hiểu deploy là gì và tại sao cần deploy
• ✅ Deploy được app bằng 1 click trên Bolt.new hoặc Lovable
• ✅ Deploy qua Vercel để có link chuyên nghiệp hơn
• ✅ Biết cách kiểm tra app sau deploy và xử lý lỗi cơ bản

Nội dung chính

6.1 — Deploy là gì?

Ẩn dụ: App hiện tại giống như một bức tranh bạn vẽ ở nhà. Deploy là mang bức tranh đó treo lên phòng triển lãm — ai cũng có thể đến xem.

Khi bạn “deploy” (phát hành), app của bạn được đặt lên một máy chủ (server) trên internet. Bất kỳ ai có link đều truy cập được.

Trước deploy vs Sau deploy:

	Trước deploy	Sau deploy
Ai thấy được?	Chỉ mình bạn (trên Bolt.new)	Bất kỳ ai có link
Link dạng gì?	Không có link chia sẻ	ten-app.vercel.app hoặc ten-app.bolt.new
Mở trên điện thoại?	Phải mở Bolt.new	Mở link bình thường như mọi website
Gửi cho khách hàng?	Không được	Được — chuyên nghiệp

Mẹo: Deploy không có nghĩa là app phải hoàn hảo. Nhiều người chờ “app xong 100%” mới deploy — đó là sai lầm. Hãy deploy sớm, nhờ người khác dùng thử, rồi cải thiện dần.

6.2 — Cách 1: Deploy trực tiếp từ Bolt.new (1 phút)

Đây là cách nhanh nhất — chỉ cần 3 bước:

Bước 1: Trong Bolt.new, sau khi app đã chạy đúng, tìm nút “Deploy” ở góc trên bên phải

Bước 2: Bấm nút Deploy → Bolt.new sẽ:

• Tự đóng gói code
• Upload lên server
• Tạo link cho bạn

Bước 3: Chờ 30-60 giây → Nhận link dạng ten-app-cua-ban.bolt.new

Tương tự với Lovable:

Bước 1: Bấm nút “Publish” ở góc trên bên phải

Bước 2: Chọn tên cho subdomain (ví dụ: ca-phe-saigon) → link sẽ là ca-phe-saigon.lovable.app

Bước 3: Bấm Publish → Chờ 30 giây → Done!

Bạn sẽ nhận được link dạng: ten-app-cua-ban.bolt.new hoặc ten-app.lovable.app

Mẹo: Sau khi deploy, hãy mở link trên một trình duyệt khác (hoặc chế độ ẩn danh / incognito) để kiểm tra xem app có hoạt động đúng cho người dùng mới không — đôi khi app chạy tốt trên máy bạn nhưng lỗi khi người khác mở.

6.3 — Cách 2: Deploy qua Vercel (chuyên nghiệp hơn)

Nếu muốn link đẹp hơn hoặc cần nhiều quyền kiểm soát, hãy dùng Vercel — nền tảng deploy phổ biến nhất cho web app.

Tại sao chọn Vercel?

	Deploy trên Bolt.new	Deploy trên Vercel
Tốc độ	Nhanh hơn (1 click)	Cần thêm vài bước
Link	ten-app.bolt.new	ten-app.vercel.app
Gắn tên miền riêng	❌	✅ (ví dụ: app.binhdanai.com)
Miễn phí	Giới hạn	Rất rộng rãi cho cá nhân
Cập nhật app	Phải deploy lại trên Bolt.new	Cập nhật tự động khi sửa code

Hướng dẫn từng bước — Deploy Bolt.new → Vercel:

Bước 1 — Tạo tài khoản Vercel:

1. Vào vercel.com
2. Bấm “Sign Up”
3. Chọn “Continue with GitHub” (nếu chưa có GitHub, tạo tại github.com — miễn phí)
4. Cho phép Vercel truy cập GitHub

Bước 2 — Export code từ Bolt.new:

1. Trong Bolt.new, bấm nút “Export” (thường ở menu hoặc góc trên)
2. Chọn “Download as ZIP” hoặc “Push to GitHub”
3. Nếu chọn “Push to GitHub”: Bolt.new sẽ tạo repository trên GitHub cho bạn — đây là cách dễ nhất

Mẹo: Nên chọn “Push to GitHub” thay vì “Download as ZIP”. Vì khi đã có trên GitHub, Vercel sẽ tự động cập nhật mỗi khi bạn sửa code — không cần deploy lại thủ công.

Bước 3 — Import vào Vercel:

1. Vào vercel.com/new
2. Chọn “Import Git Repository”
3. Tìm repository vừa tạo từ Bolt.new
4. Bấm “Import”

Bước 4 — Deploy:

1. Vercel sẽ tự nhận diện framework (React, Next.js, v.v.)
2. Giữ nguyên tất cả cài đặt mặc định — không cần thay đổi gì
3. Bấm “Deploy”
4. Chờ 1-2 phút → Nhận link dạng: ten-app.vercel.app

Bước 5 — Kiểm tra:

1. Mở link trên máy tính → kiểm tra giao diện + chức năng
2. Mở link trên điện thoại → kiểm tra responsive
3. Gửi link cho 1 người bạn → hỏi họ mở được không

6.4 — Gắn tên miền riêng (Custom Domain) — Nâng cấp

Nếu bạn muốn link chuyên nghiệp hơn thay vì ten-app.vercel.app, bạn có thể gắn tên miền riêng.

Ví dụ:

• Thay vì: ca-phe-saigon.vercel.app
• Thành: order.caphesaigon.vn

Các bước cơ bản:

1. Mua tên miền tại các nhà cung cấp:

   • Quốc tế: Namecheap (~150k/năm cho .com)
   • Việt Nam: Tenten.vn hoặc MatBao.net (~350k/năm cho .vn)

2. Kết nối với Vercel:

   • Vào project trên Vercel → Settings → Domains
   • Nhập tên miền → Vercel sẽ hướng dẫn bạn cấu hình DNS
   • Thường chỉ cần thêm 1-2 bản ghi DNS theo hướng dẫn

Chưa cần làm ngay. Ở Course 2, bạn sẽ học kỹ hơn về domain và DNS. Bài này chỉ cần bạn biết là có thể làm được — khi cần thì quay lại.

6.5 — Checklist sau deploy

Sau khi deploy, hãy kiểm tra theo danh sách này:

#	Kiểm tra	Cách kiểm tra
1	App load được	Mở link → không bị trắng/lỗi
2	Trên điện thoại	Mở link trên mobile → giao diện không vỡ
3	Tốc độ tải	Trang load trong 3 giây đầu
4	Các nút hoạt động	Bấm thử tất cả nút → đúng chức năng
5	Người khác mở được	Gửi link cho 1 người → họ mở thành công

6.6 — Chia sẻ thành quả

Khi đã có link, hãy:

• Gửi cho bạn bè / đồng nghiệp dùng thử
• Mở trên điện thoại kiểm tra hiển thị
• Đăng lên nhóm học tập kèm mô tả: “Tôi làm cái này bằng AI trong X phút”

Prompt mẫu để AI viết mô tả chia sẻ:

Viết cho tôi 1 đoạn mô tả ngắn (3-4 câu) để đăng lên Facebook/Zalo
giới thiệu app [tên app] mà tôi vừa tạo bằng AI.

Tone: tự hào nhưng khiêm tốn, không quá khoe khoang.
Kèm link: [link app]
Nhấn mạnh: tôi không biết code, tạo bằng AI trong [X] phút.

Lỗi thường gặp

Vấn đề: App bị trắng sau deploy — trên Bolt.new chạy tốt nhưng deploy xong mở link chỉ thấy trang trắng. → Nguyên nhân phổ biến nhất là lỗi đường dẫn (path). Thử mở Console (F12) trên trang deploy xem có lỗi đỏ không. Gửi lỗi cho AI kèm prompt: “App chạy tốt trên Bolt.new nhưng deploy lên Vercel bị trắng. Lỗi console: [paste lỗi]. Hãy sửa để app hoạt động khi deploy.”

Vấn đề: Link deploy mở được nhưng hình ảnh không hiện. → Hình ảnh có thể đang dùng đường dẫn local. Gửi prompt cho AI: “Sau khi deploy, tất cả hình ảnh không hiện. Hãy đảm bảo tất cả hình ảnh dùng URL đầy đủ hoặc đường dẫn tương đối đúng.”

Vấn đề: Deploy thành công nhưng app cũ, không phải phiên bản mới nhất. → Clear cache trình duyệt (Ctrl + Shift + R hoặc Cmd + Shift + R). Nếu vẫn cũ, kiểm tra xem bạn đã push code mới lên GitHub chưa.

Vấn đề: Vercel báo lỗi “Build Failed” khi deploy. → Copy nguyên dòng lỗi từ Vercel build log, paste vào Bolt.new/AI chat: “Khi deploy lên Vercel, build bị lỗi: [paste lỗi]. Hãy sửa code để build thành công.” Sau khi sửa, push code lại lên GitHub — Vercel sẽ tự deploy lại.

Vấn đề: App load rất chậm trên điện thoại (hơn 5 giây). → Gửi prompt: “Tối ưu tốc độ tải app: nén hình ảnh, lazy load hình, giảm bớt animation nặng.”

Bài tập thực hành — Đồ án cuối khoá

Nhiệm vụ: Deploy app tốt nhất bạn đã tạo trong suốt khoá học.

Bước 1 — Chọn app và kiểm tra (⏱️ 5 phút):

• Chọn app bạn tự hào nhất từ các bài trước
• Kiểm tra lại: tất cả tính năng hoạt động? Giao diện sạch?
• Sửa nhanh nếu cần

Bước 2 — Deploy bằng Bolt.new (⏱️ 3 phút):

• Bấm Deploy → nhận link
• Mở link trên trình duyệt incognito → kiểm tra

Bước 3 — (Tùy chọn) Deploy qua Vercel (⏱️ 10 phút):

• Export code → Push to GitHub → Import vào Vercel → Deploy
• So sánh link Bolt.new vs link Vercel

Bước 4 — Kiểm tra chéo (⏱️ 5 phút):

• Mở trên điện thoại
• Gửi link cho 1 người bạn, hỏi feedback

Tiêu chí thành công:

• ✅ App có link URL thật, gửi cho ai cũng mở được
• ✅ App hoạt động đúng khi người khác mở (không chỉ trên máy bạn)
• ✅ Hiển thị tốt trên điện thoại
• ✅ Có ít nhất 3 tính năng hoạt động
• ✅ Bạn có 1 đoạn mô tả ngắn về app (viết cho người không biết tech)

Gợi ý nếu bị stuck:

• Nếu Deploy bị lỗi: thử tải lại trang Bolt.new và deploy lại
• Nếu Vercel bị Build Failed: quay về cách deploy trên Bolt.new — vẫn có link chia sẻ được
• Nếu app bị trắng: mở Console (F12), copy lỗi, paste cho AI sửa

Thời gian: 20 phút Deliverable: Link URL app đã deploy + 1 đoạn mô tả ngắn về app

Tổng kết bài 6

Bạn đã học được	Chi tiết
Deploy là gì	Đưa app từ máy mình lên internet
Deploy 1 click	Dùng nút Deploy/Publish trên Bolt.new, Lovable
Deploy qua Vercel	Chuyên nghiệp hơn, link đẹp hơn, gắn domain riêng
Custom domain	Có thể gắn tên miền riêng (ví dụ: app.tenbancua.vn)
Kiểm tra sau deploy	Checklist 5 bước đảm bảo app hoạt động đúng