Zenn
🐣

docker-composeでAngularの開発環境構築備忘録

2021/10/24に公開
Angular
Docker
tech

概要

Angularの勉強をする機会があったのでdockerを使った環境構築方法を備忘録として残しておく。

バージョン

  • Node.js: 16.x
  • Angular: latest

ディレクトリ構成

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

Dockerfile

パッケージマネージャはyarnを利用する。

FROM node:16-alpine

RUN apk update && \
    apk add git make g++ && \
    apk add --no-cache curl && \
    curl -o- -L https://yarnpkg.com/install.sh | sh && \
    yarn global add @angular-devkit/build-angular @angular/cli

ENV TZ Asia/Tokyo
ENV PATH $HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH

WORKDIR /app

CMD ["/bin/ash"]

docker-compose.yml

version: '3'
services:
  web:
    container_name: angular-app
    build:
      context: ./.docker/web
      dockerfile: Dockerfile
    ports:
      - 4200:4200
    volumes:
      - .:/app
    stdin_open: true
    tty: true
    restart: always

コンテナ立ち上げ

バックグラウンド実行が嫌な場合は-dを除外する。

$ docker-compose up -d

プロジェクトの作成

-g はgitを除外、--directoryはディレクトリ指定する。

$ docker-compose exec web ng new -g --directory ./ app-name

サーバー立ち上げ

$ docker-compose exec web ng serve --host 0.0.0.0

確認

http://localhost:4200

Discussion