Skip to content

6. 사용해보기: 배포

애플리케이션을 배포한다는 것은 애플리케이션을 컴파일/빌드한 후에 웹 서버에 JavaScript, CSS, HTML 파일을 호스팅하는 것을 의미한다.


이 가이드 문서는 Angular 애플리케이션 시작하기 튜토리얼에서 만들었던 애플리케이션을 빌드하면서 빌드 과정이 어떻게 진행되는지 설명한다.


1. 사전지식

애플리케이션을 배포하기 전에는 로컬에서 프로젝트를 실행해보는 것이 좋다. 프로젝트를 로컬에서 실행하려면 이런 것들이 설치되어 있어야 한다:



터미널 전역 범위에 Angular CLI를 설치하려면 이 명령을 입력하면 된다:


npm install -g @angular/cli


Angular CLI를 설치하면 ng 명령어를 사용해서 워크스페이스를 생성하거나 프로젝트를 생성할 수 있고, 애플리케이션을 개발 모드로 실행할 수 있으며 빌드할 수도 있다.


2. 로컬에서 실행해보기

StackBlitz 프로젝트의 소스 코드를 내려받으려면 화면 왼쪽 Project 메뉴에 있는 Download Project 아이콘을 클릭하면 된다.


ng new 명령을 실행해서 Angular CLI 워크스페이스를 생성한다. 이 때 프로젝트 이름은 원하는 것을 지정하면 된다.


ng new my-project-name


이 명령을 실행하면 환경설정 프롬프트가 몇 번 표시된다. 이번 튜토리얼에서는 기본값으로 진행한다.


새로 만든 애플리케이션 안에 있는 /src 폴더를 StackBlitz에서 다운받은 /src 폴더로 교체한다.


이 명령을 실행해서 애플리케이션을 로컬에서 실행한다:


ng serve


애플리케이션이 동작하는 것을 브라우저로 확인하려면 http://localhost:4200/로 접근하면 된다. 기본 포트는 4200이지만 이 포트를 사용할 수 없다면 Angular CLI로 serve 명령을 실행할 때 플래그를 추가하면 된다:


ng serve --port 4201


애플리케이션을 이렇게 실행하고 나면, 코드를 수정했을 때 브라우저가 자동으로 갱신되면서 수정사항이 바로 반영된다. ng serve 명령이 실행되는 것을 중단하려면 Ctrl + c를 입력하면 된다.


3. 애플리케이션 빌드하고 호스팅하기

애플리케이션을 운영용으로 빌드하려면 build 명령을 사용하면 된다. 이 때 빌드 환경을 특별히 명시하지 않으면 production 환경이 기본적으로 적용된다.


ng build


이 명령을 실행하면 애플리케이션 최상위 폴더에 dist 폴더가 생성되면서 애플리케이션 호스팅에 필요한 파일들이 들어간다.


Note

  • ng build 명령을 실행할 때 패키지를 찾을 수 없거나 프로젝트 package.json 파일에 등록된 패키지를 찾을 수 없으면 에러가 발생할 수 있다.


dist/my-project-name 폴더에 있는 파일들을 웹 서버로 복사한다. 이 파일들은 정적으로 제공되어야 하기 때문에 웹 서버에서도 파일을 정적으로 호스팅할 수 있어야 한다. Node.js, Java, .NET는 물론이고 Firebase, Google Cloud, App Engine와 같은 백엔드 서비스를 모두 활용할 수 있다.


Note


이 튜토리얼까지 진행하면서 Angular의 기본 내용을 다뤘다. Angular를 활용하면 모바일 디바이스용으로 개발하거나, 잘 짜여진 UX/UI를 간단하게 적용할 수 있으며, 서버 사이드 렌더링도 처리할 수 있다.

References