نحوه استقرار یک برنامه React به صورت رایگان با صفحات GitHub

نحوه استقرار یک برنامه React مسیریابی شده در صفحات GitHub را در چند مرحله ساده بیاموزید.

اگر پروژه ای دارید و می خواهید بدون خرید دامنه آن را به صورت رایگان میزبانی کنید، استفاده از GitHub Pages یک انتخاب عالی است. GitHub Pages مخازن شما را به وب سایت تبدیل می کند و به شما اجازه می دهد تا سایت های پروژه نامحدود را میزبانی کنید.

استقرار یک سایت React با ناوبری نیاز به پیکربندی اضافی در مقایسه با استقرار یک سایت استاتیک دارد. این آموزش شما را در کل فرآیند از ایجاد یک مخزن GitHub تا داشتن یک سایت میزبان راهنمایی می کند.

یک React App ایجاد کنید

برای اهداف نمایشی، باید یک پروژه React با مسیریابی ایجاد کنید که بعداً آن را مستقر خواهید کرد. با این حال، اگر یک پروژه React موجود دارید، از این مرحله رد شوید.

در ترمینال، دستور create-react-app را اجرا کنید تا به سرعت پروژه React را داربست کنید:

npx create-react-app react-gh

به پوشه ایجاد شده بروید و برنامه خود را شروع کنید.

npm run start

سپس، پوشه پروژه را با ویرایشگر کد دلخواه خود باز کنید. در پوشه src همه چیز را به جز App.js و index.js حذف کنید. محتویات App.js را با موارد زیر جایگزین کنید:

function App() {
  return (
    <div>
     <h2>Github Pages</h2>
     <h3>Deploying React to Github</h3>
    </div>
  );
}
export default App;

مسیریابی را اضافه کنید

برای افزودن مسیریابی به برنامه خود، ابتدا react-router-dom را نصب کنید:

npm install react-router-dom

در App.js، پیوند را به صفحه درباره اضافه کنید:

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;

از آنجایی که App.js به عنوان صفحه اصلی شما عمل می کند، فقط باید مولفه About را ایجاد کنید:

const About = () => {
    return ( 
        <div>
          <Link to="/">Home</Link>
          <h2>About Page</h2>
        </div>
        );
}
export default About;

اکنون باید مسیرها را ایجاد کرده و یک روتر React را پیکربندی کنید.

index.js را تغییر دهید تا URL را با اجزای مربوطه مطابقت دهد:

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")
);

به نحوه استفاده از HashRouter به جای BrowserRouter توجه کنید. استفاده از BrowserRouter باعث ایجاد خطای 404 می شود. این به این دلیل است که مسیریابی در صفحات GitHub متفاوت عمل می کند. Hashrouter خطایی ایجاد نمی کند زیرا از بخش هش URL برای همگام سازی UI با URL استفاده می کند.

مرحله آخر، انجام تمام تغییرات جدید در Git است:

git add .
git commit -m "Create React app"

مخزن GitHub را ایجاد کنید

از آنجایی که صفحات GitHub با تبدیل مخزن به یک وب سایت، برنامه شما را میزبانی می کند، باید یک مخزن GitHub ایجاد کنید. به حساب GitHub خود بروید و یک مخزن جدید با همان نام پروژه خود ایجاد کنید.

سپس، مخزن GitHub را به عنوان یک راه دور به مخزن محلی خود اضافه کنید:

git remote add origin <https://github.com/><username>/<repository name>.git

در نهایت، مخزن محلی را به GitHub فشار دهید:

git branch -M main
git push --set-upstream origin main

برنامه React را در صفحات GitHub اجرا کنید

برای استفاده از GitHub Pages، ابتدا باید آن را نصب کنید:

npm install gh-pages

gh-pages به شما این امکان را می دهد که شعبه gh-pages را ایجاد کنید که در آن کد خود را مستقر می کنید.

در مرحله بعد، به فایل package.json خود بروید و صفحه اصلی را که URL اصلی برنامه خواهد بود، اضافه کنید:

"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"
  }

برای تکمیل فرآیند استقرار دستور زیر را اجرا کنید:

npm run deploy

برنامه شما اکنون در GitHub مستقر شده است و می توانید از آدرس https://.github.io/ بازدید کنید.

با صفحات GitHub کارهای بیشتری انجام دهید

GitHub Pages یک راه ساده برای استقرار وب سایت ها در اینترنت به صورت رایگان ارائه می دهد. در حالی که شما فقط دیدید که چگونه می توانید یک پروژه ساده React را اجرا کنید، صفحات GitHub به شما اجازه می دهد کارهای بیشتری انجام دهید. به عنوان مثال، می توانید یک وبلاگ کامل با استفاده از Jekyll ایجاد کنید و حتی آن را با استفاده از یک دامنه سفارشی میزبانی کنید.

منبع مقاله