[Angular] Docker에서 수행하기

Angular/Concept

[Angular] Docker에서 수행하기

Peter Note 2017. 4. 23. 15:51

Angular CLI를 통해 프로젝트를 생성하고 Docker에 Nginx를 띄워서 간단히 연결해 보자.

Angular CLI 기반 프로젝트 생성

NodeJS버전은 6최신을 사용한다.

$ npm install -g @angular/cli

설치가 되었다면 ng 명령을 통해 프로젝트를 생성한다.

$ ng new angular-docker

프로젝트가 생성되었으면 프로젝트 폴더로 이동해서 소스를 빌드한다.

$ cd angular-docker

$ ng build

Hash: cfba09939df99de45615

Time: 7424ms

chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 165 kB {4} [initial] [rendered]

chunk {1} main.bundle.js, main.bundle.js.map (main) 3.61 kB {3} [initial] [rendered]

chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]

chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.09 MB [initial] [rendered]

chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

Docker CE 기반 Nginx 관리

Docker를 잘 모른다면 Docker CE를 설치해 사용한다.

- download docker CE (Community Edition)

- Mac 버전을 설치하면 Docker 가 기동이 된다.

다음으로 Nginx image 를 docker명령을 통해 내려받는다. 만일 사용하지 않는 Docker image들이 있다면 다 삭제를 한고 작업을 해보자.

// Delete all docker containers

$ docker rm $(docker ps -a -q)

// Delete all docker images

$ docker rmi $(docker images -q)

// Install docker image

$ docker pull nginx

Using default tag: latest

// 설치 내역 확인

$ docker images

REPOSITORY TAG IMAGE ID CREATED SIZE

nginx latest 5766334bdaa0 2 weeks ago 183 MB

Angular 빌드 폴더로 이동해서 Nginx를 수행한다.

$ cd dist

$ docker run -d -p 8080:80 -v $(pwd):/usr/share/nginx/html nginx:latest

48db2f0626c5a10429e95cbbbaf3cc58769cda45a9c1e7084b4f3a260e576838

// 이미지 실행 확인

$ docker ps -a

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES

48db2f0626c5 nginx:latest "nginx -g 'daemon ..." 2 minutes ago Up 2 minutes 443/tcp, 0.0.0.0:8080->80/tcp loving_lumiere

수행되고 있는 이미지를 멈추고 제거해 보자. stop, rm 다음은 Container ID의 처음 두자를 입력한다.

// 멈춤

$ docker stop 48

// 제거

$ docker rm 48

// 확인

$ docker ps -a

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES

Kinetic 애플리케이션을 사용해서 CLI 명령과 동일하게 GUI 기반으로 Container를 관리할 수 있다.

Docker Compose 사용하기

컴포즈는 환경을 기반으로 다양한 도커 이미지들을 동시에 기동하고 연결하는 역할을 수행한다. Nginx, NodeJS, MongoDB등을 서로 다른 Docker image기반으로 기동하고 연결하는 환경설정을 docker_compose.yml에 한다. angular-seed 예는 다음과 같다.

version: '2'

services:

angular-seed:

build:

context: .

dockerfile: ./.docker/angular-seed.development.dockerfile

command: npm start

container_name: angular-seed-start

image: angular-seed

networks:

- dev-network

ports: