AZ-400：Azure Artifacts フィードへの npm パッケージ公開

この記事は、Designing and Implementing Microsoft DevOps Solutions（AZ-400）の受験勉強の中で、自分が間違えやすい、覚えにくいと思ったポイントの一つをまとめたものです。同じく資格取得に向けて勉強されている方の参考になれば幸いです。

## Azure Artifacts

Azure DevOps の Artifacts を使うと、開発者はフィードに NuGet や npm などのパッケージを発行し、同じチーム、組織、パブリックに共有することができます。

### アクセス制限

フィードの操作については、Azure DevOps のプロジェクト、その上の組織の 2 種類のスコープでアクセス制限を行うことができます。
ブラウザから操作して設定する場合は、プロジェクトのフィードに対してアクセスレベルを設定する形式となります。
アクセスレベルには下記があります。

- Reader
- Collaborator
- Contributor
- Owner

Reader/Collaborator でもパッケージの一覧表示/インストール/復元は可能です。
パッケージの公開や削除を行うには Contributor/Owner の権限が必要です。
詳細は[MS Learn のドキュメント](https://learn.microsoft.com/ja-jp/azure/devops/artifacts/feeds/feed-permissions?view=azure-devops#permissions-table)を参照ください。

### フィード ビュー

フィード ビューを使うと、パッケージバージョンのサブセットを共有することができます。
規定のビューとしては、@Local、@Prerelease、@Release があり、当該バージョンがどの品質段階にあるかをビューによって識別することができます。
@Local には全ての発行済パッケージが含まれ、品質段階によって、@Prerelease->@Release と昇格することができます。

### npm パッケージの Artifact への発行

MS Learn の演習に NuGet パッケージを Artifact に発行するものがありますが、個人的には Node.js を使う場面が多いため、npm パッケージを Azure Artifact に発行してみます。

### サンプルパッケージ

ここでは下記のような簡単な文字列を返すだけの関数をパッケージ make-konamon として発行してみます。

- index.js

```
export const makeKonamon = () => {
  return "okonomiyaki";
};
```

- package.json

```
{
  "name": "make-konamon",
  "version": "1.0.0",
  "description": "return konamon word.",
  "main": "index.js",
  "type": "module"
}
```

### フィードの作成

Azure DevOps の Artifacts メニューから「Craete Feed」を選択し、フィード名と公開先を設定します。
ここではフィード名は FeedMakeKonamon とします。
![スクリーンショット_20230210_144408.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104149/8af3bac4-a49c-476f-d798-c5c28317009f.png)

### フィードへの接続

フィードへの接続には.npmrc を使用します。.npmrc は下記の 2 種類を作成しておきます。
いずれも作成したフィードの「Connect to Feed」->「npm」を選択することで設定するべき内容が表示されます。

- ホームディレクトリ下: フィードへ接続するための資格情報を格納します。「Setup credentials」参照。
- プロジェクトディレクトリ下: 公開先の registry 情報を格納します。「Project setup」参照。

![スクリーンショット_20230210_171758.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104149/e09df940-f059-4367-fabb-0172320e4d67.png)


私は Windows PC から実施しましたが、vsts-npm-auth がうまく動作しなかったため、Other タブの内容で設定を行いました。

### フィードへの公開

上記設定後、ローカルの make-konamon ディレクトリで`npm publish`を実行することでフィードに公開されます。

![スクリーンショット_20230210_170245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104149/d15b2453-22b6-71ad-05f1-9725e0fcf83d.png)

### フィードからのインストール

上記フィードから make-konamon パッケージをインストールしてみます。下記のような別プロジェクトから import してみます。

- index.js

```
import { makeKonamon } from "make-konamon";

console.log(makeKonamon());
```

別プロジェクトにも registry 指定された.npmrc をコピーし、インストール、実行してみます。

```
$ npm install make-konamon
added 1 package in 4s
$ node index.js
okonomiyaki
```

パッケージの返す「okonomiyaki」が出力されることが確認できました。

### パッケージの更新

パッケージを更新してみます。変更箇所は下記 2 点です。

- index.js で返す文字列を「okonomiyaki」->「takoyaki」に変更
- package.json の version を「1.0.0」->「1.1.0」に変更

変更後、`npm publish`を実行します。
なお、version を変更せずに`npm publish`を実行するとエラーとなります。

フィードが更新されたことを確認後、呼び出し側でインストール、コードを実行すると文字列が変わっていることが確認できました。

```
$ npm install make-konamon
changed 1 package in 2s
$ node index.js
takoyaki
```

### Azure Pipelines との連携

今回はローカル PC との連携のみ試しましたが、Azure Pipelines を利用し、パッケージのソースがリモートのリポジトリに push されたことをトリガにフィードに公開（更新）、呼び出し側もビルドすることが可能です。