76. Deploy miễn phí ReactJS Front-end lên Vercel | ReactJS, NodeJS, MongoDB | TrungQuanDev

#trungquandev #reactjs #nodejs #mongodb ➡️ Hôm nay chúng ta sẽ cùng nhau triển khai phần Front-end lên Vercel, sau đó chỉnh sửa lại phần Back-end trên Render ở buổi trước, kết hợp cả 2 lại và bạn đã Deploy thành công dự án lên môi trường Production rồi nhé. - Lưu ý: hôm nay sẽ có rất nhiều kiến thức hay và thú vị, mình đã đánh phân đoạn video đầy đủ, bạn có thể xem ở bên dưới. 🏅 Học chuẩn thực tế để đi làm, để chuẩn bị hành trang vững chắc cho sự nghiệp tương lai. 🎁 DOWNLOAD FULL SOURCE CODE của toàn bộ dự án (Pro & Advanced) cũng như Donate ủng hộ mình ly cafe nếu bạn muốn 🤝 👉 Đầu tiên cần phải làm rõ một điều: Mình KHÔNG BÁN CODE cũng như KHÔNG BÁN KHÓA HỌC gì ở đây hết. Bởi vì mình đã cung cấp đầy đủ mọi tài nguyên cần thiết cho trường hợp bạn muốn học FREE Miễn Phí từ đầu rồi. 👉 ĐIỀU QUAN TRỌNG TIẾP THEO: Bạn cần phải hiểu rõ về lý do tại sao mình lại chia ra 3 gói Donate cũng như sự khác nhau giữa 3 gói này là gì. Mọi thông tin mình đều đã công khai ở bài viết trên blog chính chủ từ mình nhé, bởi vì nội dung khá dài. Bạn nên dành thời gian đọc nó trước khi bắt đầu khóa học cực kỳ chất lượng này. 👉 Link bài viết: 👇 🌐 https://trungquandev.com/khoa-hoc-lap-trinh-full-stack-mern-100-du-an-thuc-te-chat-luong/ 🥉 FREE PACK (No Sponsor) • 🌟 Download on Ko-fi: https://ko-fi.com/s/8e56e2c5d0 • 🌟 Download on Buy Me a Coffee: https://buymeacoffee.com/codetq/e/318762 🥈 GOLD PACK (Gold Sponsor) • 🌟 Download on Ko-fi: https://ko-fi.com/s/e41c325ca4 • 🌟 Download on Buy Me a Coffee: https://buymeacoffee.com/codetq/e/191152 🥇 DIAMOND PACK (Diamond Sponsor - VIP) • 🌟 Download on Ko-fi: https://ko-fi.com/s/27670843df • 🌟 Download on Buy Me a Coffee: https://buymeacoffee.com/codetq/e/318750 🏆 HOẶC NẾU BẠN KHÔNG CÓ THẺ VISA THANH TOÁN QUỐC TẾ THÌ CÓ THỂ LIÊN HỆ TRỰC TIẾP VỚI MÌNH TẠI ĐÂY ĐỂ LẤY TÀI NGUYÊN HỌC TẬP NHÉ 👇 🌐 Facebook TrungQuanDev: 👉 https://facebook.com/trungquandev 👑 Lưu ý: Video hướng dẫn chi tiết cách Install Source Code (Pro & Advanced) đều đã có trong 2 Playlists của khóa học rồi nhé. --- 🌐 Playlist khoá Pro: https://www.youtube.com/playlist?list=PLP6tw4Zpj-RJP2-YrhtkWqObMQ-AA4TDy 🌐 Playlist khoá Advanced: https://www.youtube.com/playlist?list=PLP6tw4Zpj-RJbPQfTZ0eCAXH_mHQiuf2G 🌱 Hãy tham gia hội viên kênh để học các khóa nâng cao chất lượng cũng như ủng hộ mình nhé. Cảm ơn bạn: https://www.youtube.com/@trungquandev/join 🌳 Một kênh khác từ mình, chủ yếu tiếng Anh, luyện skill bằng cách code những project thú vị: https://www.youtube.com/@codetq --- 🎤 Mình trên các nền tảng Podcasts: 🎵 Spotify: https://podcasters.spotify.com/pod/show/trungquandev-official 🎵 Apple: https://podcasts.apple.com/vn/channel/trungquandev/id6475606935 🎵 Castbox: https://castbox.fm/ch/5746721 --- 👋🏼 Join những cộng đồng lập trình văn minh lịch sự dưới đây nhé bạn: 🔗 Discord: Cộng Đồng Lập Trình Việt Nam 🇻🇳 : https://discord.gg/ycSbhP6gDu 🔗 Page: TrungQuanDev - Một lập trình viên: https://www.facebook.com/trungquandev 🔗 Group: Cộng đồng Lập Trình Web • Front-end & Back-end Việt Nam: https://www.facebook.com/groups/laptrinhwebvietnam 🔗 Blog: https://trungquandev.com 🔗 CV: https://cv.trungquandev.com --- 🎒 Danh sách một vài món đồ trong góc làm việc của mình: 🌐 Màn hình LG 4k chuyên đồ họa & Code đỡ hại mắt: https://s.shopee.vn/7zujJ1oUeV 🌐 Đèn treo màn hình Xiaomi bảo vệ mắt: https://s.shopee.vn/4feHL4EoKr 🌐 Bàn phím cơ Zoom75: https://shope.ee/4AZxyEgM1T 🌐 Ghế công thái học: https://s.shopee.vn/LVIX9tgGV --- 📝 Video Chapters - nội dung chi tiết: 00:00 Mở đầu 00:52 Đây là đâu? Mình là ai? 02:16 Những cộng đồng lập trình văn minh lịch sự 03:23 Nội dung học phần hiện tại 03:55 Deploy Vite - ReactJS lên Vercel 12:25 Vấn đề môi trường Node Version (Quan Trọng) 15:44 Push lại code để Deploy lại 19:14 Biến môi trường env khá dị với Vite. Xử lý root endpoint API 31:49 Vấn đề Vercel không tự động nhận Commit mới nhất 33:49 Xử lý CORS phía Back-end và deploy lại trên Render 36:11 Thao tác giữa GitHub với Vercel, Render (Quan Trọng) 37:12 Tiếp tục xử lý CORS 39:03 Một vài Lưu Ý và Thành quả cuối cùng --- 📝 Link tài liệu liên quan để các bạn tham khảo mà trong video mình có nhắc đến: - Các Step deploy ở đây: https://vitejs.dev/guide/static-deploy#vercel https://vercel.com/docs/getting-started-with-vercel - Chỉnh sửa lại repo GitHub để thao tác với Vercel ở đây: https://github.com/settings/installations - Vấn đề runtime Node version: https://vercel.com/docs/functions/serverless-functions/runtimes/node-js#node.js-version - Vấn đề biến môi trường process.env với Vite https://github.com/vitejs/vite/issues/1973 --- | 💻 TRUNGQUANDEV - MỘT LẬP TRÌNH VIÊN ☕️ |