Dockerコンテナ上でAngularアプリケーションを稼働させる

前提

docker-machine : Version: 0.14.0, build 89b8332

Docker Toolboxのインストール

自宅の環境がDocker for Windowsに対応していなかったため、Docker Toolboxを利用することにした。
https://docs.docker.com/toolbox/overview/ からダウンロードし、以下の参考リンクを元にインストール。

参考リンク:
Docker Toolboxのインストール：Windows編

※PCの環境によっては、VT-xが有効になっていない場合、「Docker Quickstart Terminal」の実行時にエラーとなる。BIOSから設定変更可能なので、変更後再実行すること。

Webサーバ立ち上げ

公式のDocker Hubからhttpdイメージを取得し起動させる。

参考リンク :
Docker 公式 httpd イメージを利用して Docker を体験してみよう
Docker入門日誌-その2- Webサーバ立ち上げ編

httpdイメージの取得

$ docker pull httpd

httpdコンテナの作成・起動

$ docker run -d -p 8080:80 --name apache httpd

「-p」はローカルマシンの"8080"ポートを"80"にマッピング、「-d」はデタッチモード。
起動後Webブラウザから起動確認ができるが、指定するIPアドレスは、以下のコマンドで出力されるものを指定。(http://{IPアドレス}:8080)"It Works!"というメッセージが確認できればOK。

$ docker-machine ls
NAME      ACTIVE   DRIVER       STATE     URL                         SWARM   DOCKER     ERRORS
default   *        virtualbox   Running   tcp://{IPアドレス}:{ポート}           v18.09.1

Angularアプリケーションのビルド

powershellを起動し、プロジェクトのディレクトリから以下のコマンドを実行。

$ ng build --prod --base-href=/hogehoge/

「--prod」は"商用"、「--base-href」はurl上のドメイン以降のパスを指定するオプション。
実行後は、{プロジェクトディレクトリ}/dist配下にファイルが生成される。

Angularアプリケーションをドキュメントルートへ配置

Docker公式のhttpdのドキュメントルートは、/usr/local/apache2/htdocsのため、以下のコマンドで上記のビルドアプリをコピーする。

$ docker cp {プロジェクトディレクトリ}/dist apache:/usr/local/apache2/htdocs

再度http://{IPアドレス}:8080/hogehogeにアクセスし、表示されれば成功。