Angular를 도커로 쉽게 즐길 수 있습니다.

라는 느낌입니다만, 시험할 정도라면 우수한, StackBlitz 가 제일 훌륭합니다. 꼭 사용하십시오.



그렇지만, cli라든지로 조금 혼잡하고 싶거나 약간 복잡한 일하고 싶은 경우는 선택적으로는, docker도 있다고 생각합니다. docker가 아니고 보통 설치가 좋지만, 포이 버릴 수 있기 때문에 시도할 정도라면 있을까.

Table of Contents

도커 파일 만들기

Angular application 만들기

조금 움직인다

1. 도커 파일 만들기

docker 이미지 파일 찾았습니다만, 없었으므로, nodejs의 이미지를 사용해 작성합니다.

$ mkdir sample && cd sample
$ touch Dockerfile

Angular의 setting up과 마찬가지로 추진하기 때문에,
node의 image의 취득과 angular/cli를 인스톨 합니다.

FROM node:10.16.3-alpine
WORKDIR  /myapp
CMD [ "npm", "install", "-g", "@angular/cli" ]

Angular의 dev server가 4200번 Port로 움직이기 때문에, port의 추가와 귀찮아서 프로젝트 전체를 bind합니다.

docker-compose.yml

version: "3.7"

services:
  client:
    build: .
    tty: true
    ports:
      - "4200:4200"
    volumes:
      - type: bind
        source: .
        target: /myapp

현재의 tree 구조는 다음과 같습니다.

$ tree -l
.
├── Dockerfile
├── README.md
└── docker-compose.yml

2. Angular Application 만들기

흐름으로서는, docker container를 작성, 안에 들어가 프로젝트를 작성해 갑니다.

2-1. docker container 작성

$ pwd
project/path
$ docker-compse up

그냥 시간이 걸리고, 김에 angular/cli도 설치해 줍니다.

2-2. Angular Application의 작성

만든 컨테이너에 액세스하여 Angular 프로젝트를 만듭니다.

프로젝트 디렉토리에 그대로 만들고 싶지만 Schematics에서 오류가 발생하기 때문에,
client 디렉토리를 만들고 거기에 붙어 있습니다. (nestjs는 할 수 있는데...)

$ docker exec -it CONTAINER_NAME bash
$ ng new client
# routingとstyleの質問に答えるとAngular applicationが作成されていきます。
# Google のPrivacy Policyの質問もいつのまにか増えた。

2-3. 조금 움직인다

조금 움직입니다.
라고 해도, server를 기동시켜 화면상에서 볼 수 있는 상황으로 합니다.

# Containerの内部に入り、
$ docker exec -it CONTAINER_NAME bash
# hostをかえて、dev serverを起動させます。
$ npm run start -- --host=0.0.0.0

그런 다음 브라우저에서 localhost : 4200에 액세스하여 다음 화면을 보면 괜찮을까. 개발 환경으로 사용하는 것은 더 제대로하는 것이 좋지만, 시도 정도라면 이 정도로 좋다고 생각합니다.