Angular 環境をDockerで作成 - ﾅｶﾞﾓﾄの blog

先日自分のポートフォリオとしてサイトを作成を始めたところ、nodeやangular/cliのversionが上がっており、version管理でつまづいてしまいました。

nodebrewやnvmを用いてversion管理してもいいのですが、全く汚染されない環境を使いたいと思い、DockerでAngularアプリの開発環境を整えてみました。

Dockerはコンテナ型の仮想環境を扱う技術で、シンプルな流れは、

Dockerfileという設計図を元にしてimageを作成し、imageを元にcontainerを起動する

となります。

作業の概要はこの通りです。

Dockerのインストール

上記より、自身の環境に合わせたものをインストールしてください。

私はDocker Desktop (Mac)を利用しています。

まずはDockerfileを作成します。ファイル名は「dockerfile」で拡張子はありません。

FROM node:10.15.0

RUN npm install -g @angular/cli@7.1.4

EXPOSE 4200

公式のnodeのimageをベースにし、

angular/cliをインストールし、

アプリを立ち上げるポート4200を解放する

という内容になっています。

Dockerfileを置いているフォルダで下記コマンドを実行します。

$ docker build -t angular-env:latest .

Dockerfileに基づきimageを作成しています。

オプションでimage名やタグ名を指定しています。

$ docker run -it --hostname angular-env --name angular-env -v $PWD:/mnt/ng-app -p 4200:4200 angular-env:latest bash

angular-env:latestのimageに基づきcontainerを作成し、container内のbashを起動します。

オプションでホストなどの命名や、ホストへファイルをマウントするフォルダの設定、解放したポートの接続も行なっています。

起動されたbashで/mnt/ng-appにcdし、ng newでAngularアプリを作成するとファイルはホスト側にも同期されるため、ホスト側からエディタで編集し、container側で起動するということができるようになりました。

静的なアプリはこれだけで十分ですが、APIを利用するようなアプリを作成する場合は、Docker composeやk8sを利用する必要があります。

いずれ、その環境構築も記事にできたらと思います。