📚 패트스캠퍼스 데브캠프 프론트엔드 9주차 학습 내용을 정리한 내용입니다.
📚 잘못된 정보는 댓글로 알려주시면 정말 감사합니다!
리액트 수업을 시작하면서 강의에서 진행되는 프로젝트를 직접 경험해보고 배포까지 해볼 수 있었습니다. GitHub Pages를 사용해서 배포한 과정을 정리하고 겪었던 어려움을 기록하고자 합니다.
gh-pages
1. gh-pages 모듈 설치
먼저 아래 명령을 통해 진행 중인 프로젝트에 gh-pages 모듈 설치가 필요합니다.
npm install gh-pages --save-dev2. URL 설정
GitHub Pages를 통해 내가 만든 프로젝트를 배포할 때, 루트 경로(username.github.io)가 아닌 서브 디렉토리(username.github.io/repository_name)를 지정하고자하면 URL 설정을 통해 배포 경로를 지정해 주어야 합니다.
이때 사용하는 빌드 도구에따라 조금씩 설정하는 방식이 다른데, gh-pages 공식 문서에서는 대표적으로 3가지 방법을 안내하고 있습니다.
create-react-app으로 프로젝트 생성한 경우
package.json 파일에 "homepage" 설정을 추가합니다.
(해당 방식으로 프로젝트를 생성한 경우 내부적으로 webpack을 사용한다고 합니다!)
"homepage": "https://{username}.github.io/{repository name}/",Vite를 사용하는 경우
vite.config.js 파일에 "base" 설정을 추가합니다.
base: "/{repository name}",Next.js를 사용하는 경우
next.config.js 파일에 "basePath" 설정을 추가합니다.
basePath: '/{repository name}',3. package.json 파일 설정
"scripts" 부분에 "deploy": "gh-pages -d dist"를 추가한다.
("predeploy" : "npm run build"를 추가해서 npm run deploy 명령 한번에 build 과정이 함께 진행되도록 설정할 수도 있다.)
문제상황
배포하는 과정에서 https://{username}/github.io/{repository}/{sub directory} 처럼 레포지토리의 루트 경로가 아닌 특정 폴더를 경로로 지정이 가능할까 해서 여러 방법을 시도해봤는데, 결국 실패..!
긴 시간 삽질 끝에 내린 결론은 GitHub Pages는 레포지토리의 하위 폴더를 URL로 설정하는 방식은 지원하지 않는 것 같습니다. (방법이 있다면 댓글로 알려주세요🙏)
자동화를 위해 .yml 파일 추가하기
프로젝트 변경이 생겼을 때 build, deploy 과정을 자동화하려면 레포지토리/.github/workflows/deploy.yml 파일을 추가해야 합니다! (해당 경로를 지켜줘야 제대로 동작한다)
deploy.yml 파일 작성하기
name: Deploy to GitHub Pages
on:
push:
branches:
- main # 배포할 브랜치를 지정. 해당 브랜치 변동사항을 감지.
jobs: # 워크플로 내에서 수행할 작업들을 정의
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2 # 레포지토리의 코드를 체크아웃
- name: Setup Node.js
uses: actions/setup-node@v2 # Node.js 환경을 설정
with:
node-version: '22' # 사용 중인 Node.js 버전
- name: Install dependencies # 패키지 설치 과정
run: |
cd react-budget-app # 서브 디렉토리 이동(필요한 경우 추가)
npm install
- name: Build # 빌드 스크립트 실행
run: |
cd react-budget-app
npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3 # GitHub Pages에 배포
with:
github_token: ${{ secrets.GITHUB_TOKEN }} # GitHub에서 제공하는 기본 인증 토큰
publish_dir: ./react-budget-app/dist # Vite 빌드의 출력 디렉토리
publish_branch: gh-pages # 배포할 브랜치스크립트 실행 중 권한 오류 발생시
레포지토리의 Settings 탭에 들어간 후 Actions/General의 Workflow permissions에서 Read and write permissions 옵션을 선택하면 바로 해결!
(또는 .yml 파일에 permission 관련 설정을 추가하면 됩니다!)
비록 원하는 방법으로 URL을 설정할 수 없었지만😞(애초에 레포를 왜 그렇게 만들었을까ㅎ), 그 과정에서 GitHub Actions를 통해 build, deploy 를 자동화하는 방법을 알게되어 직접 적용해 볼 수 있었다는 점에 유의미한 결과가 있었다고 생각하며 계속해서 열공모드. 🔥
