Angular 안내서 · 6/6

배포

Angular 앱은 미리(AOT) 컴파일되어 정적인 JavaScript, CSS, HTML 파일이 됩니다. 이 결과물은 어떤 정적 파일 서버나 CDN에도 올릴 수 있고, 첫 화면 속도와 검색 노출을 위해 서버 사이드 렌더링을 더할 수도 있습니다. 이 장에서는 프로덕션 빌드, 정적 호스팅, SSR과 사전 렌더링을 다룹니다.

프로덕션 빌드

ng build는 기본으로 production 구성을 씁니다. 템플릿을 미리 컴파일하고, 쓰지 않는 코드를 제거하고, 결과물을 압축하며, 오래 캐시할 수 있도록 파일 이름에 내용 해시를 붙입니다.

ng build
ng build --configuration development
ng build --base-href /my-app/

결과물은 dist/my-app/browser/에 만들어집니다. 앱을 도메인 루트가 아니라 하위 경로에서 제공한다면 --base-href를 지정합니다.

번들 크기 예산

angular.json에 크기 예산(budgets)을 정하면 번들이 너무 커졌을 때 빌드가 경고하거나 실패합니다. 새 프로젝트에는 적당한 기본값이 들어 있으며 더 엄격하게 바꿀 수 있습니다.

"budgets": [
  { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
  { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }
]

loadComponent로 지연 로딩하는 라우트와 @defer 블록이 초기 번들을 작게 유지하는 가장 효과적인 방법입니다.

정적 호스팅

dist/my-app/browser/의 내용을 웹 서버나 호스팅 서비스에 복사합니다. 라우터가 브라우저에서 URL을 처리하므로, 서버는 실제 파일이 없는 경로에 대해 index.html을 돌려줘야 합니다. 그렇지 않으면 /heroes/42 같은 주소에서 새로 고침할 때 404가 납니다. nginx라면 다음과 같이 설정합니다.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

다단계 Docker 이미지로 Node.js에서 빌드하고 nginx로 제공할 수도 있습니다.

FROM node:lts-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npx ng build

FROM nginx:alpine
COPY --from=build /app/dist/my-app/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

배포용 패키지를 추가하면 ng deploy로 바로 게시할 수 있습니다. 예를 들어 Firebase Hosting은 ng add @angular/fire, GitHub Pages는 커뮤니티 패키지 angular-cli-ghpages를 씁니다.

서버 사이드 렌더링과 사전 렌더링

프로젝트를 만들 때 ng new my-app --ssr로 SSR을 켜거나, 나중에 추가합니다.

ng add @angular/ssr

이 명령은 Express 기반 Node.js 서버 진입점(server.ts), 서버용 설정 파일, 클라이언트 하이드레이션을 추가합니다. 하이드레이션 덕분에 브라우저는 서버가 그린 DOM을 다시 만들지 않고 그대로 이어서 씁니다. app.routes.server.ts에서는 라우트마다 렌더링 방식을 고릅니다.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'heroes/:id', renderMode: RenderMode.Server },
  { path: '**', renderMode: RenderMode.Client },
];

렌더링 방식	HTML을 만드는 시점
`Prerender`	빌드할 때 정적 HTML 파일로(SSG)
`Server`	요청마다 Node.js 서버에서
`Client`	브라우저에서, 일반 단일 페이지 앱처럼

매개변수가 있는 라우트를 사전 렌더링하려면 만들 값 목록을 돌려주는 getPrerenderParams 함수도 필요합니다. ng build 뒤에는 서버 번들을 실행합니다.

ng build
node dist/my-app/server/server.mjs

ng add @angular/ssr은 이를 위한 npm 스크립트도 serve:ssr:my-app 같은 이름으로 추가합니다. 서버에서 실행되는 코드에는 window나 document가 없으므로, 브라우저에서만 할 일은 afterNextRender()를 쓰거나 플랫폼을 확인한 뒤 실행합니다. 모든 라우트를 사전 렌더링한다면 빌드의 outputMode를 static으로 지정해 어떤 정적 호스팅에도 올릴 수 있는 파일을 만들 수 있습니다.

배포 전 점검

CI에서 ng build와 단위 테스트를 돌려 깨진 빌드가 운영 환경에 나가지 않게 합니다.
파일은 압축해서 제공하고, 해시가 붙은 파일은 오래 캐시하되 index.html은 캐시하지 않습니다.
API 주소는 환경 파일에, 비밀 값은 서버에 두고 번들에는 절대 넣지 않습니다.
ng update로 정기적으로 업데이트합니다. 메이저 버전 사이의 코드 변경을 자동 마이그레이션으로 도와줍니다.

정리

ng build는 최적화되고 해시가 붙은 결과물을 dist/<프로젝트>/browser/에 만듭니다.
정적 호스팅에서는 클라이언트 라우트를 위해 index.html로 돌려주는 설정이 필요합니다.
ng add @angular/ssr은 서버 렌더링, 하이드레이션, 라우트별 렌더링 방식을 추가합니다.
ng deploy는 배포용 패키지를 제공하는 서비스로 바로 게시합니다.

공식 문서

이 장에 대해 질문이 있나요?