Đại kết cục: đưa app lên internet

Đưa cả app lên mạng – và nhìn lại hành trình từ `<h1>` đầu tiên đến đây.

Bước cuối hành trình

App chạy trên localhost, trên máy bạn. Kỹ năng cuối Bậc thầy: đưa ra địa chỉ thật. Frontend và backend deploy riêng – đúng lý do ta tách từ đầu.

Deploy frontend (React)

Vite biến app thành file hoàn chỉnh bằng một lệnh:

npm run build

Tạo thư mục dist/ – HTML, CSS và JavaScript thuần. Và bạn đã biết đặt ở đâu: website tĩnh, như Cấp 1!

GitHub Pages – upload nội dung dist/ lên repository, như Cấp 1.
Hoặc tiện hơn, Netlify / Vercel – miễn phí, nối tài khoản GitHub, tự deploy mỗi lần đổi. Thử một cái cùng bố mẹ; hướng dẫn vài click.

Deploy backend (Node.js)

Server cần máy luôn bật. Render hoặc Railway lo việc đó – có gói miễn phí đủ dự án trường:

Upload thư mục my-server lên repository GitHub riêng (không có node_modules – server tự cài).
Trên render.com (cùng bố mẹ), chọn New → Web Service, nối repository GitHub, đặt: Build Command npm install, Start Command node server.js.
Render cho địa chỉ như https://my-server.onrender.com. Thử .../api/messages trong trình duyệt – API sống trên internet!
Chi tiết cuối: trong frontend, thay mọi http://localhost:3900 bằng địa chỉ server mới, và deploy frontend lại.

⚠️

Trước khi cho sổ lưu bút ra thế giới, nghĩ như người gác: ai trên mạng cũng có thể tìm thấy. Giữ kiểm tra độ dài tin trên server (bạn có từ bài trước!), không hiện tin dạng HTML thô (React tự bảo vệ – thêm lý do dùng nó), và thống nhất với bố mẹ kiểm tra sổ thỉnh thoảng. Website lớn có cả đội làm việc này – gọi là kiểm duyệt.

🏆 Chúc mừng, Bậc thầy!

Dừng lại nhìn bạn đã bắt đầu từ đâu:

Cấp 1: file trống → <h1>It works!</h1> → cả website HTML và CSS trên GitHub Pages.
Cấp 2: biến, điều kiện, function → chế độ tối, thư viện ảnh, câu đố, form.
Cấp 3: terminal, Node.js, React, component, state, Express, API → app full-stack trên internet.

Bạn biết giờ là nền tảng thật của nghề lập trình web. Không phiên bản đồ chơi – nền tảng thật. Cùng công cụ, quy trình và tư duy như công ty thật.

Đi đâu tiếp?

Vài hướng tự nhiên:

Database – để tin sống sót khi khởi động lại server (SQLite là chỗ thân thiện nhất).
TypeScript – JavaScript có kiểm lỗi; chuẩn trong công ty.
Git trong terminal – git add, git commit, git push thay upload tay.
Ý tưởng riêng – giáo viên hay nhất. App cho lớp? Bảng đấu cho CLB? Giờ bạn biết cách xây.

✅

Tự kiểm tra (và tạm biệt): Frontend và backend chạy ở địa chỉ công khai, sổ lưu bút nhận tin từ khắp nơi. Gửi địa chỉ cho gia đình – và nhớ nói bạn tự xây cả bằng hai tay. 🚀

Điều cần nhớ từ bài học này

Frontend: npm run build → file tĩnh → GitHub Pages/Netlify/Vercel.
Backend: repository GitHub → Render/Railway → địa chỉ API công khai → thay localhost trong frontend.
App công khai là trách nhiệm: kiểm tra phía server và người lớn theo dõi.