AWS LambdaにDockerコンテナをデプロイできることを知り、Dockerを積極利用するモチベーションが高まってきた今日この頃です。
今回はAngularのDocker上での動かし方を備忘録として残していきたいと思います。
実行環境
- OS: Windows10(20H2)
- ターミナル: git bash
- Docker Desktop for Windows
- Docker Engine v20.10.5
準備
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のファイルシステムに合わせていく必要があるようです…。
参考
【WSL】パスのフォーマットを変換する wslpath コマンドの使い方 – ラボラジアン
docker for windowsをgit bashで使うときの-v(volume)の指定の仕方 - Qiita
