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します。
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 にアクセスして以下の画面がみれれば大丈夫かと。開発環境として使うのはもっとちゃんとした方がいいですが、お試しくらいならこの程度でいいと思います。