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

岡春奈

2018.06.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、クラスメソッドの岡です。

今回Docker for MacでAngular6のアプリを実行できる環境を作ってみたのでご紹介したいと思います。
コードの編集はローカル（Dockerホスト）のVScodeでやりたいので、ローカルの作業ディレクトリとDockerコンテナをマウントしてみました。
Angularアプリの起動はコンテナ内で行います。　　

環境

・Docker 18.03.1-ce-mac65 (24312)
・Node.js 8.11.3
・AngularCLI 6.0.8

2018/06/21現在、Node.jsのActive LTSがver8となっているのでそちらを使っています。
詳しくはNode.jsのリリーススケジュールを確認してください。

dockerファイルの作成

まず作業ディレクトリに移動してdockerfileを作成します。（拡張子はなし）

FROM node:8.11.3

RUN npm install -g @angular/cli

EXPOSE 4200

dockerイメージの作成

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

$ docker build -t docker-angular:test .

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

$ docker image ls　  //確認
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
docker-angular      test              a4ac49ea9efa        1 minutes ago       741MB

コンテナの作成＆起動

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

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

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

コンテナ内での作業

angularアプリを作成します。

cd mnt/
ng new angular-app

VScodeでの作業

VScodeで作業ディレクトリを開くとコンテナ内で作成したangularアプリが表示できます。作業しやすいよう、VScodeのターミナルで起動中のコンテナに入ります。

$ docker ps
CONTAINER ID        IMAGE                 COMMAND             CREATED             STATUS              PORTS                    NAMES
4dbd5ete8e7j        docker-angular:test   "bash"              4 minutes ago      Up 4 minutes       0.0.0.0:4200->4200/tcp   docker-angular01

$ docker attach docker-angular01
root@docker-angular01:/mnt/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:4200で画面が確認できます。

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