이 글에서는 Docker의 다단계 빌드를 사용하여 효율적인 방식으로 Angular 앱을 도커화하는 방법을 살펴보겠습니다.

이 게시물을 작성할 당시 저는 Angular v7을 사용하고 있습니다.

전제 조건

NodeJS +8

각도 CLI ( npm i -g @angular/cli@latest )

도커 +17.05

Docker 및 Angular CLI 명령에 대한 기본 이해

계획

Angular CLI로 빌드된 기본 Angular 앱을 도커화하려면 다음을 수행해야 합니다.

npm은 종속성을 설치합니다(dev 종속성 포함)

.

--prod 플래그를 사용한 ng 빌드

(nginx 서버를 통해) dist 폴더에서 공개적으로 액세스할 수 있는 폴더로 아티팩트 이동

nginx 구성 파일을 설정하고 http 서버를 가동합니다

.



우리는 이것을 2단계로 할 것입니다:

빌드 단계: 노드 알파인 Docker 이미지에 따라 다름

설정 단계: NGINX 알파인 Docker 이미지에 의존하고 빌드 단계의 아티팩트와 프로젝트의 nginx 구성을 사용합니다.

빈 Angular 프로젝트 초기화

$ ng new myapp

기본 nginx 구성 추가

Angular 프로젝트의 루트에서 nginx 폴더를 만들고 다음 내용(./nginx/default.conf)을 포함하는 default.conf라는 파일을 만듭니다.

server {

  listen 80;

  sendfile on;

  default_type application/octet-stream;


  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   1100;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;


  root /usr/share/nginx/html;


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

}

도커 파일 만들기

### STAGE 1: Build ###

# We label our stage as ‘builder’
FROM node:10-alpine as builder

COPY package.json package-lock.json ./

## Storing node modules on a separate layer will prevent unnecessary npm installs at each build

RUN npm ci && mkdir /ng-app && mv ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder

RUN npm run ng build -- --prod --output-path=dist


### STAGE 2: Setup ###

FROM nginx:1.14.1-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

이미지 빌드

$ docker build -t myapp .

컨테이너 실행

$ docker run -p 8080:80 myapp

완료되면 http://localhost:8080에서 도커화된 앱에 액세스할 수 있습니다.

그리고 이미지의 크기는 ~15.8MB에 불과하며 Docker 리포지토리로 푸시되면 훨씬 더 작아집니다.



이 GitHub 리포지토리에서 전체 예제를 볼 수 있습니다. https://github.com/avatsaev/angular-contacts-app-example