Docker for MacでAngular8の実行環境を構築

以前にDockerでAngularのアプリを実行できる環境をご紹介したのですがAngularもnodeも新しくなったので改めてご紹介したいと思います。

Docker for MacでAngular6の実行環境を構築

環境

• Docker: 19.03.1
• Node.js: 10.16.3
• Angular CLI: 8.3.2
• Angular: 8.2.4

dockerファイルの作成

まず作業ディレクトリにdockerfileを作成します。

dockerfile

FROM node:10.16.3
 
RUN npm install -g @angular/cli
 
EXPOSE 5656

Angularアプリを複数管理しているとポートがバッティングするので適当に変えてみます。

dockerイメージの作成

次にdockerfileをビルドしてdockerイメージを作成しましょう。

$ docker build -t docker-angular:angular8 .

-tオプションでタグをつけます。

$ docker image ls　  //確認
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
docker-angular      angular8              701699c0561d        3 minutes ago       943MB

コンテナの作成＆起動

angularのプロジェクトを作成したい場所で実行します。

$ docker run -it --hostname docker-angular02　--name　docker-angular02 -v $PWD:/mnt/angular-app -p 5656:4200 docker-angular:angular8 bash
root@docker-angular02:/# ←作成と同時に起動しrootにログインする

・-vでマウント　'ホストパス':'コンテナパス'
ホスト側でコードの編集ができるよう、「ホスト側の作業ディレクトリ」と「コンテナ上の/mnt」をマウントします。
・-pでポートフォワード
ホストのブラウザからアクセスできるようAngularがデフォルトで使用する4200ポートを結びつけます。

コンテナ内での作業

angularアプリを作成します。

cd mnt/
ng new angular-app

続けてAngularアプリを起動します。

# ng serve --host 0.0.0.0
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
｢wdm｣: Compiled successfully.

ブラウザから localhost:5656 で画面が確認できます。

これでAngularアプリの開発ができるようになりました。
ngコマンド、npmコマンドを実行する際はコンテナ内で実行しましょう。