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
48
// 제거
$ docker rm 48
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:
- '5555:5555'
networks:
dev-network:
driver: bridge
빌드하고 수행하기
$ docker-compose build
$ docker-comopse up
ng-conf 2017 의 docker 이야기
- Angular-Seed: https://github.com/mgechev/angular-seed
- Docker Docs: https://docs.docker.com/edge/engine/reference/commandline/docker/
- Angular with docker projects
https://github.com/DanWahlin/Angular-Docker-Microservices
https://github.com/DanWahlin/Angular-NodeJS-MongoDB-CustomersService
https://github.com/DanWahlin/Angular-RESTfulService
'Angular > Concept' 카테고리의 다른 글
| [NX] Lazy loading with Router 또는 without Router - 2 (0) | 2021.08.05 |
|---|---|
| [Angular Schematics] NX기반 Custom Schematic 개발하기 - 1 (0) | 2020.05.22 |
| [Typescript] NodeJS에서 Typescript 사용하기 (0) | 2017.03.29 |
| [PWA] Progressive Web Apps 만들기 (0) | 2016.12.20 |
| [PlayNode 2016] 컨퍼런스 - RxJS (0) | 2016.11.23 |
