GitHub Page에 Angular 배포하기

---

https://<계정>.github.io/<repository name>/ 에 Angular를 배포하기 위한 방법입니다.
repository가 public으로 설정되어 있다는 가정 하에 진행합니다.
만약 repository가 private로 설정되어 있다면 GitHub Pro 이상의 계정을 구매해야 합니다.


git 사용법에 대해서는 별도로 작성하지 않습니다. git 사용법이 궁금하다면 아래 링크를 참고해 주세요.

Git :: 설치부터 기본 사용법까지 (1) - git 설치

Git :: 설치부터 기본 사용법까지 (2) - git 사용법(github, 명령어)

Git :: 설치부터 기본 사용법까지 (3) - git 으로 협업(팀프로젝트)하기

---

패키지 설치 및 세팅

angular-cli-ghpages 패키지 설치

$ npm install -g angular-cli-ghpages

프로젝트 빌드 & 위치 지정

명령어 실행 전 Angular 프로젝트 루트 경로에 있어야 합니다!

$ ng build --prod --base-href "https://<github-user-name>.github.io/<repository-name>/"

혹시 --prod 에서 오류가 발생한다면 아래 코드로 다시 시도해 주세요.

$ ng build -c production --base-href "https://<github-user-name>.github.io/<repository-name>/"

-c production == --prod

둘이 같은 의미인데 저는 prod는 오류나더라구요... (찾아도 잘 안 나와서 이유는 아직도 모르겠어요ㅜㅜ)

해당 명령어를 통해 배포하려는 주소에 맞게 빌드가 됩니다.

git 배포

$ ngh --dir dist/<project-name>

해당 명령어를 통해 실제로 git에 배포가 됩니다.

명령어 실행 후 gh-pages 라는 branch를 확인할 수 있습니다.

---

github repository 설정

1. Repository Settings
   

   

2. Pages
   

   

3. Source Select
   

   

   
   Branch가 gh-pages로 선택되어 있는지 확인 후 Save로 저장합니다.

---

페이지 확인

https://<github-user-name>.github.io/<repository-name>/

자신의 계정과 repository 이름 입력 후 접속하면 확인이 가능합니다.

배포 후 바로 반영이 안 되므로 3분 정도는 여유있게 기다려야 합니다.

---