AngularのライブラリをAzure Artifactsで使用する
はじめに
2020年1月時点の記事となります。
記事を見ていただくタイミングによっては
記事中で使用しているAzureのキャプチャやコマンドが変更されている可能性がありますのでご留意ください。
また、Angluarは下記バージョンで構成しています。
- @angular/cli: 8.3.21
- Angular: 8.2.14
同様に、コマンドなどが変更されている可能性がありますので、こちらもご留意ください。
やりたいこと
- Angularでライブラリを作る。
- そのライブラリをnpm installできるようにする。
プロジェクトが巨大かつ複数にまたがってくると
Angularに限らずライブラリとして分離したくなってくるのが開発者の性かもしれません。
そして作成したライブラリは既存のライブラリ同様npmやNuGetといったパッケージマネージャで管理したいところです。
ただ、社内だけでしか使わないようなものではありますしPublishに公開したくはない。
おまけに、npmの有料契約やってないし、verdaccioみたいなプライベートレジストリもってない。という状況です。
そこでAzure Artifactsを利用し、サクッとプライベートなレジストリを作りたいと思います。
Angularでライブラリを作る
ここはドキュメントにある通りです。
Sandboxの切り方など参考になったので、StackOverflowの回答も参考になるかとは思います。
Azure Artifats
新しいFeedの作成
早速ライブラリを公開するレジストリ(Feedと呼ばれているようです)を作っていきます。
Azure DevOpsの「Artifacts」を選択します。
一番最初は空の状態です。ここからFeedを作成していきます。
上図、Create Feedから新しいFeedを作成します。
そこまで複雑な設定画面ではありませんね。
- FeedのURLで使用される名称
- Visibity: Feedを使用できるユーザーの制御
- UpstreamSourceの使用有無:
npmjs.orgやnuget.orgのパッケージも使用するか？設定
ちなみに、Artifactsを作成するProject自体のVisibilityがPublicになっている場合はAritefactsもPublic一択となります。
Feedへの接続
Connect to feedでFeedへの接続方法を確認できます。
今回はnpmを使用するのでnpmの接続方法を確認します。
他のパッケージレジストリを使用するときと同様に、プロジェクトに.npmrc ファイルを作成し
レジストリとして作成したAzure ArtifactsのFeedを指定していることがわかります。
vsts-npm-authの使用
PrivateなFeedのため、npm publishするためにはAzureDevOpsへの認証が必要となります。
WIndowsを使用している場合、認証に使用するトークンの取得が比較的かんたんに行えます。
npm install -g vsts-npm-auth しvsts-npm-auth -config .npmrcを行うだけですね。
ちょいと面倒なPersonalAccessTokenの作成から、なにからなにまでやってくれます。楽。
Publish
あとはnpmコマンドでPublishするだけです。
トークンの発行ができている場合は npm publish .\dist\[パッケージディレクトリ名] だけでFeedに発行されます。
※Angularのビルドコマンドで生成物がdist配下にできるので。
発行されたら、DevOpsのFeedの画面から下図のように確認できます。
赤枠内にパッケージのインストールコマンドもあるので、これを使用して作成したライブラリのインストールを行えます。
Feedを使う
Feedを使用する場合、前述の「Feedへの接続」と同じことをしてあげる必要があります。
レジストリのURLを指定したnpmrcファイルの作成と(場合によっては)トークンの取得です。
その設定だけで、npm installで作成したライブラリのインストールが行えるようになります。
他のライブラリ使用時にエラーとなる場合
例えば、npm install @angular/animation などnpmjs.orgで管理されているパッケージを使用しようとした場合、404エラーとなることがあります。
これはUpstreamが正しく設定されておらず、npmjs.orgのパッケージを見に行けていないことが原因であると考えられます。
VisiblityをPublicからPrivateに手動で変えたときなどにそのような状況になるようです。
FeedSettingsからUpstreamの設定を行います。
上図の通りnpmjs.orgが存在すれば404は発生しないはずです。
Azure Pipelinesでライブラリをデリバリする
一々ローカルでnpm publishするのは面倒なのでCIでPublishされるようにしたいところです。
そこで、使用しているAzure Artifactsと同じプロジェクトでCIパイプランを構築します。
といってもそこまで複雑なことはなく、npmAuthenticate タスクを実行の後
npm publishするだけです。同一のプロジェクトだからかな？非常にかんたんです。
- task: npmAuthenticate@0 inputs: workingFile: '.npmrc' - script: | npm install -g @angular/cli npm install npm run build:lib npm publish .\\dist\\test-lib displayName: 'npm install ,build and publish'
これで、ライブラリのCIも構築できました。
おわりに
「Angularの」とありましたがほぼAzure Artfactsの使い方ですね。。。
プライベートなパッケージ管理をしたい場合でAzureDevOpsを使用している場合
別途の契約や、自前のサーバーを用意する必要がないので、Azure Aritfactsは非常に効果的な手なのかもしれません。
どんどん活用していきたいです。
👇今回検証で使用したリポジトリです。
