Angular開発環境をDockerコンテナで立てる
Angular 開発環境を Docker コンテナで立てる際に、コンテナ内の localhost:4200 にホストマシンからアクセスできないなど手こずったので、環境構築手順を記載したい。
目次
導入
この記事で構築する環境は以下の構成になる。
Angular の Docker コンテナを立てるところまでは普通なのだが、これをホストマシンのブラウザからアクセスするために Node.js でリバースプロキシをコンテナ内部に立てる部分の情報が意外とネットに少なかった。Node.js で外部ライブラリを使わずにリバースプロキシを立てる際、Node.js: 外部パッケージを使わずに14行で作るHTTPリバースプロキシが非常に参考になった。ありがとうございます！
ホストマシンのブラウザからアクセスできない問題の解決法としては、例えば、DockerでAngular quick startには、.angular-cli.json を作成することで対処できるとあったが、手元の環境ではうまく機能しなかったため、リバースプロキシを用いる方法を採った。
大まかな流れは以下の通り。
- 構成ファイルをダウンロード
- docker-compose up -d を実行
- docker container exec コマンドで Angular のプロジェクトを作成と起動
これでホストマシンから Angular のインストール完了画面を見ることができるようになる。楽ちんだ。
作業フロー
中身の詳細はさておき、最短で構築する方法をコマンドとももに記載したい。
構成ファイルをダウンロード
以下の構成ファイルがある。
- docker-compose.yml
- Dockerfile
- proxy.js
- package.json
https://github.com/freopeから、これらのファイルを作業用ディレクトリにダウンロードする。
git clone https://github.com/freope/angular-on-docker
docker-compose コマンドの実行
ダウンロードした angular-on-docker ディレクトリに移動し、コンテナを立ち上げて、
# angular-on-docker ディレクトリに移動cd angular-on-docker
# コンテナの立ち上げ
docker-compose up -d#=> Creating angular_angular_1 ... don立ち上がったコンテナの名前を見る。
# コンテナの名前を見る
docker container ls#=> CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES#=> a0f2d5198c07 angular_angular "docker-entrypoint.s…" 21 minutes ago Up 21 minutes 0.0.0.0:4200->3000/tcp angular_angular_1出力の一番右側の NAMES カラムをみると、angular_angular_1 という名前のコンテナが立ち上がっているのが分かる。
Angular プロジェクトを作成
コンテナを立ち上げると、カレントディレクトリに angular という名前のディレクトリが現れるが、これはコンテナ内の ~/project という作業ディレクトリとマウントされている。
このディレクトリに Angular プロジェクトを作成する。
# Angular プロジェクト sample を作成
docker container exec-it angular_angular_1 ng new sample
実行すると、
- ? Would you like to add Angular routing? Yes
- ? Which stylesheet format would you like to use? CSS
と聞かれるので、適当に答えてエンター。
Angular 開発用サーバを起動
# プロジェクトをコンパイルし、Angular の開発用サーバをコンテナ内に起動
docker container exec-it-w /project/sample angular_angular_1 ng serve
# バックグランドで実行する場合は -d オプションを付ける# docker container exec -d -it -w /project/sample angular_angular_1 ng serveホストマシンのブラウザから localhost:4200 にアクセスし、以下のような画面が表示されればOK.
各構成ファイルの役割
docker-compose.yml
version:"3"services:angular:build:.ports:-"4200:3000"volumes:-./angular:/projectports の箇所で、ホストマシンの 4200 番ポートを、コンテナ内の 3000 番ポートにポートフォワード。
volumes の箇所で、マウントされる angular ディレクトリの場所を、指定している。
Dockerfile
FROM node# TypeScript をインストールRUN npm install-g typescript
# Angular をインストールRUN npm install-g @angular/cli
# リバースプロキシのプログラムをコンテナにコピーCOPY proxy.js /home/node/COPY package.json /home/node/# コンテナ内での作業ディレクトリを変更WORKDIR /project# デフォルトでリバースプロキシサーバーを立ち上げるCMD node /home/node/proxy.js最終行で、docker container run コマンド実行時に、コンテナ内で実行されるコマンドを指定しなかった場合、Node.js のプロキシサーバ proxy.js が立ち上がる設定をしている。
proxy.js
/**
* Reverse Proxy
* [Node.js: 外部パッケージを使わずに14行で作るHTTPリバースプロキシ](https://qiita.com/suin/items/0ca6d44c7671abdc032b)
*/import{createServer,request}from'http'createServer((clientReq,clientRes)=>{constserverReq=request({host:'127.0.0.1',port:4200,method:clientReq.method,path:clientReq.url,headers:clientReq.headers,}).on('error',()=>clientRes.writeHead(502).end()).on('timeout',()=>clientRes.writeHead(504).end()).on('response',(serverRes)=>{clientRes.writeHead(serverRes.statusCode,serverRes.headers)serverRes.pipe(clientRes)})clientReq.pipe(serverReq)}).listen(3000)プロキシサーバのプログラム。
Angularの開発用サーバーが localhost:4200 で立ち上がるので、この 4200 番ポートを、コンテナ外部に開いている 3000 番ポートにポートフォワードする。
docker-compose.yml で、ホストマシンの 4200 番ポートを コンテナの 3000 番ポートにポートフォワードしていたので、ホストマシンの localhost:4200 で Angularの開発用サーバーにアクセスできるようになる。
ベースのプログラムを作ってくれた方、ありがとうございます！
package.json
{"type":"module"}proxy.js で import {createServer, request} from ‘http’ を実行できるようにするための設定。