리액트 깃허브 페이지에 배포하는 개념 및 방법

 

기본 개념은 리액트 파일을 빌드(여러파일을 하나의 파일로 합치는 과정)하면 기본적인 html, css, javascript 파일이 build 폴더에 생성되고, 해당 폴더 안의 파일들을 깃허브 저장소에 업로드하면 된다. 

 

1. 깃허브 저장소 이름을 BrowserRouter 컴포넌트의 basename 으로 설정해준다. 

2. package.json 파일에 homepage 주소를 설정해준다. 

3. public/index.html 의 head 부분에 base 태그를 추가해준다. 

4. 루트폴더에서 npm run build 를 한다. 

5. build 폴더로 이동하여 build 폴더의 코드를 깃허브에 업로드한다. 

6. 깃허브에서 깃허브 페이지를 설정한다. 

 

<BrowserRouter basename="/dongjin">
    <Header/>
    <Routes>
      <Route path="/" element={<Main/>} exact/>
      <Route path="/home" element={<Main/>} />
      <Route path="/about" element={<About/>} />
      <Route path="/project" element={<Project/>} />
      <Route path="/contact" element={<Contact/>} />
    </Routes>
    <Footer/>
 </BrowserRouter>

dongjin 은 깃허브저장소 이름의 예시이다.

"homepage": "https://sssssqew.github.io/dongjin/"

package.json 에 위의 예시처럼 homepage 카테고리에 위와 같이 작성한다. sssssqew 위치에는 sssssqew 를 삭제하고 자신의 깃허브주소를 적어주면 된다. (깃허브 ID)

<base href="https://sssssqew.github.io/dongjin/">

public/index.html 에 위와 같이 작성하면 된다. package.json 의 homepage 주소와 동일하다.