Angular Deployment

[서론]

나는 지금 참여하고 있는 플젝에서는 Backbone을 사용하고 있다. Backbone은 배포를 할 때 따로 빌드를 해주어서 배포를 하지 않는다. 그냥 javascript로 이루어 져있기 때문에 FTP를 이용해서 서버에 올려만 주면 된다. 하지만 Angular를 사용하여 Typescript로 Application을 만들게 되면 이야기는 틀려진다. 

이번 포스팅에서는 Angular를 사용해서 서버에 배포하는 방법에 대해서 설명한다. 서버 환경은 ubuntu 17, apache이다. Angular는 5버전이다. 

[빌드하기]

먼저 Angular APP을 Typescript로 구현했다고 생각하고 진행한다. Angular를 개발하면 angular-cli를 사용하게 될텐데 (물론 안쓰고도 가능하다.) angular-cli를 사용하면 ng-build라는 명령어 하나로 간단하게 빌드를 진행 할 수 있다. 
좀 더 최적화를 하여 빌드를 하고 싶다면 ng-build --prod라는 명령어를 사용 할 수 있는데 이 명령어는 좀 더 엄격한 문법체계를 요구 한다. 예를 들어 컴포넌트에서 프라이빗 변수를 html에서 사용하면 ng-build만 사용할 경우에는 빌드가 진행되지만 ng-build --prod를 사용할 경우 빌드를 실패 하게 된다. 

아무래도 좀 더 최적화를 위해서 엄격하게 문법을 체크 하는거 같다. 

해당 명령어가 동작하고 나면 프로젝트 하위 폴더로 dist라는 폴더가 생성되고 이 폴더 안에 있는 파일들이 App을 동작 시키는데 필요한 파일들이 된다. 

[배포하기 및 Apache 설정]

서버로 빌드 된 파일을 배포 하는것은 파일질라와 같은 FTP 프로그램을 사용하면 된다. 나는 구글 컴퓨팅 엔진을 사용 하였기 때문에 FTP를 사용하여 접속 하는 방법만 틀렸을 뿐 이것을 제외하면 모든 것은 동일 했다. 

여기서 가장 중요한 부분은 이 부분이다. Angular를 사용하여 만든 App의 경우 라우터에 의해 이미 몇가지 경로가 정해진다. 배포를 하고 나서 자동으로 Angular에서 잡아 주겠지 라고 생각하고 라우터 경로에 접근 하면 404에러를 보게 될 것이다. 

이 404에러를 잡기 위해서 .htaccess파일을 만들어서 아래와 같은 설정을 해주어야 한다. 

RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

이렇게 해주면 라우터에 정의된 경로들이 올바르게 동작하게 된다. 

[결론]

.htaccess 설정을 위해서 몇 가지 아파치 설정을 해야 하지만 생략을 하였다. 예전에 Angular2를 배포를 한 적이 있었는데 그 때는 이런 설정없이 동작했었던거 같은데 오늘 404를 보고 많이 당황을 했다. 다음에는 당황 하지 말고 오늘 기록 했던 방법으로 바로 적용 할 수 있어야 한다.