Github pages 에서 angular4 적용한 페이지 만들어 올리기

Github pages는 무료로 FE 호스팅을 해준다. 그리고 이 무료호스팅을 최대한 활용하기 위해서 Angular4와 같은 FE 프레임워크를 적용하고 싶은 생각이 드는것은 당연한 것이라고 볼 수 있겠다.

그런데 간편한 마음으로 깃헙페이지에 앵귤러 샘플을 한번 올려보려고 하니 골치아픈 문제가 발생하여 며칠을 고생했으니, 여기에 그에 관한 간략한 내용을 남긴다.

1. Gitgub Pages에 배포하기

Angular로 개발한 코드는 빌드과정을 거쳐서 나온 산출물을 Github에 배포해야한다.

그런데 간단하게 ng build로 빌드해서 배포하면 404 오류들을 받는 경우가 있다. 루트페이지가 아니라 repository를 만들어서 배포 할 때 이같은 문제가 발생하는데, 이런 케이스를 위해서 angular-cli에서는 Github pages 배포를 위한 빌드 옵션을 만들어 두었다.

( 참조링크 : https://github.com/angular-buch/angular-cli-ghpages#usage )

결론만 말하자면, 아래와 같이 빌드하면 된다.

ng build --prod --output-path dist --base-href 본인의repository이름

이렇게 하면 dist 폴더 아래에 빌드 결과가 생성될테이 이것을 본인의 적절한 Github pages repo에 배포하면 된다.

2. 링크를 만들거나 새로고침을 하는데 404가 발생하는 문제.

새로고침만 문제가 아니다. 주소를 링크로 받아서 열어 볼 때에도 404가 뜨는 등 루트페이지를 제외한 모든 페이지에 들어가려고 하면 404 오류가 발생한다. 정확한 원인을 알수는 없지만 해시주소를 처리하는 과정에서 문제가 발생하는것 같다.

이 문제를 해결하기 위해서는,

app-routing.module.ts 에서 아래와 같이 {useHash: true} 부분을 추가해주면 된다.

@NgModule({       imports: [ RouterModule.forRoot(routes, {useHash: true}) ],       exports: [ RouterModule ] })

( 참조링크 : https://stackoverflow.com/questions/17912543/getting-404-page-on-refresh-on-angularjs-site )

이 외에도 개발을 진행하는 과정에서 여러가지 문제가 발생 할 수 있지만, 일단 이 두가지만 해결하고나면 나머지는 환경에 대한 문제보다는 개발 자체에 대한 문제가 많을것이라 생각한다. 부디 이 글로 인해 나와 같은 문제를 겪는 다른 사람들이 나와 같은 고생을 하지 않길 바란다.