Cách triển khai ứng dụng React miễn phí với trang GitHub
Nếu bạn có một dự án và muốn lưu trữ dự án đó miễn phí mà không cần mua miền, thì việc sử dụng GitHub Pages là một lựa chọn tuyệt vời. GitHub Pages chuyển đổi kho lưu trữ của bạn thành các trang web và cho phép bạn lưu trữ các trang web dự án không giới hạn.
Việc triển khai một trang React với điều hướng yêu cầu thêm cấu hình so với việc triển khai một trang tĩnh. Hướng dẫn này sẽ hướng dẫn bạn toàn bộ quá trình từ việc tạo kho lưu trữ GitHub đến việc có một trang web được lưu trữ.
Mục Lục
Tạo ứng dụng React
Với mục đích trình diễn, bạn cần tạo một dự án React với định tuyến mà bạn sẽ triển khai sau này. Tuy nhiên, nếu bạn đã có dự án React, hãy bỏ qua bước này.
Trong thiết bị đầu cuối, chạy tạo-phản ứng-ứng dụng lệnh để nhanh chóng tạo ra một dự án React:
npx create-react-app react-gh
Điều hướng đến thư mục đã tạo và khởi động ứng dụng của bạn.
npm run start
Tiếp theo, mở thư mục dự án bằng trình soạn thảo mã ưa thích của bạn. bên trong src thư mục, xóa mọi thứ ngoại trừ App.js và index.js. Thay thế nội dung trong App.js bằng nội dung sau:
function App() {
return (
<div>
<h2>Github Pages</h2>
<h3>Deploying React to Github</h3>
</div>
);
}
export default App;
Thêm định tuyến
Để thêm định tuyến vào ứng dụng của bạn, trước tiên, hãy cài đặt react-router-dom:
npm install react-router-dom
Trong App.js, hãy thêm liên kết đến trang giới thiệu:
import { Link } from "react-router-dom";
function App() {
return (
<div>
<Link to="/about">About</Link>
<h2>Github Pages</h2>
<h3>Deploying React to Github</h3>
</div>
);
}
export default App;
Vì App.js sẽ hoạt động như trang chủ của bạn, bạn chỉ cần tạo Về thành phần:
const About = () => {
return (
<div>
<Link to="/">Home</Link>
<h2>About Page</h2>
</div>
);
}
export default About;
Bây giờ, bạn cần tạo các tuyến đường và cấu hình một bộ định tuyến React.
Sửa đổi index.js để khớp URL với các thành phần tương ứng:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter, Routes, Route } from "react-router-dom";
import About from "./About";
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<Routes>
<Route path="/" element={<App/>} />
<Route path="/about" element={<About/>}/>
</Routes>
</HashRouter>
</React.StrictMode>,
document.getElementById("root")
);
Chú ý cách bạn đã sử dụng HashRouter thay vì BrowserRouter. Sử dụng BrowserRouter sẽ gây ra lỗi 404. Điều này là do định tuyến hoạt động khác nhau trong các trang GitHub. Hashrouter không gây ra lỗi vì nó sử dụng phần băm của URL để đồng bộ hóa giao diện người dùng với URL.
Bước cuối cùng là thực hiện tất cả các thay đổi mới đối với Git:
git add .
git commit -m "Create React app"
Tạo kho lưu trữ GitHub
Vì Trang GitHub sẽ lưu trữ ứng dụng của bạn bằng cách chuyển đổi kho lưu trữ thành một trang web, bạn cần tạo một kho lưu trữ GitHub. Truy cập tài khoản GitHub của bạn và tạo một kho lưu trữ mới có cùng tên với dự án của bạn.
Tiếp theo, thêm kho lưu trữ GitHub vào kho lưu trữ cục bộ của bạn dưới dạng điều khiển từ xa:
git remote add origin <https://github.com/><username>/<repository name>.git
Cuối cùng, đẩy kho lưu trữ cục bộ lên GitHub:
git branch -M main
git push --set-upstream origin main
Triển khai ứng dụng React cho các trang GitHub
Để sử dụng GitHub Pages, trước tiên bạn sẽ phải cài đặt nó:
npm install gh-pages
trang gh sẽ cho phép bạn tạo trang gh chi nhánh nơi bạn sẽ triển khai mã của mình.
Tiếp theo, chuyển đến của bạn package.json gửi và thêm trang chủ sẽ là URL trang chủ của ứng dụng:
"homepage": "https://<username>.github.io/<repository-name>/",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Chạy lệnh sau để hoàn tất quá trình triển khai:
npm run deploy
Ứng dụng của bạn hiện đã được triển khai tới GitHub và bạn có thể truy cập nó tại https: //
Làm được nhiều việc hơn với các trang GitHub
GitHub Pages cung cấp một cách đơn giản để triển khai các trang web lên internet miễn phí. Mặc dù bạn chỉ biết cách bạn có thể triển khai một dự án React đơn giản, nhưng GitHub Pages cho phép bạn làm được nhiều hơn thế. Ví dụ: bạn có thể tạo một blog toàn diện bằng cách sử dụng Jekyll và thậm chí lưu trữ nó bằng miền tùy chỉnh.
Đọc tiếp
Giới thiệu về tác giả
