前提
- ローカルに node.js の環境が整備されていること。
- docker 関連のコマンドがローカル環境で実行できること。
- 実装はローカルの端末で行うが、実行は Docker のコンテナ上で行う。
- 実装者の使い慣れた開発環境を使いながら、バージョン不整合による不具合等を事前に極力防止するため。
確認方法
node.js
$ node --version
v12.14.1
# npm --version
6.14.0
docker
$ docker --version
Docker version 17.12.1-ce, build 7390fc6
$ docker-compose --version
docker-compose version 1.25.0, build 0a186604
$ service docker status
* Docker is running
環境
- Windows 10 Home
- WSL2 で Ubuntu を構築し、作業を行っていますが Docker 環境が作成済みであれば OS は問わない筈です。
Angular の開発環境を整備する
最新の lts 版をグローバルインストール
$ npm install -g @angular/cli
確認
$ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.4
Node: 12.14.1
OS: linux x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.900.4
@angular-devkit/core 9.0.4
@angular-devkit/schematics 9.0.4
@schematics/angular 9.0.4
@schematics/update 0.900.4
rxjs 6.5.3
Angular の実行環境を整備する
実現すること
- 開発者全員が共通の Angular のバージョンを用いてビルドを行う。
- ビルドした資産は、Nginx （Web サーバー）にデプロイして動作を確認する。
- 大規模なプロジェクトでは、各開発者のローカル環境に同一の実行環境を整備することは困難なため、実行環境は Docker を用いて配布する。
手順
アプリのひな型を作成する
※サンプル用にプロジェクトを作成します。既存の Angular 資産が存在する場合は、本手順は省略してください。
$ ng new <アプリケーションの名前>
完成したアプリケーションは、以下のような構成となっていると思います。
<アプリケーションの名前>
|- e2e
|- node_modules
|- src
|- ... 各種設定ファイル
|- package-lock.json
|- package.json
|- ... 省略
Dockerfile をプロジェクトルートに配置する
<アプリケーションの名前>
|- e2e
|- node_modules
|- src
|- .dockerignore // <- 追加
|- ... 各種設定ファイル
|- Dockerfile // <- 追加
|- package-lock.json
|- package.json
|- ... 省略
Dockerfile
# ----------------------------------------# Angular build env.# ----------------------------------------FROM node:lts AS build_stageRUN npm install-g @angular/cli
WORKDIR /usr/src/appCOPY package.json ./RUN npm installCOPY . .RUN ng build --prod# ----------------------------------------# Nginx# ----------------------------------------FROM nginx:stableCOPY --from=build_stage /usr/src/app/dist/<アプリケーションの名前> /usr/share/nginx/htmlDockerHub に公式の Angular イメージがなかったため、自作した。
- ベースイメージの node.js の実行環境に
@angular/cliをグローバルインストールする。 - ローカルの
package.jsonをコンテナ環境にコピー - 依存ライブラリをコンテナ内でインストールさせる。（ローカルの node_modules をマウントする手もあるが、Windows 環境だとうまくいかないらしいのでこの方法を採用）
- angular cli コマンドを用いてビルド
- Nginx のドキュメントルートにビルドした資産を配置する。
.dockerignore
node_modules
e2e
テストコードや、node_modules は、コピーの対象外とする。
Docker Image のビルド
$ cd <アプリケーションの名前>
$ docker build -t angular:lts .
※warn メッセージが出てくるがいったん無視する。
動作確認
以下の構成になるようにする。
.
|- <アプリケーションの名前>
| |- src
| |- ...
| |- Dockerfile
|- docker-compose.yml
version:'3.3'services:front-app:image:angular:ltsbuild:.ports:-'80:80'environment:TZ:'Asia/Tokyo'docker-compose.yml のディレクトリで以下のコマンドを実行する。
$ docker-compose up -d
http://localhostにアクセスし Angular のトップページが確認できれば終了。
おわりに
開発環境は、自分の使い慣れた環境を使いたい！という思いで、折衷案を考えましたが、
実行環境のみを配布してもバージョン不整合などを完璧に防ぐことは難しいと考えています。Angular 本体の組み込み Web サーバーで動作確認してコミットなどされたら防ぐことはできないので。。やはり、「コミット前に確認をすること！」等のルールで縛るのではなく、仕組みで縛れる様にしたほうがいいのではないか？と書きながら思いました。