Docker × Angular 환경 간단 구축

개요

Docker를 사용하여 Angular 실행 환경을 쉽게 만들 수 있습니다.

환경

macOS Catalina 10.15.1

Docker version 19.03.5

docker-compose version 1.24.1

구성

이번에는 다음과 같은 구성이 됩니다.

.
├── docker
│   └── node
│       └── Dockerfile
├── docker-compose.yml
└── server
    └── angular-app

건설

1. docker-compose.yml 만들기

이번은 간단하게 angular의 실행 환경을 준비하는 것이 목적이기 때문에 컨테이너는 node만으로 OK!

docker-compose.yml

version: '3'

services:
  node:
    build: ./docker/node
    ports:
      - "4200:4200"
    volumes:
      - "./server:/projects"
    tty: true

2. Dockerfile 만들기

node 이미지의 최신을 취득해, npm를 이용해 angular를 인스톨 합니다.

FROM node

WORKDIR /projects

RUN npm install @angular-devkit/build-angular
RUN npm install -g @angular/cli

EXPOSE 4200

3. docker 시작 및 빌드

// ビルド&バックグラウンドで起動
$ docker-compose up -d

// 確認
$ docker-compose ps
# 以下のようになっていればOK!
     Name                 Command            State           Ports         
---------------------------------------------------------------------------
angular_node_1   docker-entrypoint.sh node   Up      0.0.0.0:4200->4200/tcp

4. Angular 앱 만들기 or 인계하는 경우

ng new {プロジェクト名} 컨테이너에서 실행!

// コンテナにインスペクション
$ docker-compose exec node bash

// コンテナ内でAngularアプリ作成
root@8dfd8ec7933f:/projects# ng new angular-app

// 引き継ぐ場合(gitで共有された場合など)
root@8dfd8ec7933f:/projects# npm install

5. Angular 앱 시작

컨테이너에서 Angular 앱을 시작합니다.

// 作成したAngularアプリ直下に移動
root@8dfd8ec7933f:/projects# cd /projects/angular-app

// Angularアプリの起動
root@8dfd8ec7933f:/projects/angular-app# ng serve --host 0.0.0.0

※ package.json이 없는 디렉토리에서 앱 시작 명령을 실행하면 다음 오류가 발생합니다.The serve command requires to be run in an Angular project, but a project definition could not be found.


확인

아래 URL로 이동하세요!
http://localhost:4200/
아래 이미지와 같은 화면이 나타나면 성공입니다.

참고

Mac용 Docker로 Angular8 실행 환경 구축

The serve command requires to be run in an Angular project, but a project definition could not be found.