Angular開発環境をdocker環境で立ち上げてみる。

はじめに

naritomoと申します。

本職はインフラエンジニアを行っています。
最近フロント技術にも興味があり、AngularについてDockerコンテナとして
立ち上げてみました。

いろいろアドバイスいただけると嬉しいです。

立ち上げ概要

mac環境にて、
docker-composeを使用してAngularコンテナを立ち上げるものになります。

完成しているソースは以下にあります。

なぜ、あえてDockerなのか？

インフラエンジニアとしてDockerから触れたほうが扱いやすく、
以下の利点を感じられたため、開発環境構築ではDockerを使用することを
推しています。

• OS問わず同じ開発環境での開発が可能
• 独立したフロントエンドコンテナを構築することにより、
  　バックエンドと分離した開発検証が可能。　

事前準備

mac+DockerCompose+vscode+gitでの環境を構築してること。

参考URL

Angular環境構築手順（Docker上に構築する）

事前準備

mac+DockerCompose+vscode+gitでの環境を構築してること。

開発環境構築方法(Angular)

docker構成フォルダ構築

ルートフォルダを作成する。

mkdir angular-docker
cd angular-docker

Dockerfileを作成し、以下の内容を入れる。

FROM node:latest

WORKDIR /app

RUN npm install -g @angular/cli

RUN ng new sample

Docker-compose.ymlを作成し、以下の内容を入れる。

version: '3'
services:
  sample-angular:
    image: sample-angular-image
    container_name: sample-angular-container
    build:
      context: .
      dockerfile: Dockerfile
    command: sh -c "ng serve --host=0.0.0.0"
    ports:
      - "4200:4200"
    volumes:
      - ./app:/app
    working_dir: /app

コンテナビルド

docker-compose build

Angularプロジェクト作成

"sample"部分は好きな名前にしてもよい。

docker-compose run --rm sample-angular sh -c "ng new sample"
cd app/sample
rm -rf .git

docker立ち上げファイル編集

Docker-compose.ymlについて、以下の内容に編集する。

"sample"部分は前の手順に合わせる。

version: '3'
services:
  sample-angular:
    image: sample-angular-image
    container_name: sample-angular-container
    build:
      context: .
      dockerfile: Dockerfile
    command: sh -c "ng serve --host=0.0.0.0"
    ports:
      - "4200:4200"
    volumes:
      - ./app:/app
    working_dir: /app/sample　→最後に"/sample"を追記する。

コンテナ立ち上げ

docker-compose up -d

サイト確認

以下のURLにアクセスし、Angularトップ画面が出てくること。

http://localhost:4200/

開発環境操作

開発環境コンテナ起動/設定再読み込み

docker-compose up -d

開発環境コンテナ停止

docker-compose stop

開発環境コンテナ破棄

docker-compose down

おわりに

フロント技術習得の第一歩として、Angular稼働dockerを構築してみました。

この記事がAngularを扱う方の助けになればと思います。