Docker로 Anglar 환경 구축

주식회사 피아르 오드의 특설 달력16일째.
개시하다
지난 기사에서 안젤라를 배우고 싶었는데 잘 모르는 오류가 생겨 답답한 마음에 다른 방법으로 안젤라의 환경을 구축하려 했던 것이다.그러고 보니 Docker를 사용하면 기계의 OS가 어떻든 Anglar의 환경을 구축할 수 있을 것 같다.
Docker를 구축한 적이 없기 때문에 조사 결과의 성과와 Docker를 사용한 Anglar의 환경 구축 방법을 설명해 드리겠습니다.
Docker 소개
용기 가상화를 이용하여 응용을 개발, 설정, 집행하는 데 사용되는 개방 플랫폼이다.[위키백과에서 온]
Docker의 장점으로 기계로 제작된 Docker 이미지를 다른 구성원의 기계에 간단하게 복사할 수 있다.맥이나 윈도 등의 OS와 상관없이 개발 환경을 만들 수 있다는 것이다.나는 이렇게 하면 예상 밖의 착오가 발생하지 않을 것이라고 생각한다.
Docker 다운로드 방법 등은 다음을 참조하십시오.
https://docs.docker.jp/get-docker.html
차리다
디렉토리 구성은 다음과 같습니다.

.
├── docker
│   └── node
│       └── Dockerfile
└── docker-compose.yml

준비가 끝나면 환경을 구축하기 시작한다.
환경 구조
1. docker-compose.yml 만들기
docker-compose.yml는 프로그램을 시작하는 처리를 기록한 파일입니다.
docker-compose.yml을 열면 다음 코드를 복사하십시오.
docker-compose.yml

version: '3'
services:
  node:
    build: ./docker/node
    ports:
      - "4200:4200"
    volumes:
      - ".:/projects"
    tty: true

version: docker-compose에 사용되는 버전 정의service: 모바일 어플리케이션을 위한 요소node: 컨테이너build : docker-compose.yml 실행, 구축할 때 pathport: Docker Image를 시작할 때 포트 번호
- 호스트측 포트: 컨테이너 측 포트volumes: 마운트할 구성 파일의 경로를 지정합니다.
- 호스트 측 경로: 컨테이너 측 경로tty: 표준 입출력 대상 장치
이번에는 단순히 앙글라를 구축하는 환경일 뿐이어서 제작된 것은 node 컨테이너뿐이다.build Docker file이 저장된 path를 지정합니다.ports Anglar의 개발 서버에 사용되는 4200호를 지정합니다.volumes 용기의/프로젝트 디렉터리에 보이는 음량을 지정합니다.
컨테이너는 아무 서비스도 작동하지 않으면 용기가 작동할 때 바로 끝나기 때문에 선택했다tty:true.
2. Docker file 제작
Docker file은 Docker 이미지를 자동으로 만드는 파일입니다.
최신 node 이미지를 가져오고 npm를 사용하여angular를 설치합니다.
Dockerfile

FROM node
WORKDIR /projects
RUN npm install -g @angular/cli
EXPOSE 4200

FROM: 환경 기준 지정WORKDIR: 작업할 디렉토리의 절대 경로를 지정합니다.RUN: 이미지를 만들 때 실행할 명령 등을 기록합니다.EXPOSE: 컨테이너의 공개 포트 설정node: 최신을 지정합니다.WORKDIR: Anglar의 작업 공간은 용기의/project 디렉터리에서 볼 수 있도록 지정됩니다 /projects.RUN: npm install에 Anglar CLI를 설치합니다.EXPOSE: Anglar의 개발 서버에 사용되는 4200호를 지정합니다.
3. docker 시작
docker-compose.yml 및 Docker file 설정이 완료되면 docker-compose 가 표시됩니다.yml이 있는 디렉터리에서 다음 명령을 실행하여 Docker 컨테이너를 만들고 시작합니다.

$ docker-compose up -d

-d 열고 백그라운드에서 Docker 컨테이너를 시작합니다.
Docker 컨테이너가 구축되었는지 확인합니다.

$ docker ps

아래와 같이 컨테이너 정보를 표시하면 Docker 컨테이너를 구축할 수 있습니다.

CONTAINER ID   IMAGE       COMMAND                  CREATED         STATUS              PORTS                    NAMES
62e23e232d94   test_node   “docker-entrypoint.s…”   2 minutes ago   Up About a minute   0.0.0.0:4200->4200/tcp   test_node_1

4. Anglar의 시작
3. docker를 시작한 후 구축된 용기로 이동합니다.

$ docker-compose exec node bash

컨테이너 내에서 실행ng new하고 Anglar 응용 프로그램을 시작합니다.

root@62e23e232d94:/projects#  ng new angular-app
root@62e23e232d94:/projects#  cd angular-app
root@62e23e232d94:/projects#  ng serve --host 0.0.0.0

ng new에 angular-app라는 Angular 프로그램을 만듭니다.
제작된 Anglar 애플리케이션의 바로 아래로 이동하여 ng serve Anglar 애플리케이션을 시작합니다.
개발 서버--hots=0.0.0.0를 열지 않으면 용기 밖에서 볼 수 없습니다.
※ 용기를 정지시키려면 용기에서 뽑아 다음 동작을 수행한다.docker-compose down액세스 http://localhost:4200/ 아래 그림을 표시하면 Anglar 프로그램이 성공적으로 시작됩니다!

총결산
나는 Docker를 사용하여 기계 환경에 신경 쓰지 않고 Anglar 개발을 하는 방법을 총결하였다.
나는 앞으로 Docker를 사용하여 환경을 구축하는 것이 매우 편리할 것이라고 생각한다.