Angularをdockerで手軽に楽しむ

って感じですが、試すくらいであれば優秀な、StackBlitzが一番素晴らしです。是非とも使ってください。

でも、cliとかでちょこちょこしたいや若干複雑なことしたい場合は選択肢的には、dockerもありだと思います。dockerじゃなくて普通にインストールがいいですが、ポイ捨てできるので試すくらいならありかと。

Table of Contents

docker fileを作成する
Angularのapplicationを作成する
ちょっと動かす

1. docker fileを作成する

dockerのimageファイルさがしたんですが、なかったので、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の作成

作ったcontainerにアクセスして、Angular プロジェクトを作成していきます。

プロジェクトディレクトリにそのまま作成したいのですが、Schematicsでerrorはかれるので、
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 にアクセスして以下の画面がみれれば大丈夫かと。開発環境として使うのはもっとちゃんとした方がいいですが、お試しくらいならこの程度でいいと思います。