1. Github Pages란?
깃헙에서 제공하는 정적 웹사이트 호스팅 서비스
깃헙으로 프로젝트를 진행중이라면 레포지토리를 통해 손쉽게 웹사이트를 호스팅할 수 있다.
나같은 경우는 Next로 프로젝트를 진행 중인데, 백엔드 팀원들과 프론트 구현 정도를 공유하기 위해 도입했다. 로컬로 실행해 확인하는 건 매우 번거롭다 판단했기 때문이다.
2. Next.js 호스팅하기
🚨 호스팅을 진행하기 전에 호스팅하려는 레포지토리가 public인지 확인하자
2-1. 깃헙 설정
레포지토리에서 Settings로 들어간다.
Pages에서 Github Actions를 지정하고 Configure를 누른다.
그러면 무시무시한 .yml 파일이 기다리고 있다. 여기서 몇 가지 설정을 번경해야 한다.
1️⃣ Node 버전 변경 (16 -> 18+)
버전 변경을 해주지 않으면 unhandledRejection ReferenceError: Headers is not defined 에러가 뜬다.
해당 에러는 브라우저 환경에서 기본적으로 제공되는 Headers 객체를 찾을 수 없을 때 발생한다. 주로 서버 환경에서 발생하는데, 서버 환경에서는 Headers 객체가 제공되지 않기 때문이다. 16 버전으로 설정한다면 깃헙에서 강제적으로 14로 버전을 다운시켜 설치해 위 오류를 뱉어낸다.
2️⃣ workflow에서 next export 명령어 제거
GitHub Pages는 서버리스 호스팅만 제공하고 있어 동적 서버를 요구하는 next export 명령어를 지원하지 않는다.
GitHub Pages는 정적 파일을 제공하기 위해 미리 빌드된 파일을 배포하는 방식을 사용해야 하는데, 이에 대한 설정은 아래 Next.js 설정에서 하자.
수정 후 커밋을 한다.
레포지토리로 돌아오면 workflow 파일이 생긴 것을 확인할 수 있다.
🔖 참고
레포지토리 루트에 package.json이 없어서 폴더 내로 이동해야 한다면 woroflow 파일에서 env 설정을 해줘야 한다. 자세한건 여기를 참고하자.
2-2. Next.js 설정
next.config.js에 몇 가지 속성을 추가해줘야 한다.
- 정적인 파일을 생성할 수 있도록
output:'export'추가 - Next 공식문서
const nextConfig = {
output: 'export',
}위만 설정하면 이미지와 css가 전부 로드되지 않는 문제가 발생한다. 정적 파일을 불러오는 경로가 올바르지 않기 때문이다. 배포모드일 때 prefix를 붙여주도록 설정해야 한다.
Github Pages에 가면 사이트 주소를 확인할 수 있다.https://[유저 아이디].github.io/[레포지토리]/
assetPrefix추가- Next 공식문서
const prefix =
process.env.NODE_ENV === 'production' ? 'https://yeji-j.github.io/test/' : ''
const nextConfig = {
output: 'export',
assetPrefix: prefix,
}이제 main에 푸시하면 (workflow 파일에 main으로 설정되어있다) 자동으로 빌드해서 호스팅해준다. 해당 링크를 클릭하면 바로 확인할 수 있다.
