next.js static 페이지 문제로 새 글이 업데이트 되지 않는 현상 해결

노션으로 글은 열심히 작성했는데 실제 도메인으로 들어가보면 글이 업데이트 되지 않는 문제를 발견해버렸다.

처음에는 수동으로 vercel에서 Redeploy 하는 방식으로 해결했는데 내가 매일매일 수동으로 재배포 하는 것은 바보같은 짓이라는 생각이 바로 들었기 때문에 자동으로 Redeploy하는 방법을 찾아보았다.

Next.js static 페이지 업데이트가 되지않았던 이유와 해결 경험

요약 SSG페이지로 만든 뒤 업데이트하기 위해 revalidate를 아무리 짧게줘도 1시간 뒤에 이미지가 만료되는 현상이 발견됐다. 알고보니 revalidate 시간 동안은 이미 만들어진 static page를 전송해주고 revalidate 시간을 넘어 새로운 요청이 들어와야 새 정적 페이지를 만들어준다. 예를 들면 처음 빌드하고 페이지를 방문한 뒤 revalidate를 1분으로 짧게줘도 그 사이에 다른 누군가가 방문하지 않았고 1년이 지났다면 1년 뒤 처음 접속한 유저는 내가 아무리 블로그 글을 갱신했더라도 1년전 봤던 페이지와 같다는 것이다. 그리고 NextJS는 그제서야 revalidate 시간을 확인하고 새로 빌드해주게 된다. 아무래도 잦은 빌드시 성능적으로 비효율적이기 때문에 그런거같다. 두 가..

https://choiblog.tistory.com/68

역시나 이미 누군가는 비슷한 문제를 경험했고 답을 알려주셨다.

Deploy Hooks를 사용해서 특정 시간에 한 번씩 자동으로 재배포를 하게 하면 된다.

Vercel 에서 Deploy Hooks 만들기

내 배포 프로젝트의 Settings → Git에 가보면 Deploy Hooks 라는 메뉴가 보인다.

훅 이름을 정하고 타겟 브랜치 이름을 넣은다음 Create Hook 해준다.

그러면 위와 같이 hook URL을 생성해준다.

GitHub Actions로 크론 잡 만들기

그 다음 깃헙 액션으로 크론 잡을 만들어 위 훅을 때려줘야 한다.

.github/workflows/deploy.yml 을 만들었다.


name: Hourly Deploy to Vercel

on:
  schedule:
    - cron: '0 * * * *' # 매 시간마다 실행 (UTC 기준)

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Trigger Vercel Deploy Hook
        run: curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_모자이크

작성 후 푸시하면 아래처럼 Actions에 만들어 둔 workflow가 추가되는 것을 확인할 수 있다.

사실 저런 중요한 값들은 그대로 노출하면 안된다.

심지어 이 레포는 퍼블릭으로 노출되어 있기 때문에 더더욱 안 된다.

이럴 때는 Secrets를 써줘야 한다.

deploy hook URL을 아래처럼 Secrets에 추가해주고 deploy.yml 파일에서 불어다가 써야한다.


name: Hourly Deploy to Vercel

on:
  schedule:
    - cron: '0 * * * *' # 매 시간마다 실행 (UTC 기준)

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Trigger Vercel Deploy Hook
        run: curl -X POST ${{ secrets.VERCEL_DEPLOY_HOOK }}

secrets.변수명 으로 불러올 수 있고 ${{ secrets.변수명 }} 으로 적어주면 읽힌다.