Đưa đồ án lên mạng miễn phí để hội đồng mở bằng điện thoại

Đồ án chạy trên localhost và đồ án có địa chỉ mở được bằng điện thoại là hai ấn tượng rất khác nhau trước hội đồng. Việc này mất khoảng một buổi và không tốn tiền.

Ngoài điểm cộng khi bảo vệ, có địa chỉ thật còn giải quyết một rủi ro thật: máy chiếu hỏng hoặc máy bạn không lên thì vẫn còn đường trình bày.

Kiến trúc rẻ nhất

Đồ án web tách frontend và backend thì chia làm ba mảnh, mỗi mảnh một nơi miễn phí:

• Frontend (React, Vue, Next.js) → Vercel hoặc Netlify
• Backend (Node.js, Spring Boot, Django, Laravel) → Render hoặc Railway
• Cơ sở dữ liệu → Supabase hoặc Neon cho PostgreSQL, Aiven cho MySQL, MongoDB Atlas cho MongoDB

Dự án PHP Laravel thuần thì đơn giản hơn: đẩy cả lên Render bằng Docker, hoặc dùng hosting chia sẻ giá rẻ.

Bước 1: Đưa mã nguồn lên GitHub

Mọi nền tảng miễn phí đều lấy mã từ GitHub. Trước khi đẩy, kiểm tra hai thứ:

Thêm .env và node_modules vào .gitignore. Đẩy mật khẩu cơ sở dữ liệu lên kho công khai là chuyện xảy ra rất thường xuyên với đồ án, và bot quét kho công khai tìm khoá trong vài phút.

Tạo file .env.example liệt kê tên các biến cần có nhưng để trống giá trị. File này vừa để bạn nhớ, vừa là thứ hội đồng đánh giá cao.

Bước 2: Cơ sở dữ liệu

Làm cơ sở dữ liệu trước, vì backend cần chuỗi kết nối của nó.

Với PostgreSQL, Supabase và Neon đều cho gói miễn phí đủ dùng cho đồ án. Tạo dự án, lấy chuỗi kết nối, rồi nhập dữ liệu từ file .sql bạn đã xuất ở máy.

Với MySQL, Aiven cho một tháng dùng thử và có gói miễn phí giới hạn. Nếu đề dùng MySQL mà không tìm được nơi miễn phí ổn định, cân nhắc chuyển sang PostgreSQL — với đồ án CRUD thì khác biệt gần như chỉ nằm ở vài câu lệnh tạo bảng.

Xuất dữ liệu ở máy bằng mysqldump hoặc pg_dump, nhập lên bằng công cụ tương ứng. Nhớ nhập cả dữ liệu mẫu, không chỉ cấu trúc bảng — hệ thống trống trơn thì demo không có gì để xem.

Bước 3: Backend lên Render

Đăng ký Render bằng tài khoản GitHub, chọn New → Web Service, trỏ vào kho mã của bạn.

Khai báo lệnh dựng và lệnh chạy theo ngôn ngữ:

• Node.js: dựng npm install, chạy npm start
• Spring Boot: dựng ./mvnw clean package -DskipTests, chạy java -jar target/ten-file.jar
• Django: dựng pip install -r requirements.txt, chạy gunicorn ten_du_an.wsgi

Sau đó vào mục Environment thêm các biến môi trường: chuỗi kết nối cơ sở dữ liệu, khoá bí mật JWT, và mọi biến trong .env.example.

Hai điểm hay làm hỏng bước này:

Cổng phải đọc từ biến môi trường. Nền tảng tự cấp cổng, không phải 8080 cố định. Trong Spring Boot đặt server.port=${PORT:8080}; trong Express dùng process.env.PORT || 3000.

Gói miễn phí ngủ khi không có ai truy cập. Sau khoảng mười lăm phút không ai vào, dịch vụ tắt và lần gọi tiếp theo mất ba mươi giây đến một phút để dậy. Trước buổi bảo vệ, mở trang lên trước mười phút để nó tỉnh sẵn.

Bước 4: Frontend lên Vercel

Đăng nhập Vercel bằng GitHub, Import Project, chọn kho. Vercel tự nhận framework.

Việc duy nhất phải làm tay: thêm biến môi trường trỏ tới địa chỉ backend vừa deploy, ví dụ VITE_API_URL hoặc REACT_APP_API_URL. Với các framework này, biến được nhúng vào lúc dựng — sửa biến xong phải deploy lại mới ăn, không phải khởi động lại là xong.

Bước 5: Sửa lỗi CORS

Đây là lỗi gần như chắc chắn gặp: frontend lên rồi nhưng mọi lời gọi API đều đỏ trong tab Console.

Backend phải cho phép đúng tên miền frontend. Đừng để cho phép tất cả rồi kệ đó — hội đồng hỏi bảo mật là mất điểm. Khai báo cụ thể địa chỉ Vercel của bạn.

Kiểm tra thêm: trang chạy HTTPS mà gọi API qua HTTP thì trình duyệt chặn thẳng. Cả hai đầu phải cùng HTTPS.

Giới hạn cần biết trước

Gói miễn phí có giới hạn thật, biết trước để không bị bất ngờ giữa buổi bảo vệ:

• Dịch vụ ngủ sau vài phút không ai dùng, lần gọi đầu chậm
• Dung lượng cơ sở dữ liệu thường vài trăm MB, thừa cho đồ án
• Không lưu được file tải lên vào ổ đĩa máy chủ vì máy bị dựng lại thường xuyên — ảnh người dùng tải lên phải để trên dịch vụ lưu trữ riêng như Cloudinary hoặc Supabase Storage
• Tên miền là dạng ten-du-an.vercel.app, muốn tên riêng thì phải mua, khoảng 200-300 nghìn một năm

Giới hạn cuối cùng đáng lưu ý: một số nền tảng đổi chính sách gói miễn phí khá thường xuyên. Deploy xong thì đừng bỏ đó cả tháng rồi mới mở lại vào hôm bảo vệ — kiểm tra lại vài ngày một lần.

Kiểm tra trước khi bảo vệ

Mở trang bằng điện thoại dùng mạng di động, không dùng wifi nhà. Đăng nhập, chạy hết luồng chính, thử trên cả Chrome và Safari. Chuẩn bị sẵn mã QR trỏ tới địa chỉ để hội đồng quét mở luôn trên máy họ.

Nếu không muốn tự làm

Hạng mục "deploy lên hosting kèm tên miền demo" nằm sẵn trong bảng giá nếu bạn muốn có địa chỉ chạy được mà không mất buổi tự dựng.

Xem thêm 12 lỗi hay gặp khi chạy mã nguồn đồ án tải về — phần lớn lỗi deploy là cùng nguyên nhân với lỗi chạy ở máy: sai phiên bản và thiếu biến môi trường.