Git에 내가 만든 프로젝트 퍼블리싱 하기

Git에 나의 프로젝트를 publish하는 것이 쉬울 줄 알았습니다만..많은 난관을 거쳤습니다.

처음엔 제가 작업하고 있는 프로젝트를 모두 git에 올리고 ,
바로 Settings - Pages - Build and deployment를 설정해주면
적용되는 줄 알았죠. 그리고 제게 돌아온 것은 401,404 Error들이었습니다.

저같은 Git린이들을 위해 이 글을 씁니다.

개발 환경 : Vite + React + Typescript

1. basename 설정

GitHub Pages에 배포할 때, BrowserRouter의 basename을 설정니다. main.tsx 또는 App.tsx에서 다음과 같이 설정합니다.

1.2) 빌드 경로 설정

vite.config.ts 파일에서 base 설정을 추가하여 GitHub Pages의 경로에 맞게 설정해야 합니다

1.3) 배포 스크립트 추가

package.json의 scripts 섹션에 배포 스크립트를 추가합니다.

1.4)저는 추가적으로 package.json폴더에 아래와 같이 Page주소를 명시해주었습니다.

2. 프로젝트 build

npm run build

-> 빌드한 후 dist 폴더의 내용이 GitHub Pages에 업로드되어야 합니다.

3. 프로젝트 deploy

3.2) gh-pages 패키지 설치

GitHub Pages에 배포하기 위해 gh-pages 패키지를 설치합니다. 이 패키지는 GitHub Pages에 쉽게 배포할 수 있도록 도와줍니다.

npm install --save-dev gh-pages

3.3) 배포

npm run deploy

4.GitHub Pages 설정

GitHub 리포지토리에서 Settings > Pages로 이동하여, 브랜치가 gh-pages 또는 main으로 설정되어 있는지 확인하세요. 또한 /dist 폴더가 배포 소스로 선택되어 있어야 합니다.

[dist 폴더의 구조]
dist 폴더에는 다음과 같은 파일들이 있어야 합니다:

index.html: 애플리케이션의 진입점이 되는 HTML 파일
assets: 자바스크립트, CSS, 이미지 파일 등이 포함된 폴더

4.2) gh-pages 브랜치가 배포 소스로 설정되어 있는지 확인

1. GitHub 리포지토리로 이동

GitHub에서 배포할 리포지토리로 이동합니다.

2. GitHub Pages 설정으로 이동

"Settings" 페이지에서 좌측 사이드바에 있는 "Settings" - > "Pages"를 클릭합니다.

3. 배포 소스 선택

"Source" 섹션에서 gh-pages 브랜치가 선택되어 있는지 확인합니다.
드롭다운 메뉴에서 gh-pages를 선택할 수 있습니다.

필요한 경우 "Save" 버튼을 클릭하여 변경 사항을 저장합니다.

4. 확인

"GitHub Pages" 섹션 아래에 있는 URL을 확인합니다. 이 URL은 GitHub Pages에서 호스팅되는 애플리케이션의 주소입니다. 예를 들어 https://.github.io// 형태입니다.

결과적으로 해당 레포지토리에서 Actions에 들어가면 아래와 같이 정상적으로 체킹된 것을 확인할 수 있습니다.