Đưa ReactJS lên hosting tức là đưa website đã lập trình bằng ReactJS lên hosting đã mua. Để website hoạt động thực sự trên Internet.
Bài viết này đặt ngữ cảnh bạn đã mua tên miền và hosting trước đó. Bây giờ là lúc đưa ReactJS lên hosting. Nếu chưa mua tên miền và hosting thì mời thực hiện theo hai bày: Mua tên miền cho website và Mua hosting nodejs.
Các biến môi trường trong ReactJS
Có hai môi trường chính mà code ReactJS của bạn running. Đó là development – lúc đang lập trình ở máy local và production – lúc code đã build, chạy trên hosting.
Với mỗi ứng dụng ReactJS, bạn có thể tạo ra các biến môi trường để dùng toàn cục trong toàn ứng dụng . Giá trị của các biến môi trường có thể khác nhau tùy môi trường mà code chạy. Tên của mỗi biến bắt đầu bằng chữ REACT_APP_
Tạo biến môi trường trong ReactJS
Vậy các biến môi trường được khai báo thế nào? Dễ thôi! Trong folder ứng dụng , tạo file .env.development để khai báo các biến toàn cục cho môi trường lập trình. Tạo file .env.production để khai báo các biến sẽ dùng khi chạy trên hosting. Mời xem ví dụ:
Các biến trong .env.development dùng trong lúc lập trình
Các biến trong .env.production dùng trong lúc build code để chạy trên hosting
Sử dụng biến môi trường trong ứng dụng ReactJS
Các biến môi trường đã khai báo trong file .env được sử dụng trong code React bằng cách dùng cú pháp proesss.env.tênbiến. Ví dụ: process.env.REACT_APP_API_URL
Việc sử dụng các biến môi trường rất có lợi, vì khai báo 1 lần và dùng nhiều lần trong ứng dụng. Và khi cần thay đổi giá trị chỉ việc sửa 1 chỗ mà thôi.
Chuẩn bị biến môi trường trước khi build code ReactJS
Giờ thì chuẩn bị build code ReactJS để đưa lên hosting. Nếu có dùng các biến môi trường trong ứng dụng ReactJS (đa số ứng dụng đều có dùng đó nghe) , bạn hãy khai báo và kiểm tra giá trị các biến này trong file .env.production cẩn thận. Vì chúng sẽ được dùng khi build. Tham khảo ví dụ sau:
Thực hiện build code React
Trong folder project react, chạy lệnh : npm run build . Sau khi chạy lệnh này, trong ứng dụng sẽ có thêm 1 folder có tên là build. Code React của bạn đã được dịch và đóng gói vào folder build này, rất nhỏ . Và Bạn upload code trong folder build lên hosting để nó chạy. Nói thêm: code này là static (JavaScript thuần, dạng nén) và hầu như không thể sửa gì được nữa. Khi build, giá trị của các biến trong .env.production sẽ được đọc và thay thế vào các chỗ cần dùng và không custom gì được nữa đâu
Kết quả code có được trong folder build
Nén code đã build để chuẩn bị đưa lên hosting
Tiếp theo sau khi build code là nén các file. Vào folder build rồi chọn tất cả các file , folder trong folder nén thành file zip . Nhớ phải nén file dạng .zip nhe.
Upload code React lên hosting
Bây giờ thì đăng nhập vào hosting nhe, phải mua hosting trước rồi nhé. Sau khi đăng nhập vào thì nhắp Tools , chọn File Manager
Nhắp chọn file build.zip rồi upload, xong nhắp Go back
Upload file zip xong rồi thì bây giở giải nén ra: Nhắp nút phải chuột tại file build.zip chọn Extract . Xong thì xóa file build.zip cũng được.
Vậy là xong rồi đó , xem thử có thể thấy website với code react chạy trên hosting
Phù, dễ ợt phải không nào. các em làm đi nhé. Code xong mà không biết đưa lên host thì coi không được. 😊
