Bài 10. Triển khai và dự án full-stack

Bài tổng kết: hoàn thiện ứng dụng full-stack quản lý sinh viên bằng Next.js, Prisma, MySQL, Auth.js, Tailwind; sau đó triển khai lên Vercel hoặc máy chủ riêng bằng Docker. Đây là dự án mẫu phù hợp làm đồ án môn Lập trình ứng dụng web.

150 phútNâng cao
Bạn sẽ học được
  • Thiết kế chức năng và cấu trúc dự án
  • Hoàn thiện CRUD, tìm kiếm, phân quyền, thống kê
  • Triển khai lên Vercel và VPS
  • Viết README và chuẩn bị bảo vệ đồ án

Một số khái niệm

qlsv-web/src/
├── app/
│   ├── (public)/  page.tsx, dang-nhap/
│   ├── (admin)/quan-tri/
│   │   ├── layout.tsx          # sidebar, kiểm tra đăng nhập
│   │   ├── page.tsx            # thống kê (biểu đồ)
│   │   ├── sinhvien/  page.tsx, them/, [id]/sua/, actions.ts
│   │   ├── lop/ ...
│   │   └── diem/ ...
│   ├── api/  auth/[...nextauth]/, sinhvien/route.ts   # API cho Flutter
│   ├── sitemap.ts, robots.ts
├── components/  ui/ (Button, Card, Table), BangSinhVien.tsx, BoLoc.tsx
├── lib/  db.ts, quyen.ts, schema.ts (Zod)
└── auth.ts

Chức năng

NhómChức năng
Người dùngĐăng nhập mật khẩu/Google, đổi mật khẩu, vai trò admin, giảng viên, sinh viên
Sinh viênDanh sách, tìm kiếm, lọc theo lớp, phân trang qua URL, thêm/sửa/xóa, ảnh đại diện
Lớp, môn họcCRUD, gán sinh viên vào lớp
ĐiểmGiảng viên nhập điểm, sinh viên xem bảng điểm, tính điểm trung bình
Thống kêSố sinh viên theo lớp, phân bố điểm (biểu đồ Chart.js hoặc Recharts)
API/api/sinhvien cho ứng dụng Flutter

Triển khai lên Vercel

  • Đưa mã lên GitHub (không đưa .env).
  • Tạo CSDL MySQL đám mây (Aiven, TiDB Cloud) hoặc PostgreSQL (Neon, Supabase) và chạy npx prisma migrate deploy.
  • Vào vercel.com, Import dự án từ GitHub, khai báo biến môi trường DATABASE_URL, AUTH_SECRET, AUTH_GOOGLE_ID...
  • Mỗi lần push, Vercel tự build và triển khai; mỗi nhánh có đường dẫn xem trước riêng.

Máy chủ riêng với Docker

// next.config.ts
const nextConfig = { output: 'standalone' };
export default nextConfig;
# Dockerfile
FROM node:24-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npx prisma generate && npm run build

FROM node:24-alpine
WORKDIR /app
ENV NODE_ENV=production
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
COPY --from=build /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

Tiêu chí đánh giá đồ án

  • Đủ chức năng, phân quyền đúng; dữ liệu kiểm tra bằng Zod cả ở máy chủ.
  • Giao diện responsive, nhất quán, có trạng thái tải và lỗi.
  • Mã tách lớp rõ (app, components, lib); TypeScript không lỗi, ESLint sạch.
  • Có đường dẫn triển khai thật, README, tài khoản mẫu, sơ đồ CSDL.
  • Báo cáo trình bày kiến trúc, lý do chọn công nghệ, hạn chế và hướng phát triển.
Mẹo hay

Làm theo từng chức năng hoàn chỉnh (giao diện + action + CSDL) rồi commit, thay vì làm hết giao diện rồi mới làm dữ liệu: dễ kiểm soát tiến độ và luôn có bản chạy được.

Lưu ý

Kiểm tra kỹ npm run build trên máy trước khi triển khai: lỗi kiểu TypeScript hay ESLint sẽ làm build trên Vercel thất bại.

Thực hành
  1. Hoàn thiện các chức năng trong bảng.
  2. Thêm trang thống kê có biểu đồ.
  3. Triển khai lên Vercel với CSDL đám mây.
  4. Viết README, chuẩn bị slide bảo vệ.
Tóm tắt bài học
  • Kiến trúc full-stack: app, components, lib.
  • Prisma + Auth.js + Server Actions + Tailwind.
  • Vercel hoặc Docker standalone.
  • Đủ tiêu chí cho đồ án Lập trình ứng dụng web.