エンジニアのはしがき

Docker Desktop for WindowsでAngularの開発環境をつくる

目次
  1. 実行環境
  2. 準備
  3. Dockerfileの準備
  4. Dockerのビルド
  5. Dockerコンテナ起動
  6. ハマった点
  7. 参考

AWS LambdaにDockerコンテナをデプロイできることを知り、Dockerを積極利用するモチベーションが高まってきた今日この頃です。

今回はAngularのDocker上での動かし方を備忘録として残していきたいと思います。

実行環境

  • OS: Windows10(20H2)
  • ターミナル: git bash
  • Docker Desktop for Windows
  • Docker Engine v20.10.5

準備

https://hub.docker.com/editions/community/docker-ce-desktop-windows

Docker Desktop for Windowsは公式サイトからをDLしてインストールし、起動した状態にします。

Angularプロジェクトは既に作成済みとします。

Dockerfileの準備

AngularプロジェクトのルートディレクトリにDockerfileを作成します。

$ touch Dockerfile

Dockerfile

FROM node:15.11.0-buster
WORKDIR /project
RUN npm install -g @angular/cli@11.0.2
EXPOSE 4200

@angular/cliのバージョンは任意のバージョンを指定します。

Dockerのビルド

$ docker build -t angular-app.

angular-app は任意のDockerイメージの名称を指定します。

docker imagesでイメージが完了したか確認します。

$ docker images
REPOSITORY                                                                 TAG       IMAGE ID       CREATED        SIZE  
angular-app                                                                 latest    780066dafcb6   6 hours ago    950MB

Dockerコンテナ起動

$ docker run --rm --name angular-app -v $(pwd -W):/project -p 4200:4200 -it angular-app bash
  • --rm：実行後にコンテナを削除する
  • --name [任意のDockerコンテナ名]：Dockerコンテナの名前
  • -p [ホストのポート]:[コンテナのポート]：コンテナのポートをホストのポートにバインドする
  • -v [ホストの絶対パス]:[コンテナの絶対パス]：ホストのディレクトリをコンテナにマウントする

コンテナが立ち上がったら、bashでコンテナに入った状態になりますので あとは通常通りのAngularサーバを立てていきます。

$ npm install

$ ng serve --host 0.0.0.0

サーバが立ち上がったらホストのブラウザからlocalhost:4200へアクセスしてみましょう。通常通りAngularアプリが動けばOKです。

DockerでAngularサーバを起動する場合、--host 0.0.0.0で同一ネットワークの他IPを許可しないと、ホストからlocalhost:4200にアクセスした時に拒否されるので注意です。

ハマった点

docker runでマウントするホストのディレクトリをpwd -Wではなく、pwdにしていると正しくマウントされませんでした。

pwdだとlinuxのパス記法でカレントディレクトリが出力されますが、どうもそれが正しく認識されない模様。

Windowsのパス記法でカレントディレクトリを指定（pwd -W）してやるとうまくマウントできました。 あくまでもWindows上でDockerが動いている故にWindowsのファイルシステムに合わせていく必要があるようです…。

参考

https://laboradian.com/wslpath-command-for-wsl/#-w

https://qiita.com/amanoese/items/8a19548d5e9dc2e22959

https://docs.docker.jp/engine/reference/commandline/run.html#p-expose

https://tamosblog.wordpress.com/2019/03/11/volume_mount_by_docker_on_wsl/