Angular 19 GitHub Pages에 GitHub Actions로 배포하는 방법
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

Angular 19을 GitHub Pages에 GitHub Actions로 배포하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

DevOps

대상자

Angular 19 프로젝트를 GitHub Pages에 자동 배포하는 개발자, GitHub Actions를 사용한 CI/CD 경험자

핵심 요약

  • GitHub Actions 워크플로우actions/upload-pages-artifact@v3actions/deploy-pages@v4의 호환성 문제를 해결해야 함
  • angular.jsonbaseHrefoutputPath 설정이 프로젝트 이름리포지토리 이름을 일치시켜야 404 오류를 방지
  • Angular 17+ 부터 dist/[프로젝트명]/browser 폴더가 빌드 결과물의 기본 경로로 변경됨

섹션별 세부 요약

1. 워크플로우 템플릿

  • actions/upload-pages-artifact@v3actions/deploy-pages@v4를 사용해 빌드 및 배포 프로세스 구현
  • npm ci, npx ng build 명령어로 빌드 수행 후 .nojekyll 파일 생성
  • dist/[프로젝트명]/browser 폴더를 GitHub Pages에 업로드

2. 첫 번째 문제: `Missing download info`

  • actions/upload-pages-artifact@v2 대신 v3을 사용해도 호환성 문제 발생
  • deploy-pages@v4upload-pages-artifact@v2의 아티팩트 형식을 기대함
  • 문서화가 뒤처진 예제 참고 시 버전 불일치 문제 발생

3. 커스텀 도메인 문제

  • GitHub Pages 기본 도메인([유저명].github.io) 대신 altaskur.live와 같은 커스텀 도메인 사용 시
  • 프로젝트 경로([리포지토리명])와 baseHref 설정 미일치로 404 오류 발생

4. 프로젝트 경로 문제

  • angular.json에서 outputPathbaseHref 값을 리포지토리 이름으로 설정해도 404 오류 지속
  • dist/[프로젝트명]/browser 폴더가 실제 빌드 결과물 경로임을 확인
  • browser 폴더를 대상으로 설정해 index.html 파일이 존재하는지 확인

5. 배포 내용 문제

  • ls -lah dist/[프로젝트명]/browser 명령어로 browser 폴더 내 파일 존재 여부 확인
  • index.html 파일이 browser 폴더에 위치해 있어 dist/[프로젝트명] 폴더만 지정하면 404 발생

6. 결론

  • Angular 17+ 부터 빌드 결과물 경로가 browser 폴더로 변경됨
  • angular.jsonoutputPathbaseHref 설정, GitHub Actions 워크플로우의 dist/[프로젝트명]/browser 경로를 정확히 일치시켜야 함

결론

  • Angular 19의 GitHub Pages 자동 배포browser 폴더 경로 설정, baseHrefoutputPath 일치, actions/upload-pages-artifact@v3deploy-pages@v4 호환성 문제 해결이 핵심
  • dist/[프로젝트명]/browser 폴더 내 index.html 파일 존재 여부를 ls 명령어로 확인해 빌드 결과물 위치를 정확히 파악해야 함