Bài 3: Hướng Dẫn Deploy Frontend TNTT Management - Vercel, Netlify & GitHub Pages

📋 Giới thiệu

Trong Bài 2, chúng ta đã thiết lập backend (Google Apps Script + Google Sheets). Bây giờ, đến phần frontend: build và deploy webapp React lên internet để ai cũng có thể truy cập.

Điều tuyệt vời là:

✅ Miễn phí 100% - Các gói free đủ dùng
✅ Không cần server - Deploy static files
✅ SSL tự động - HTTPS miễn phí
✅ Custom domain - Có thể dùng tên miền riêng
✅ Auto deploy - Tự động update khi push code

Các nền tảng được hướng dẫn:

Vercel (Khuyên dùng - Tối ưu cho React/Vite)
Netlify (Dễ dùng - Drag & drop)
GitHub Pages (Đơn giản - Cho project open-source)

🎯 Yêu cầu chuẩn bị

Yêu cầu	Mô tả	Thời gian
Tài khoản GitHub	Để lưu code	0 phút
Tài khoản Vercel/Netlify	Để deploy	2 phút
Backend đã deploy	Từ Bài 2	-
Code frontend	Đã clone về máy	-

🚀 Bước 1: Build Project

1.1 Cài đặt dependencies

Mở terminal trong thư mục dự án:

npm install

1.2 Cấu hình API URL

Tạo file .env.production (hoặc sửa .env):

VITE_GAS_API_URL=https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec

Thay YOUR_DEPLOYMENT_ID bằng ID từ Bài 2.

Lưu ý quan trọng:

✅ Dùng biến môi trường để dễ chuyển đổi giữa dev/production
✅ Không commit .env lên GitHub (đã có trong .gitignore)

1.3 Build project

npm run build

Kết quả:

Thư mục dist/ sẽ được tạo ra
Chứa tất cả files HTML, CSS, JS đã optimize
Sẵn sàng để deploy

Kiểm tra build:

ls -lh dist/

Bạn sẽ thấy:

index.html
assets/
  - index.xxx.js
  - index.xxx.css

🌐 Bước 2: Deploy lên Vercel (Khuyên dùng)

Vercel là nền tảng tốt nhất cho React/Vite với:

Auto deploy từ GitHub
Edge network (nhanh toàn cầu)
Analytics miễn phí
Custom domain miễn phí

2.1 Lấy code từ repository

Clone repository của TNTT Management:

git clone https://github.com/dongthinhlong/TNTT-MANAGEMENT.git
cd TNTT-MANAGEMENT

Hoặc tải về:

Tải ZIP từ GitHub
Giải nén và mở thư mục

2.2 Cài đặt dependencies

npm install

2.3 Push code lên GitHub (nếu muốn auto deploy)

Tạo repository mới trên GitHub của bạn, sau đó:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/TNTT-MANAGEMENT.git
git push -u origin main

2.2 Tạo project trên Vercel

Truy cập Vercel.com
Sign up với GitHub
Nhấn Add New → Project
Tìm repository TNTT-MANAGEMENT → Import

2.3 Cấu hình project

Trường	Giá trị	Ghi chú
Framework Preset	Vite	Tự động detect
Root Directory	`.`	Thư mục gốc
Build Command	`npm run build`	Mặc định
Output Directory	`dist`	Mặc định

Environment Variables: Click Environment Variables → Thêm:

VITE_GAS_API_URL = https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec

2.4 Deploy!

Nhấn Deploy và chờ ~2 phút.

Kết quả:

🎉 Your project has been deployed!
https://tntt-management.vercel.app

📌 Ghi lại URL này! Đây là webapp production của bạn.

2.5 Auto deploy khi push code

Mỗi khi bạn push code lên GitHub, Vercel sẽ:

Tự động detect thay đổi
Build lại project
Deploy version mới
Update URL production

Không cần làm gì thêm!

🌐 Bước 3: Deploy lên Netlify (Alternative)

Netlify nổi tiếng với drag & drop cực đơn giản.

3.1 Cách 1: Deploy từ GitHub (Khuyên dùng)

Truy cập Netlify.com
Sign up với GitHub
Nhấn Add new site → Import an existing project
Chọn GitHub → Chọn repository
Cấu hình:

Trường	Giá trị
Base directory	`.`
Build command	`npm run build`
Publish directory	`dist`

Environment Variables: Click Advanced → Environment variables:

VITE_GAS_API_URL = https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec

Nhấn Deploy site

3.2 Cách 2: Drag & Drop (Không cần GitHub)

Build project: npm run build
Truy cập Netlify Drop
Kéo thư mục dist/ vào ô trống
Đợi upload xong
Done! Site online ngay lập tức

Nhược điểm: Mỗi lần sửa code phải build & drag lại.

3.3 Cấu hình Netlify (Tùy chọn)

Tạo file netlify.toml trong thư mục gốc:

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Redirects giúp SPA routing hoạt động đúng (không bị 404 khi refresh).

🌐 Bước 4: Deploy lên GitHub Pages (Đơn giản nhất)

GitHub Pages hoàn toàn miễn phí và tích hợp sẵn với GitHub.

4.1 Cài đặt package

npm install -D gh-pages

4.2 Thêm scripts vào `package.json`

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "homepage": "https://YOUR_USERNAME.github.io/TNTT-MANAGEMENT"
}

Lưu ý:

Thay YOUR_USERNAME bằng username GitHub của bạn
homepage phải đúng format như trên

4.3 Cấu hình base path trong `vite.config.ts`

export default defineConfig({
  plugins: [react()],
  base: '/TNTT-MANAGEMENT/', // Tên repository
  build: {
    outDir: 'dist',
    // ...
  }
});

4.4 Deploy

npm run deploy

Kết quả:

https://YOUR_USERNAME.github.io/TNTT-MANAGEMENT/

🎨 Bước 5: Custom Domain (Tùy chọn)

5.1 Mua tên miền

Mua tên miền từ:

Namecheap (~$10/năm)
Google Domains (~$12/năm)
GoDaddy (~$15/năm)

Ví dụ: tntt-management.com

5.2 Cấu hình trên Vercel

Vào project Vercel → Settings → Domains
Thêm domain: tntt-management.com

Vercel cung cấp DNS records:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Cấu hình DNS tại nơi mua tên miền
Chờ 1-24 giờ để DNS propagate

5.3 Cấu hình trên Netlify

Vào site Netlify → Domain settings
Add custom domain

Netlify cung cấp DNS:

Type: CNAME
Name: @
Value: tntt-management.netlify.app

Cấu hình DNS tại nơi mua tên miền

🔒 Bước 6: Bảo mật & Tối ưu

6.1 Bảo vệ API URL

Vấn đề: API URL có thể bị public

Giải pháp:

✅ Không commit .env lên GitHub (đã có trong .gitignore)
✅ Dùng environment variables trên Vercel/Netlify
✅ Giới hạn CORS trong backend (nếu cần)

6.2 HTTPS bắt buộc

Tất cả nền tảng đều cung cấp HTTPS miễn phí:

✅ SSL tự động từ Let’s Encrypt
✅ Không cần cấu hình thêm
✅ Tự động renew

6.3 Performance optimization

Lazy loading

Vite đã optimize tự động, nhưng bạn có thể:

// Dynamic import
const Dashboard = lazy(() => import('./components/Dashboard'));

Image optimization

Dùng WebP format
Lazy load images
Dùng CDN cho assets lớn

Caching

Vercel/Netlify tự động cache static files:

CSS/JS: 1 năm
HTML: No-cache
Images: 1 năm

6.4 Analytics

Vercel Analytics (Miễn phí)

Vào project → Analytics
Enable → Done!

Xem:

Page views
Unique visitors
Bounce rate
Geography

Google Analytics (Tùy chọn)

Thêm vào index.html:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

🐛 Xử lý sự cố

Lỗi “Build failed”

Nguyên nhân: Lỗi TypeScript hoặc thiếu dependencies

Giải pháp:

# Kiểm tra build local
npm run build

# Sửa lỗi nếu có
# Sau đó push lại
git add .
git commit -m "Fix build error"
git push

Lỗi “404 Not Found” khi refresh

Nguyên nhân: SPA routing không được cấu hình

Giải pháp:

Vercel: Tạo file vercel.json:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

Netlify: Tạo file public/_redirects:

/*    /index.html   200

GitHub Pages: Đã cấu hình trong vite.config.ts

Lỗi “API URL không đúng”

Nguyên nhân: Biến môi trường không được set

Giải pháp:

Kiểm tra Vercel/Netlify → Settings → Environment Variables
Đảm bảo VITE_GAS_API_URL đã được set
Redeploy project

Lỗi “CORS Error”

Nguyên nhân: Backend không cho phép truy cập từ domain

Giải pháp:

Kiểm tra backend đã deploy đúng chưa
Đảm bảo “Who has access” = “Anyone”
Xóa cache trình duyệt

Site tải chậm

Nguyên nhân: File quá lớn hoặc network chậm

Giải pháp:

Kiểm tra bundle size:
```
npm run build -- --report
```
Optimize dependencies
Dùng CDN cho libraries lớn

📊 So sánh các nền tảng

Tính năng	Vercel	Netlify	GitHub Pages
Giá	Free	Free	Free
Build time	100 giờ/tháng	300 giờ/tháng	Không giới hạn
Bandwidth	100GB/tháng	100GB/tháng	Không giới hạn
Custom domain	✅ Miễn phí	✅ Miễn phí	✅ Miễn phí
SSL	✅ Tự động	✅ Tự động	✅ Tự động
Auto deploy	✅ Từ GitHub	✅ Từ GitHub	✅ Từ GitHub
Serverless functions	✅ Có	✅ Có	❌ Không
Analytics	✅ Miễn phí	✅ Có hạn	❌ Không
Ease of use	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

Khuyến nghị:

Vercel: Tốt nhất cho production (nhanh, dễ dùng)
Netlify: Tốt cho drag & drop, forms
GitHub Pages: Tốt cho demo, open-source

🎯 Kiểm tra deployment

6.1 Kiểm tra các tính năng

Tính năng	Cách test	Kết quả mong đợi
Truy cập site	Mở URL production	Load trang chủ
Đăng nhập	Click “Đăng nhập với Google”	Thành công
Xem học viên	Vào tab “Học viên”	Hiện danh sách
Điểm danh QR	Quét mã QR	Ghi nhận thành công
Xuất Excel	Click “Xuất Excel”	Tải file xuống

6.2 Kiểm tra trên mobile

Mở URL trên điện thoại
Test các tính năng
Đảm bảo responsive đúng

6.3 Kiểm tra performance

Sử dụng Lighthouse (Chrome DevTools):

F12 → Lighthouse
Run audit
Xem điểm: Performance, Accessibility, SEO

Mục tiêu:

Performance: >90
Accessibility: >90
SEO: >90

🔄 Update code sau khi deploy

Quy trình update

# 1. Sửa code
# 2. Test local
npm run dev

# 3. Commit & push
git add .
git commit -m "Update feature X"
git push

# 4. Vercel/Netlify auto deploy
# Chờ ~2 phút

Rollback (nếu có lỗi)

Vercel:

Vào Deployments
Click deployment cũ
Promote to Production

Netlify:

Vào Deploys
Click Deploy history
Click deployment cũ
Deploy latest commit

🎨 Tổng kết

Những gì bạn đã làm được:

✅ Build project React thành static files
✅ Deploy lên Vercel/Netlify/GitHub Pages
✅ Cấu hình custom domain (tùy chọn)
✅ Thiết lập auto deploy từ GitHub
✅ Bảo mật & tối ưu performance

URL của bạn:

Production: https://tntt-management.vercel.app
Preview: Mỗi PR có URL preview riêng
Admin: Không cần phân biệt - cùng 1 URL

Bước tiếp theo:

📝 Bài 4: Hướng dẫn sử dụng chi tiết các tính năng

Chúc bạn thành công! 🎉

Webapp của bạn giờ đã online và ai cũng có thể truy cập!

Bài viết bởi @dongthinhlong - Người phát triển TNTT Management
Năm cập nhật: 2026

📋 Giới thiệu#

🎯 Yêu cầu chuẩn bị#

🚀 Bước 1: Build Project#

1.1 Cài đặt dependencies#

1.2 Cấu hình API URL#

1.3 Build project#

🌐 Bước 2: Deploy lên Vercel (Khuyên dùng)#

2.1 Lấy code từ repository#

2.2 Cài đặt dependencies#

2.3 Push code lên GitHub (nếu muốn auto deploy)#

2.2 Tạo project trên Vercel#

2.3 Cấu hình project#

2.4 Deploy!#

2.5 Auto deploy khi push code#

🌐 Bước 3: Deploy lên Netlify (Alternative)#

3.1 Cách 1: Deploy từ GitHub (Khuyên dùng)#

3.2 Cách 2: Drag & Drop (Không cần GitHub)#

3.3 Cấu hình Netlify (Tùy chọn)#

🌐 Bước 4: Deploy lên GitHub Pages (Đơn giản nhất)#

4.1 Cài đặt package#

4.2 Thêm scripts vào package.json#

4.3 Cấu hình base path trong vite.config.ts#

4.4 Deploy#

🎨 Bước 5: Custom Domain (Tùy chọn)#

5.1 Mua tên miền#

5.2 Cấu hình trên Vercel#

5.3 Cấu hình trên Netlify#

🔒 Bước 6: Bảo mật & Tối ưu#

6.1 Bảo vệ API URL#

6.2 HTTPS bắt buộc#

6.3 Performance optimization#

Lazy loading#

Image optimization#

Caching#

6.4 Analytics#

Vercel Analytics (Miễn phí)#

Google Analytics (Tùy chọn)#

🐛 Xử lý sự cố#

Lỗi “Build failed”#

Lỗi “404 Not Found” khi refresh#

Lỗi “API URL không đúng”#

Lỗi “CORS Error”#

Site tải chậm#

📊 So sánh các nền tảng#

🎯 Kiểm tra deployment#

6.1 Kiểm tra các tính năng#

6.2 Kiểm tra trên mobile#

6.3 Kiểm tra performance#

🔄 Update code sau khi deploy#

Quy trình update#

Rollback (nếu có lỗi)#

🎨 Tổng kết#

Những gì bạn đã làm được:#

URL của bạn:#

Bước tiếp theo:#

☕ Ủng hộ tác giả

📋 Giới thiệu

🎯 Yêu cầu chuẩn bị

🚀 Bước 1: Build Project

1.1 Cài đặt dependencies

1.2 Cấu hình API URL

1.3 Build project

🌐 Bước 2: Deploy lên Vercel (Khuyên dùng)

2.1 Lấy code từ repository

2.2 Cài đặt dependencies

2.3 Push code lên GitHub (nếu muốn auto deploy)

2.2 Tạo project trên Vercel

2.3 Cấu hình project

2.4 Deploy!

2.5 Auto deploy khi push code

🌐 Bước 3: Deploy lên Netlify (Alternative)

3.1 Cách 1: Deploy từ GitHub (Khuyên dùng)

3.2 Cách 2: Drag & Drop (Không cần GitHub)

3.3 Cấu hình Netlify (Tùy chọn)

🌐 Bước 4: Deploy lên GitHub Pages (Đơn giản nhất)

4.1 Cài đặt package

4.2 Thêm scripts vào `package.json`

4.3 Cấu hình base path trong `vite.config.ts`

4.4 Deploy

🎨 Bước 5: Custom Domain (Tùy chọn)

5.1 Mua tên miền

5.2 Cấu hình trên Vercel

5.3 Cấu hình trên Netlify

🔒 Bước 6: Bảo mật & Tối ưu

6.1 Bảo vệ API URL

6.2 HTTPS bắt buộc

6.3 Performance optimization

Lazy loading

Image optimization

Caching

6.4 Analytics

Vercel Analytics (Miễn phí)

Google Analytics (Tùy chọn)

🐛 Xử lý sự cố

Lỗi “Build failed”

Lỗi “404 Not Found” khi refresh

Lỗi “API URL không đúng”

Lỗi “CORS Error”

Site tải chậm

📊 So sánh các nền tảng

🎯 Kiểm tra deployment

6.1 Kiểm tra các tính năng

6.2 Kiểm tra trên mobile

6.3 Kiểm tra performance

🔄 Update code sau khi deploy

Quy trình update

Rollback (nếu có lỗi)

🎨 Tổng kết

Những gì bạn đã làm được:

URL của bạn:

Bước tiếp theo: