GitHub Actions を使用して NPM パッケージを自動的に公開する方法

継続的インテグレーションとデリバリー (CI/CD) を使用して npm パッケージの公開プロセスを自動化すると、各リリースが公開前に品質ゲート (テスト スイート) を通過することが保証されます。同時に、テスト ファイルを除外することで、最終的に公開されるパッケージに何が含まれるかを正確に制御できます。このガイドでは、シンプルな npm パッケージ (英数字バリデータ) の CI/CD を設定して、GitHub の新しいリリースごとにテストをトリガーし、パッケージ バージョンを更新し、クリーンなパッケージを npm に自動的に公開する方法を学びます。

npm パブリッシングを自動化する理由

手動での npm 公開は、特にプロジェクトが成長し、貢献者が増えるにつれて、時間がかかり、エラーが発生しやすくなります。プロセスを自動化することで、次のことが可能になります。

• 品質の確保:公開前に自動的にテストを実行します。テストが失敗した場合、新しいバージョンはリリースされません。
• 一貫したバージョン管理:公開されたパッケージのバージョンは常にリリース タグと一致します。
• スムーズなコラボレーション:貢献者がコードを送信し、リリースを作成すると、パイプラインが残りの作業を実行します。特別な npm 権限は必要ありません。

前提条件

1. Node.js と npm:
   • NodeJS と NPM がインストールされていない場合は、ここをクリックしてください。
   • ターミナルで以下のコードを実行してインストールを確認してください。

 node -v npm -v

2. GitHub アカウントとリポジトリ:
   • コードを保存し、GitHub Actions を実行するには、GitHub リポジトリが必要です。
3. NPM アカウントとアクセス トークン:
   • npmjs.comにサインアップまたはログインして、アクセス トークンを生成します。
   • 自動公開のために、アクセス トークンを GitHub リポジトリのシークレットとして追加します。

ステップ1: プロジェクトの設定

文字列が英数字であるかどうかをチェックする関数をエクスポートする、単純なalphanumeric-validatorパッケージを作成します。

1. プロジェクトを初期化する

   mkdir alphanumeric-validator cd alphanumeric-validator npm init -y

2. 必要に応じてpackage.json更新します。alphanumeric alphanumeric-validatorの場合は次のようになります。

 { "name": "alphanumeric-validator", "version": "1.0.0", "description": "Validates if a string is alphanumeric", "main": "index.js", "scripts": { "test": "jest" }, "keywords": ["alphanumeric", "validator"], "author": "Your Name", "license": "ISC" }

3. バリデーターを実装する

// index.js function isAlphaNumeric(str) { return /^[a-z0-9]+$/i.test(str); } module.exports = isAlphaNumeric;

ステップ2: ローカルでテストを追加して実行する

テストを行うことで、壊れたコードが公開されないようにすることができます。

1. Jestをインストールする

   npm install --save-dev jest

2. テストファイルを作成する

   mkdir tests

3. 以下のコードをtests/index.text.jsファイルに貼り付けます。

    // tests/index.test.js const isAlphaNumeric = require('../index'); test('valid alphanumeric strings return true', () => { expect(isAlphaNumeric('abc123')).toBe(true); }); test('invalid strings return false', () => { expect(isAlphaNumeric('abc123!')).toBe(false); });

4. テストを実行する

   npm test 

テストは成功しましたか? 素晴らしい。次に、公開する前にこれらのテストが CI で実行されることを確認します。

ステップ3: GitからNodeモジュールを除外する

Github に公開する前に、 node_modules除外する必要があります。 node_modulesにはnpm installで再生成できるファイルが多数含まれているため、バージョン管理にコミットする必要はありません。

プロジェクトのルートに.gitignoreファイルを作成します。

 echo "node_modules" >> .gitignore

これにより、 node_modulesが git によって追跡されず、リポジトリにプッシュされなくなります。

ステップ4: 公開パッケージからテストを除外する

CI 中にテストを実行する場合、公開された npm パッケージにテスト ファイルを含めないようにする必要があります。これにより、パッケージがクリーンな状態になり、バンドル サイズが小さくなり、必要なファイルのみがユーザーに配布されるようになります。

ルート フォルダーに.npmignoreファイルを作成し、テスト ファイル名を追加します。

 // .npmignore __tests__ *.test.js // captures all files in the directory with a .test.js extension

これにより、 npm publish実行したときにテスト ファイルが含まれなくなります。

ステップ5: GitHubでコードをホストする

1. 新しい GitHub リポジトリを作成します。
   • https://github.com/newにアクセスし、 alphanumeric-validatorリポジトリを作成します。

2. コードをプッシュする

   git init git add . git commit -m "Initial commit" git remote add origin [email protected]:YOUR_USERNAME/alphanumeric-validator.git git push -u origin main 

ステップ5: npmへの最初の手動公開

• 自動化を開始する前に、パッケージを公開できることを確認してください。こちらをご覧ください。
• 次に、 --access publicフラグを追加して、パッケージを公開し、ユーザーがアクセスできるようにします。

 npm login npm publish --access public 

• 初期バージョンがライブであることを確認するには、 https://www.npmjs.com/package/alphanumeric-validatorにアクセスしてください。

  
  

ステップ6: GitHub Actionsワークフローの設定

新しいリリース ( v1.0.1など) を作成するときに、リリース イベントごとに実行されるワークフローを構成する必要があります。

• ワークフローはコードをチェックアウトします。
• 依存関係をインストールします。
• 品質を確保するためにテストを実行します。
• リリース タグからpackage.json新しいバージョンに更新します。
• テスト ファイルを含めずに更新されたパッケージを npm に公開します。

ワークフローファイル

.github/workflows/publish.ymlを作成します:

 name: Publish Package to npm # Trigger this workflow whenever a new release is published on: release: types: [published] # Grant write permissions to the repository contents so we can push version updates permissions: contents: write jobs: publish: runs-on: ubuntu-latest steps: # Step 1: Check out the repository's code at the default branch # This makes your code available for subsequent steps like installing dependencies and running tests. - uses: actions/checkout@v4 with: token: ${{ secrets.GITHUB_TOKEN }} ref: ${{ github.event.repository.default_branch }} # Step 2: Set up a Node.js environment (Node 20.x) and configure npm to use the official registry # This ensures we have the right Node.js version and a proper registry URL for installs and publishing. - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20.x' registry-url: 'https://registry.npmjs.org' # Step 3: Install dependencies using npm ci # This ensures a clean, reproducible installation based on package-lock.json. - name: Install dependencies run: npm ci # Step 4: Run your test suite (using the "test" script from package.json) # If tests fail, the workflow will stop here and not publish a broken version. - name: Run tests run: npm test # Step 5: Update package.json to match the release tag # The release tag (eg, v1.0.1) is extracted, and npm version sets package.json version accordingly. # The --no-git-tag-version flag ensures npm doesn't create its own tags. # This step keeps package.json's version aligned with the release tag you just created. - name: Update package.json with release tag run: | TAG="${{ github.event.release.tag_name }}" echo "Updating package.json version to $TAG" npm version "$TAG" --no-git-tag-version # Step 6: Commit and push the updated package.json and package-lock.json back to the repo # This ensures your repository always reflects the exact version published. # We use the GITHUB_TOKEN to authenticate and the granted write permissions to push changes. - name: Commit and push version update run: | TAG="${{ github.event.release.tag_name }}" git config user.name "github-actions" git config user.email "[email protected]" git add package.json package-lock.json git commit -m "Update package.json to version $TAG" git push origin ${{ github.event.repository.default_branch }} env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Step 7: Publish the new version to npm # The NODE_AUTH_TOKEN is your npm access token stored as a secret. # npm publish --access public makes the package available to anyone on npm. - name: Publish to npm run: npm publish --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

NPMトークンをGitHubに追加する

• https://www.npmjs.com/settings/:username/tokens/newにアクセスします ( :username実際のユーザー名に置き換えてください)
• 名前を入力し、タイプに自動化を選択して生成します

• トークン ページにリダイレクトされ、そこでトークンをコピーできます。

• GitHub リポジトリで、 [設定] > [シークレットと変数] > [アクション]に移動します。

• 「新しいリポジトリシークレット」をクリックし、 NPM_TOKENを追加します。

  
  

  

ステップ 7: 新しいリリースの作成

v1.0.1リリースのREADME.md追加してプッシュしたとします。

1. 新しいリリースの草稿:
   • GitHub リポジトリのリリースセクションに移動します。[ https://github.com/username/repo/releases ]
   • 「新しいリリースを下書き」をクリックします。
   • 「タグバージョン」をv1.0.1に設定します。
   • リリースを公開をクリックします。

2. ワークフローがトリガーされました:リリースイベントが発動します。ワークフローは、
   • コードをチェックアウトします。
   • 依存関係をインストールします。
   • テストを実行します。テストが失敗すると、ジョブは停止し、パッケージは公開されません。
   • テストに合格すると、package.json が1.0.1に更新されます。
   • テスト ファイルを除いた1.0.1バージョンを npm に公開します。

3. npm で検証する:しばらくしてから、npm パッケージ ページにアクセスして、新しいバージョンがライブになっていることを確認します。

結論

GitHub Actions を npm 公開ワークフローに統合すると、優れた CI/CD パイプラインが確立されます。新しいリリースごとに、包括的な一連のテストが実行され、package.json が正しいバージョンに更新され、テストなどの不要なファイルが削除された合理化されたパッケージが npm に公開されます。

このアプローチにより、時間が節約され、人的エラーが減り、リリースの信頼性が向上し、貢献者が自分の作業がシームレスに公開されることを簡単に確認できるようになります。

完全にテストされ、適切にバージョン管理されたパッケージを npm レジストリに送信するには、単一の GitHub リリースだけで十分です。