일단 이 포스팅을 남기는 이유는
vite, react, pnpm 을 사용해 github page를 배포하려다 호되게 후두려 맞았기 때문이며, 지난날 삽질의 기록이기도 하다.
일단 vite 생태계는 좀 다르다. 빌드 결과물의 경로가 build 디렉터리가 아닌 dist 디렉터리를 바라본다.
또한 baseurl 도 잘 지정해주어야 한다. 빌드는 결국 경로 지정 싸움이기 때문이다.
그래서 vite 웹사이트에서 static site build 를 안내하는 섹션이 따로 있을 정도이다.
그래서 배포시 extra care 가 필요하다고 본다.
기억나는 데로 크게 세 가지 범주로 나누어 볼 수 있다.
1. 깃헙 페이지 세팅하기
2. vscode 세팅하기
3. 깃헙 페이지 배포하기
Git - Vite와 React, pnpm 으로 github page 배포하기
내 깃헙 아이디가 saebalja 라고 한다면, saebalja.github.io 라는 레포지토리 가 필요하다
그리고 거기에서 작업을 시작해야한다.
깃헙 페이지에서 세팅하기
github 사이트의 레포지토리 페이지에서 ⚙ [세팅] - pages 로 들어간다.
Build and deployment 섹션에서 branch 를 main 과 /root 로 두고 저장해준다
vscode 에서 세팅하기
- gh-pages 를 설치해주고
- package.json 및 vite.config.ts 그리고 Router 를 손봐줄 것이다
1. gh-pages 설치하기
깃헙 페이지로 배포하려면 빌드된 파일을 gh-pages 브랜치에 푸시를 해줘야 배포가 된다.
이 패키지를 설치하면 간단한 명령어로 자동으로 푸시할 수 있다.
$ pnpm add gh-pages
2. package.json
여기서는 gh-pages 에 관한 명령어들을 추가해줄 것이다.
// your package.json
{
"homepage": "https://beemee-p.github.io/",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"server": "nodemon server.js",
"predeploy": "pnpm run build", // 요거랑
"deploy": "gh-pages -d dist" // 이걸 추가해주자
},
.
.
.
나머지 내용들
}
3. vite.config.ts
여기서는 base 옵션에 '/' 를 추가해주자
(여러 포스팅 참고해보면 상대경로로 하려면 base="" 이렇게 빈칸으로 남겨두라고 하는데, 내경우에는 절대경로라도 잘 보였다.)
import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: "/", // 바로 여기
});
4. index.tsx
여기서는 Router 부분을 손봐줘야 된다. 이 부분을 몰라서 배포가 되도 에러 없이 흰 화면이 보이는 이슈가 있었다.
gh-pages 는 리액트 라우터의 BrowserRouter을 지원하지 않기 때문이다.
HashRouter 도 사용해봤지만 url 뒤에 /#/ 이 붙는 이슈가 있어서 다시 BrowerRouter 로 돌아왔다.
그럴 때는 base 태그 하나를 index.html 에 추가해주어 해결한다.
import React from "react";
import ReactDOM from "react-dom/client";
import {
RouterProvider,
createHashRouter,
} from "react-router-dom";
import App from "./App.tsx";
import "./index.css";
const router = createHashRouter([
{
path: "/",
element: <App />,
loader: () => <div>로딩중...</div>,
ErrorBoundary: () => <div>404 NOT FOUND</div>,
}
]);
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
5. index.html
<base href="/" /> 태그를 추가해주자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<base href="/" /> # 여기 이렇게 추가 해주자
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>깃헙 배포 테스트 페이지</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
여기까지 수정한 파일들을 커밋하고, main 브랜치로 푸시해주자
깃헙 페이지로 배포하기
위의 과정을 다 거쳤으면 main 브랜치 기준으로 작업 내용을 origin/main 에 푸시해주자
작업내용을 main 브랜치에 저장해주었다면, 배포해주자
... main 브랜치로 작업내용 커밋 & 푸쉬 후
$ pnpm run deploy
이렇게 되면 gh-pages 라는 원격 브랜치가 자동으로 생성되고, 그 브랜치에는 빌드된 아웃풋이 들어있다
근데 우리는 굳이 거길 건드릴 필요가 없다. 깃헙 내부에서 배포에 사용되는 브랜치이기 때문이다
깃헙 페이지 세팅 - pages 로 다시 돌아와서 branch 를 gh-pages 로 바꾸고 save 해주자
그리고 github.io 로 배포된 주소로 들어가보면 배포가 잘 되어 있다
'Git' 카테고리의 다른 글
| Git - fork 하고 원격 레포 동기화하기(fetch, pull request) (0) | 2024.08.28 |
|---|---|
| Git - Obsidian 메모앱과 깃헙 연동하기 (0) | 2024.08.13 |
| Git - 실행오류 this exceeds GitHub's file size limit of 100.00 MB (0) | 2024.08.07 |
| Git - Remote Origin Already Exists 에러 해결하기 (3) | 2023.08.09 |
| Git(39) 로컬 브랜치 덮어쓰기 (0) | 2023.02.09 |
댓글