Làm thế nào để Deploy 1 ứng dụng ReactJS sử dụng Github Pages ?

Có phải bạn đã từng bắt đầu với một dự án ReactJS và sau khi hoàn thành bạn muốn mọi người có thể thưởng thức thành quả cũng như sử dụng những điều tuyệt vời mà bạn đã tạo ra thì đây chính là bài viết mà các bạn đang tìm kiếm.

Chắc hẳn bạn đã nghe nói đến kha khá nhiều cách để mang sản phẩm của mình public đến mọi người chẳn hạn mua một tên miền (Domain) rồi thuê một server (Host) để up code của các bạn lên và chạy với tên miền đấy. Cách này đang được dùng hầu hết với các trang web hiện nay nhưng đối với các bạn mới bắt đầu thì việc này có vẻ hơi khó khăn một chút. Chính vì thế hôm nay mình sẽ hướng dẫn các bạn một cách để Deploy một dự án tĩnh bắt đầu bằng create react app dễ dàng hơn rất nhiều đó là: sử dụng một package của npm có tên gh-pages để public ứng dụng của các bạn một cách dễ dàng và nhanh chóng.

* Yêu cầu:

• Bạn cần có một tài khoản Github
• Cài đặt Git CLI trên máy của bạn
• Cài đặt NodeJS và npm

Bạn cần dùng bản Node 8.10.0 trở lên. Nếu bạn đang dùng bản củ hơn thì hãy xem hướng dẫn cách Update nhé.

1 Khởi tạo một dự án:

Đầu tiên bạn bắt đầu dự án của mình mới một Project có tên là my-app:
npx create-react-app my-app
Tiếp theo bạn tạo một Repo ở Github với tên RepoMyApp

2 Cài đặt package

Bạn cần cài đặt package Github Pages ở môi trường dev:
cd my-app
npm install gh-pages --save-dev
Suffixes -dev biểu diễn cho môi trường dev-dependencies

3 Chỉnh sửa file package.json

Thuộc tính thứ nhất bạn cần thêm vào đó là homepage với format như sau:
http://{user-name}.github.io/{repo-name}
Với:
+ user-name: là tên tài khoản Github của bạn
+ repo-name: là tên mà lúc vừa rồi bạn tạo Repo (RepoMyApp)
Ví dụ với tên Github của mình thì kết quả sẽ là:
http://nguyen-quoc-thai.github.io/RepoMyApp

Thuộc tính thứ hai đó là script:
Bạn cần thêm 2 dòng này vào phần script của file package.json:
"predeploy":"npm run build"
"deploy":"gh-pages -d build"

Kết quả file package.json sẽ thành như sau:

Nếu bạn thấy mục nào còn thiếu thì hãy kiểm tra lại nhé !

4 Khởi tạo Git Repository

Ở phần này bạn cần khởi tạo một Repository ở local và remote control nó tới Repo của bạn trên Github.
git init
git remote add origin git@github.com:{user-name}/{repo-name}.git
Với user-name và repo-name vừa rồi mình đã đề cập. Cũng thử với tên và repo của mình thì nó sẽ là
git init
git remote add origin git@github.com:nguyen-quoc-thai/RepoMyApp.git

5 Deploy

Tiếp theo là bước public sản phẩm của các bạn lên Github bằng CLI:
npm run deploy
Xong bước này thì Repo của bạn trên Github sẽ tạo một branch có tên là gh-pages. Branch này sẽ lưu trữ những thiết lặp của bạn đã tạo trong file package.json

Heyzo tới bước 5 này là bạn đã hoàn tất public ứng dụng của mình rồi đó. Bạn có thể xem ngay tại:
http://{user-name}.github.io/{repo-name}

6 Push code to Github

git add .
git commit -m "your commit"
git push origin master

Đây là mục tùy chọn với mục đích lưu trữ mã nguồn của các bạn và có thể chia sẻ với mọi người. Nên nhớ đừng chia sẻ những cái Private chẳng hạn như biến môi trường, ApiKey, ... nhé vì website của bạn có thể bị hack vì lộ chúng đấy. Bạn có thể giải quyết bằng cách tạo 1 file .env và đưa toàn bộ những cái Private vào đó, đồng thời thêm file path .env vào mục #dependencies của file .gitignore để tránh commit nó lên Git nhé !

* Một lưu ý nhỏ:

Nếu Project bạn đang làm việc có sử dụng React Router thì rất có thể bạn sẽ gặp lỗi không vào được HomePage hoặc Github Redirect bạn sang Page 404. Thật tình mà nói thì khi lần đầu mình sử dụng gh-pagescũng gặp phải lỗi này, nguyên nhân là do package gh-pages không support front-end routing, bạn có thể xem Document tại đây để hiểu rõ hơn nhé.

Và cách giải quyết "mì ăn liền" nhanh nhất bạn có thể áp dụng là sử dụng HashRouter thay cho BrowserRouter

Summary

Để Deploy một dự án ta trãi qua các bước create-react-app sau đó install gh-pages tiếp đến là chỉnh sửa file package.json (thêm thuộc tính homapage, thêm 2 script predeploy và deploy) , remote control đến repo Git và cuối cùng là npm run deploy

Nếu bạn thấy bài viết hay và hữu ích thì hãy comment và chia sẽ nó để mọi người cùng biết nhé ! Cảm ơn các bạn !





Writer: Quốc Thái

Follow me via:
Facebook
Github