Cách lưu trữ app React với Github miễn phí

Setup Repository(kho lưu trữ)

Tất cả code được lưu trong kho lưu trữ. Vào trang profile GitHub của bạn và tạo một kho lưu trữ mới. Ví dụ, tôi muốn tạo một kho lưu trữ có tên React-Deploy.

Nếu bạn nhấp vào nút Create repository, sẽ chuyển sang một trang khác. Đừng nhấn vào nó, đừng tắt tab, hãy giữ nguyên trang.

Setup và Deploy App React

Đối với hướng dẫn này, chúng ta sẽ sử dụng create-react-app. Do đó, chạy các lệnh sau trong PowerShell (Windows) / Terminal(Linux)

npx create-react-app react-deploy
cd react-deploy

Sau đó, mở project bằng VSCode và tiếp tục gõ các lệnh sau trong PowerShell / terminal. Thay thế username  bằng username của bạn.

git init
git add .
git commit -m "add: initialCommit"
git remote add origin https://github.com/username/React-Deploy.git
git push origin master

Nếu bạn đã deploy app React, hãy làm theo các hướng dẫn tiếp theo. Trước đó, hãy đảm bảo code của bạn đã được push lên tài khoản GitHub.

Bước đầu tiên, cài đặt gh-page dưới môi trường dev của app React.

npm install gh-pages --save-dev

Đối với bước thứ hai, mở file package.json trong app React và thêm homepage.

Xác định homepage là chuỗi http://{username}.github.io/{repo-name}, trong đó username là username của bạn trên Github và {repo-name} là tên của kho lưu trữ.

Ví dụ, username là hocweb và kho lưu trữ GitHub là React-Deploy:

“homepage”: “http://hocweb.github.io/React-Deploy"

Bước thứ ba, hãy thêm các đoạn câu lện script deploy vào trong file package.json.

Trong tệp package.json, thêm các thuộc tính predeploy và deploy như sau. File package.json của bạn sẽ trông như thế này :

"scripts": {
 "start": "react-scripts start",
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build",
 "build": "react-scripts build",
 "test": "react-scripts test",
 eject": "react-scripts eject"
},

Bây giờ, deploy app React của bạn lên GitHub. Vì vậy, run lệnh sau trong PowerShell / terminal

npm run deploy

Khi bạn đã deploy thành công, hãy mở kho GitHub trong trình duyệt của bạn.

Nhấp vào Settings của kho lưu trữ và cuộn xuống cho đến khi bạn đến phần Pages GitHub và ở Source chọn gh-page.

Như vậy đã xong, app React của bạn đã được lưu trữ trên Github

Tùy chỉnh domain(tên miền)

Nếu bạn không thích tên miền mặc định github.io, hãy chọn một tên miền khác. Trang Github cho phép bạn sử dụng tên miền riêng và thiết lập rất dễ dàng như ăn kẹo.

Vào phần settings, kéo xuống mục Custom domain, và gõ vào tên miền của bạn muốn. File CName sẽ được tạo ra, và đặc biệt nên nhớ là đừng bao giờ xóa nó.

Xong, tên miền của bạn đã được thay đổi.

Chuyển đến tên miền bạn đã mua, đăng nhập và chọn tên miền bạn muốn sử dụng. Kiểm tra  Manage DNS hoặc DNS Settings. Bây giờ bạn có hai cách để cải tiến DNS của mình

Records

Đây thực chất là một miền apex đảm bảo rằng nếu bất kỳ người dùng nào viết Reac-deploy.cf thay vì https: /react-deploy.cf hoặc www.react-deploy.tk, thì nó vẫn vào web của bạn

Có bốn địa chỉ IP mà bạn phải sử dụng để kết nối với máy chủ. Để chắc chắn hiểu về nó bạn nên đọc document chính thức .

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

CNAME

Sử dụng CNAME nếu bạn chọn www hoặc một số tên miền phụ tương tự khác. Chúng ta cần trỏ tên miền phụ vào kho lưu trữ chính.

Do đó, chúng ta chuyển hướng đến hocweb.github.io/React-Deploy.

Bây giờ cả hai đã được setup, có thể mất tới 24 giờ mới thành công. Khi thành công, thử tìm kiếm trang web của bạn bằng cách nhập tên miền tùy chỉnh của bạn.

Subdomain(tên miền phụ)

Chúng tôi chỉ thiết lập một tên miền phụ nhưng nếu bạn có một diễn đàn và muốn có một tên miền phụ riêng biệt như, blog.react-deploy.tk thì sao?

Xây dựng một tệp riêng và ngay từ đầu, hãy làm theo cùng một phương pháp.

Bây giờ hãy chuyển đến bảng điều khiển tên miền của bạn và thêm file CNAME khác. Lần này, tên miền phụ của bạn đã sẵn sàng thay vì sử dụng trang www. Đảm bảo bạn sử dụng tên miền phụ (tên) trong cài đặt trong kho lưu trữ.

Kết luận

Thật dễ dàng để tạo một app React và deploy nó lên GitHub. Có các trang web lưu trữ miễn phí khác như Firebase, Heroku, 000webhost, v.v. Do đó, thật dễ dàng để lưu trữ trên GitHub.

Trang GitHub là miễn phí. Bạn có thể lưu trữ , bao gồm tên miền tùy chỉnh, tên miền phụ và tất cả thông qua HTTPS .

Hãy tham khảo thêm : Tự học React JS thời đại dịch Corona nCoV – Phần 1