최근 Nextjs로 개인프로젝트를 진행하며 임시로 배포할일이 생겼는데, 그 당시 Github Pages를 사용하여 배포했던 방법을 이번 포스팅에 정리해봤습니다.
Github Pages 란?
Github Pages는 레파지토리에 저장된 정적페이지를 무료로 호스팅 해주는 서비스이다.
기본적으로 Github는 username.github.io 또는 username.github.io/repository와 같은 도메인 주소를 사용하게 되지만 커스텀 도메인으로도 사용가능하다
Github page 패키지 설치하기
만들었던 프로젝트를 깃허브를 통해 배포하는 과정으로는 build용 파일을 생성한 후 그 파일을 gh-pages브랜치에 올려야한다. 이런 과정을 Github page 패키지를 통해 조금이나마 간소화 할 수 있다.
npm install --save gh-pages
package.json 수정하기
package.json에서 homepage 연결 및 deploy와 predeploy를 같이 추가합니다.
...
"homepage": "https://깃허브아이디.github.io/레파지토리이름/",
scripts : {
"build": "next build && next export",
"predeploy": "npm run build",
"deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles"
},
...추후 npm run deploy 명령어로 배포를 시작한다면 predeploy -> deploy 순으로 진행된다. 그래서 그 predeploy와 deploy가 하는일로는....
- predeploy - npm run build 명령어로 프로젝트를 빌드함.
- deploy - 이 스크립트는 .nojekyll 파일을 생성하고 그 파일을 깃허브페이지에 배포한다.
CSS 적용시키기
Next.js로 만든 프로젝트를 깃허브에 배포할 때, 배포된 사이트에 css가 적용되지 않은것을 볼 수 있다.
이때는 next.config.js에서 assetPrefix(js,css,이미지파일 등을 접근할때 사용하는 변수)변수에서 경로를 수정해주면 된다.
module.exports = {
assetPrefix:
process.env.NODE_ENV === "production"
? "https://깃허브아이디.github.io/레파지토리이름"
: "",
};배포하기
npm run deploy
npm run deploy 후 'Published'가 뜨면 성공이다.
이렇게 배포에 성공한다면 gh-pages라는 브랜치가 자동으로 생성되며, 해당 브랜치에 build 파일들이 업로드된다.
번외
1. 깃허브 Secrets 사용하여 API Key 보안하기
중요한 API키 등의 환경변수들은 깃허브, 오픈소스에 올려면 안되는데, 이것은 github actions Secrets에 올리면 된다.
1. 레파지토리 settings -> Secrets and variabels -> Actions - > new Repository secret
2. 환경변수명과 키값 입력하기
