Angular CLIのバージョンをDockerで制御

前回の記事で休み期間中に、Serverless周りの勉強しようと思いこちらを進め中。

AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~バックエンド編~ | DevelopersIO

本ブログではAWS Amplify+Angular6+Cognitoでログインページを作っていきます。また、ついでに、API GatewayにもCognitoで認証をかけて、Cognitoでログインしているユーザのみ利用できるようにしていきます。

とりあえずバックエンドはスラスラ進んだんですが、次Frontを手がけるタイミングで記事と手元のAngularのバージョンが違うことが判明。

多少のバージョン違いなら問題ないと思ったんですが、1.7系と6系、7系でプロジェクト構成ファイル少々変わるみたいで・・・
帳尻合わせするより作り直したほうが早いと判断しました(；´∀｀)

まぁ、Frontではあるあるネタっぽいのでバージョン違うなら上げればいいんですが、現行開発でAngular 1.7.2を使っているのでグローバル領域のAngularを不用意に上げるのは流石にリスキー。

というわけで、Dockerでなんとかならんかなと調べてみた。

期待を裏切らないDocker
まとめ

期待を裏切らないDocker

バージョン違うbinを叩くのなんてDockerには朝飯前ですよね。
調べるといくらでも出てきました。

https://hub.docker.com/r/alexsuch/angular-cli/

とりあえず、今回は6系使うのでalexsuch/angular-clの6.2-chromiumのイメージを取ってきました。
公式は出てないっぽいのと、人気順からしたら3番目ですが上位2つが更新止まってるっぽくて6以上がなかったので選びました。

$ docker pull alexsuch/angular-cli:6.2-chromium
6.2-chromium: Pulling from alexsuch/angular-cli
a0710691c81a: Pull complete 
e233f8baa619: Pull complete 
f01d5bba209a: Pull complete 
0c6f63890766: Pull complete 
3d202bd79f9c: Pull complete 
Digest: sha256:2f7ed3b949725360ffb5f5dcb05fd03dfaf2e93dba85ed6f29711ed6e80efcf1
Status: Downloaded newer image for alexsuch/angular-cli:6.2-chromium

あとはホスト側のディレクトリをコンテナ側にマウントして、プロジェクト作成用のコマンドを叩く。

docker run -it --rm -w /app -v $(pwd):/app alexsuch/angular-cli:6.2-chromium ng new sample-project

これでコマンドを叩いたホスト側ディレクトリにsample-projectという名前でAngular6のプロジェクトが作成されます。

プロジェクト内でバージョンチェックした結果が以下の通り。

$ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.8
Node: 10.9.0
OS: darwin x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.8
@angular-devkit/build-angular     0.8.8
@angular-devkit/build-optimizer   0.8.8
@angular-devkit/build-webpack     0.8.8
@angular-devkit/core              0.8.8
@angular-devkit/schematics        0.8.8
@angular/cli                      6.2.8
@ngtools/webpack                  6.2.8
@schematics/angular               0.8.8
@schematics/update                0.8.8
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.16.4