DockerでAngular quick start

社内勉強会でAngularやるのでセットアップの部分のみ

起動　app works!まで

dockerコンテナ起動

Angularはnode: 6.9.x, npm 3.x.xが必要なのでnode公式のイメージを使用
後々指定できるけどportは4200を公開
/appディレクトリにアプリを追加する

docker run -it -p 4200:4200 -v $(pwd):/app --name angular-lesson node:latest

コンテナの中に入る
docker exec -it angular-lesson bash

/appディレクトリまで移動

cd /app

angular-cliをダウンロード

ここからはAngular公式のquick start通り

npm install -g @angular/cli

時間かかる

angularアプリケーションを作成

ng new my-app

cd my-app

ng serveで起動するhostとportの設定

my-app/.angular-cli.jsonの編集

defaultsにserveの項目を追加

portとhostを設定、localhostだとdockerコンテナにブラウザからアクセス出来ないので0.0.0.0に変更

  "defaults": {
    "serve": {
      "port": 4200,
      "host": "0.0.0.0"
    },
    "styleExt": "css",
    "component": {}
  }

起動

ng serve

docker内でng serve --openするとブラウザが開けないのでng serveのみ

これでブラウザhttp://localhost:4200/にアクセスするとapp works!と表示されている

とりあえず以上