참고 영상: https://youtu.be/dalXCXCIPHM
1. VS Code Setting
먼저 아래와 같이 package.json 파일의 scripts에 "export": "next export",를 추가한다
그리고 npm run build를 터미널에 입력한다
나는 npm run build 입력했더니 오류 발생하여 https://plming.tistory.com/211 를 참고하여 오류를 해결하였다
그리고 next.config.js의 nextConfig에 다음의 코드를 추가해준다
images: {
loader: "akamai",
path: "",
}
그리고 npm run build와 npm run export를 터미널에 입력한다
npm run export를 입력한 뒤에는 아래처럼 out 폴더가 생성되어야 한다
2. Github Action Workflow Setting
** 이제 깃헙 액션에 workflow를 생성해야 하는데 그전에 브랜치를 설정해야 한다
나는 gh-pages로 설정한 채로 액션을 돌려서 오류가 있었다
메인 브랜치를 꼭 gh-pages가 아닌 브랜치로 설정해줘야 한다
나는main브랜치로 하였다
먼저 액션을 돌리기 전에 깃헙 토큰을 생성해야 하므로 아래의 링크에서 Create SSH Deploy Key 목차에 들어가 안내되어 있는대로 깃헙 토큰을 생성한다
https://github.com/marketplace/actions/github-pages-action#%EF%B8%8F-create-ssh-deploy-key
그 다음 깃헙 액션으로 들어가 workflow를 생성한다
그리고 아래와 같이 코드를 수정해준다
그 다음 아래의 링크에서의 deploy 코드를 복사하여 맨 아래에 붙여 넣은 후 아래와 같이 수정해준다
https://github.com/marketplace/actions/github-pages-action#options
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./out
이제 Workflow를 커밋하고 Actions에 들어가면 Create node.js yml workflow가 작동되는 것을 볼 수 있다
workflow를 클릭하여 들어갔을 때 오른쪽과 같이 모든 작업이 완료되면 Deploy 성공이다!
** github action을 통해 github에 올라간 파일들을 pull하는 것을 잊지 말아야 한다
Trouble Shooting
커밋한 내용을 다시 deploy하려고 했는데 이런 오류와 마주하였다
링크를 누르면 username.github.io/저장소면/링크로 가는 게 아니라 username.github.io/About 으로 이동하는 오류이다
이를 수정하기 위해 next.config.js의 basePath와 assetPrefix를 아래와 같이 작성하여 기본 도메인이 username.github.io/저장소명이 되도록 한다
그리고 변경사항을 main branch에 push한다
push를 하는데 github access unable 에러가 발생하여 터미널에 아래와 같이 입력하여 오류를 해결하였다
git remote set-url origin https://계정@github.com/계정/레퍼지토리명.git
push가 완료되면 액션이 돌아가는데 이를 마친 후 생성된 파일을 pull해주고 .github\workflows\node.js.yaml 파일로 들어가 -run: npm run export 밑에 아래의 코드를 추가해준다
- run: touch ./out/.nojekyll
그리고 다시 변경사항을 main branch에 push한다
주의 사항
npm run export는 next.js의 rewrite과 redirect 기능을 지원하지 않기 때문에 이 점을 유의해야 한다