191021_TIL(Angular8 GitHub Pages)

Angular8 GitHub Pages

지난 해커톤 당시 만든 CloneTrello 프로젝트를 GitHub에서 제공하는 정적 페이지에 빌드하기 위해서 구글 신(?)의 힘을 빌리기 위하여 파워 검색을 하였다. 검색 중 아래와 같은 멋진 npm 모듈을 발견!

angular-cli-ghpages

step1과 step2는 이미 되어있기 때문에 바로

// step3
ng add angular-cli-ghpages

위 명령어로 모듈을 설치하였다.

그리고 바로 stpe4인 아래 명령어 입력

ng deploy

쉽다쉬워~

stpe5에 설명되어있는 주소 형식을 토대로 접속을 하였지만…

아무 것도 보이지 않는 화면과 404 error만이…

바로 Network 탭으로 가서 확인!

확인해보니 GET 요청을 하는 URL 주소가 이상했다.

https://progyu.github.io/CloneTrelloAngularWeb/main-es2015.8c7624774e16167cc0dd.js

위와 같이 나의 repository 이름이 포함된 요청을 해야했지만 아래와 같이 나의 github 루트로 요청을 보내고 있었다.

https://progyu.github.io/main-es2015.8c7624774e16167cc0dd.js

어디서 부터 잘못된 것일까…

다시 처음으로 돌아가서 angular-cli-ghpages 문서를 읽어보았다.

쭉 읽어 내려가던 중 관련있어보이는 옵션 하나를 발견하였다.

–base-href

ng deploy를 하면 생성되는 dist 폴더에 index.html에 있는<base href="/"> 태그는 그대로 유지된다고 한다. 정확한 의미를 모르겠어서 dist 폴더에 index.html을 확인하여 보았다. 설명대로 <base href="/"> 가 그대로 유지된채 있었다.

ng deploy

// index.html

<base href="/">

음…?

다시 문서를 읽어가던 중 중요한 힌트를 드디어 발견하였다. “빌드중인 애플리케이션의 기본 URL을 지정합니다.”

오! base 태그에 href속성이 기본URL을 지정하는것이었다.

dist 폴더를 생성하고 자동으로 생성되는 gh-pages branch를 아래 명령어로 삭제

git push origin :gh-pages

그리고 아래와 같이 명령어를 수정 후 입력하였다.

ng deploy --base-href="https://progyu.github.io/CloneTrelloAngularWeb/"

dist폴더에 index.html을 확인하여보니 아래와 같이 내가 원하는대로 설정이 되었다.

ng deploy --base-href="https://progyu.github.io/CloneTrelloAngularWeb/"

// index.html

<base href="https://progyu.github.io/CloneTrelloAngularWeb/">

기도하는 마음으로 재접속…!

잘 된다!!!

결과물 링크

실행환경