GitHub Actions와 Puppeteer를 활용한 Next.js 앱 자동 데이터 업데이트 및 배포 워크플로우 구축

핵심 기술

이 콘텐츠는 GitHub Actions와 Puppeteer를 활용하여 외부 데이터를 자동으로 가져오고, 이를 Next.js 웹 앱의 콘텐츠를 업데이트하며, 최종적으로 CI/CD 파이프라인을 통해 애플리케이션을 재배포하는 완전 자동화 워크플로우 구축 방법을 안내합니다.

기술적 세부사항

• 데이터 스크래핑: Puppeteer를 사용하여 외부 웹사이트에서 뉴스 헤드라인 및 상세 정보를 스크래핑합니다.
  • 스크래핑된 데이터는 src/data/news.json 파일에 저장됩니다.
  • CI 환경에서 Puppeteer 실행 시 --no-sandbox 및 --disable-setuid-sandbox 옵션이 필수적입니다.
• GitHub Actions 워크플로우: .github/workflows/scrape.yml 파일을 통해 자동화 워크플로우를 설정합니다.
  • 워커플로우는 12시간마다 또는 수동으로 실행되도록 예약될 수 있습니다.
  • 주요 단계: 의존성 설치, 스크래퍼 실행, 업데이트된 news.json 파일 커밋 및 푸시.
  • GitHub Actions 봇의 Git 사용자 이름 및 이메일 설정.
  • permissions: contents: write 설정으로 저장소에 대한 쓰기 권한 부여.
• 자동 Vercel 재배포: Vercel이 GitHub 저장소와 연동되어 있어, news.json 파일이 업데이트되면 Vercel이 자동으로 앱을 재빌드하고 재배포합니다.

개발 임팩트

• 수동 개입 없이 최신 데이터를 항상 웹사이트에 표시할 수 있습니다.
• 개발자의 시간을 절약하고, 데이터 업데이트 및 배포 프로세스의 효율성을 극대화합니다.
• 프로덕션 레디(Production-ready)하고 유지보수가 용이한 자동화된 데이터 파이프라인을 구축할 수 있습니다.

커뮤니티 반응

톤앤매너

IT 개발자를 위한 실질적인 가이드라인을 제공하는 전문적이고 기술적인 톤을 유지합니다.