6
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-02-10

この記事は、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 のドキュメントを参照ください。

フィード ビュー

フィード ビューを使うと、パッケージバージョンのサブセットを共有することができます。
規定のビューとしては、@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

フィードへの接続

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

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

スクリーンショット_20230210_171758.png

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

フィードへの公開

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

スクリーンショット_20230210_170245.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 されたことをトリガにフィードに公開(更新)、呼び出し側もビルドすることが可能です。

6
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1