📘 BÀI 30: DEPLOY ỨNG DỤNG VUE + NODEJS FULLSTACK

Chúc mừng bạn đã đi đến bài cuối cùng trong series!

Trong Bài 30: Deploy ứng dụng Vue + NodeJS, bạn sẽ học cách đưa toàn bộ dự án lên internet để:

• Truy cập từ bất kỳ đâu
• Dùng tên miền riêng (nếu có)
• Chia sẻ cho nhà tuyển dụng, khách hàng hoặc người học khác

Mục tiêu

• Build frontend Vue ra static files
• Deploy frontend lên Netlify hoặc Vercel (miễn phí)
• Deploy backend NodeJS lên Render.com hoặc VPS
• Cấu hình kết nối giữa frontend ↔ backend
• Cấu hình domain tùy chọn và HTTPS

---

Phần 1: Build Vue frontend

Trong thư mục frontend (Vue):

📋 Copynpm run build

Kết quả là thư mục dist/ chứa các file tĩnh (HTML + JS + CSS đã được tối ưu). Đây là thứ sẽ được upload lên hosting.

---

Phần 2: Deploy frontend lên Netlify

1. Truy cập https://app.netlify.com, tạo tài khoản miễn phí
2. Chọn “New site from Git” (nếu bạn có GitHub) hoặc kéo thả thư mục dist/
3. Chọn domain miễn phí do Netlify cấp (dạng vue-todo.netlify.app)
4. Cấu hình biến môi trường nếu cần (VD: VITE_API_URL=https://your-backend.onrender.com)

Nếu dùng Vercel thì tương tự.

---

Phần 3: Deploy backend NodeJS lên Render.com

1. Tạo tài khoản tại https://render.com
2. Chọn “Web Service” → kết nối GitHub repo backend
3. Chọn:
   • Environment: Node
   • Start command: node index.js
   • Root directory: /backend
   • Port: 5000 (hoặc để Render tự chọn)
4. Add biến môi trường:
   • MONGO_URL=...
   • SECRET=...

Sau vài phút, Render sẽ cấp link dạng:

📋 Copyhttps://your-backend.onrender.com

---

Phần 4: Cấu hình frontend để gọi đúng backend

Trong frontend/.env.production:

📋 CopyVITE_API_URL=https://your-backend.onrender.com

Trong các lệnh fetch:

📋 Copyfetch(import.meta.env.VITE_API_URL + '/login', ...)

Sau khi build lại, frontend sẽ biết backend đang nằm ở đâu.

---

Phần 5: Kết nối domain riêng (tuỳ chọn)

Bạn có thể mua domain tại:

• Namecheap, GoDaddy, or Google Domains
• Sau đó trỏ về Netlify (frontend) và Render (backend, nếu cần)

Tại Netlify:

• Vào Domain settings → Add custom domain
• Trỏ bản ghi A hoặc CNAME trong DNS theo hướng dẫn

---

Phần 6: Bảo mật & kiểm tra

• Sử dụng HTTPS (cả frontend và backend)
• Kiểm tra CORS trong backend:

📋 Copyapp.use(cors({
  origin: 'https://your-frontend.netlify.app',
  credentials: true
}))

• Kiểm tra LocalStorage có lưu JWT token và gọi API đúng domain chưa

---

Bạn đã học được

• Build và deploy Vue frontend dạng SPA
• Deploy backend NodeJS kèm database MongoDB
• Kết nối frontend ↔ backend qua biến môi trường
• Triển khai miễn phí với domain đẹp, dễ chia sẻ
• Kiến thức thực tế để làm sản phẩm học thuật hoặc demo portfolio

---

Bài tập mở rộng

1. Deploy backend lên VPS (Ubuntu, Docker hoặc PM2)
2. Sử dụng CI/CD (tự động deploy khi push code mới)
3. Cài đặt HTTPS thủ công qua NGINX nếu dùng VPS