Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / NodeJSで自作のコマンドラインツールを作ってTravis CIで自動でテストしてNPMに公開する方法

2018年11月5日 By KD コメントを書く

NodeJSで自作のコマンドラインツールを作ってTravis CIで自動でテストしてNPMに公開する方法

NodeJSで自作のコマンドラインツールを作ってTravis CIで自動でテストしてNPMに公開する方法

NodeJSには便利なNPMというパッケージ管理ツールがあります。今回は、NodeJSで自作のコマンドラインツールを作り、Travis CI経由で自動でテストしてからNPMに公開する方法を紹介します。

見出し

  • 1 はじめに
  • 2 前提
  • 3 NodeJSでコマンドラインツールを作る
    • 3.1 NPMで検索してパッケージ名を決める
    • 3.2 GitHubでプロジェクトを作る
    • 3.3 簡単なコマンドラインツールを実装する
    • 3.4 .npmignoreを設定する
    • 3.5 NPMに公開する
  • 4 Travis CIで自動でテストしてNPMに公開する
    • 4.1 Travis CIとGitHubのリポジトリを連携する
    • 4.2 Travis CIのファイルを準備する
    • 4.3 Travis CI経由で自動テストする
    • 4.4 NPMのAPIトークンを取得する
    • 4.5 Travis CIにNPMのAPIトークンを設定する
    • 4.6 Travis CI経由で自動テスト後にNPMに自動で公開する
  • 5 おまけ(Gitのタグコマンド復習)
    • 5.1 Gitのタグを追加してコミットする
    • 5.2 GitのタグをPushする
    • 5.3 Gitのタグを表示する
    • 5.4 Gitのタグを削除してPushする
  • 6 最後に
  • 7 環境
    • 7.1 関連記事

はじめに

NodeJSにはNPMというパッケージ管理の仕組みがあります。この仕組みを使うことでJavaScriptで書かれた便利なライブラリやコマンドラインツールを誰でも簡単に利用することができます。

今回は、NodeJSで自作のコマンドラインツールを作成しNPMに公開するのはもちろん、Travis CIを使って自動でテストして、自動でNPMに公開するまでの方法を紹介します。

前提

以下の準備が完了している必要があります。

  • GitHubのアカウントがある
  • NPMのアカウントがある
  • Travis CIのアカウントがある
  • NodeJSがインストールされている

細かいバージョンは「環境」を確認してください。

NodeJSでコマンドラインツールを作る

まずは公開するコマンドラインツールを作りましょう。

NPMで検索してパッケージ名を決める

NPMでパッケージを公開する場合、パッケージ名は一意である必要があります。NPMのサイトに行って、検索窓から自分が作りたい名前を検索して被っていないことを確認します。

NewImage

後述しますが、ここで決めるのはあくまでパッケージ名(GitHubにおけるリポジトリ名)であって、コマンドラインツールのコマンド名ではありません。コマンド名は後で決めれますし、NPM上で被っていてもエラーにはなりません。

GitHubでプロジェクトを作る

NPMで公開する予定のパッケージ名でGitHubのリポジトリを作成します。今回は仮に「hello-simple-cli」とします。

NewImage

簡単なコマンドラインツールを実装する

GitHubからプロジェクトをクローンして、コマンドラインツールを作成します。

$ git clone https://github.com/{your-github-account}/hello-simple-cli.git
$ cd hello-cli/
$ npm init -y
$ npm i -D jest
$ mkdir src
$ touch src/index.js
$ chmod +x src/index.js # 必要であれば
$ touch src/utils.js
$ mkdir test
$ touch test/utils.spec.js

package.json

package.jsonにコマンドラインツール用の設定と、開発用のスクリプトを追加します。具体的には「main」を削除して「bin」を追加します。versionはひとまず「0.1.0」にしておきます。

{
  "name": "hello-simple-cli",
  "version": "0.1.0",
  "description": "Hello Simple CLI",
  "bin": {
    "hello": "src/index.js"
  },
  "scripts": {
    "start": "src/index.js",
    "test": "jest"
  },
  "keywords": [],
  "author": "You",
  "license": "MIT",
  "devDependencies": {
    "jest": "^23.6.0"
  }
}

この「bin」に指定したプロパティ名がコマンドラインツールのコマンド名になります。今回は「hello」というコマンド名にします。

utils.js

名前を渡すと挨拶のメッセージを返してくれるだけの関数を作ります。

module.exports.createHelloMessage = firstName => {
  return `Hello ${firstName}!`;
}

utils.spec.js

関数のテストを簡単に書きます。

const { createHelloMessage } = require('../src/utils');

describe('utils test', () => {
  describe('createHelloMessage function test', () => {
    test('should return a correct message', () => {
      const firstName = 'Keid';

      const result = createHelloMessage(firstName);

      expect(result).toBe('Hello Keid!');
    });
  });
});

テストが通ることを確認します。

$ npm test

> hello-simple-cli@0.1.0 test /Users/you/hello-simple-cli
> jest

 PASS  test/utils.spec.js
  utils test
    createHelloMessage function test
      ✓ should return a correct message (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.033s
Ran all test suites.

OKですね。

index.js

コマンドラインからの引数で名前を受け取って実行するだけのコマンドラインを作ります。ファイルの最初に「#!/usr/bin/env node」を追加する必要があります。

#!/usr/bin/env node
const { createHelloMessage } = require('./utils');

const firstName = process.argv[2];

if(!firstName) {
  return console.error('A firstName is required as the first argument.');
}

console.log(createHelloMessage(firstName));

コマンドラインから実行してみます。

$ npm start
...
A firstName is required as the first argument.
$ npm start Keid
...
Hello Keid!

OKですね。NPMに公開して、NPM経由でダウンロードして使う場合、この「npm start」の部分が「bin」で指定したコマンド名(今回は「hello」)に置き換わります。

これで、簡単ではありますが、実装は完了です。

.npmignoreを設定する

NPMに公開したくないフォルダやファイルを「.npmignore」で指定します。

$ touch .npmignore

テストのソースコードはコマンドラインツールのユーザには不要なのでtestフォルダを指定します。

test/

NPMに公開する

ここでひとまず手動でNPMに公開してみましょう。

プロジェクトをGitコマンドでGitHubにPushして、NPMコマンドでNPMにログインして公開します。

$ git add .
$ git commit -m "Add awesome feature"
$ git push origin master
$ npm login
$ npm publish

NPMの公開に成功していれば、NPMを経由して、自作のコマンドラインが利用可能になっています。

$ npm i -g hello-simple-cli
$ hello Keid
Hello Keid!

自作のコマンドラインツールが完成しました!

Travis CIで自動でテストしてNPMに公開する

ここからTravis CIを使ってテスト実行とNPM公開を自動化します。

Travis CIとGitHubのリポジトリを連携する

Tracis CIの画面から連携したいGitHubのリポジトリ(今回は「hello-simple-cli」)を選択して、連携します。

NewImage

Travis CIのファイルを準備する

プロジェクトにTracis CIの設定ファイルを作成します。

$ touch .travis.yml

Travis CI経由で自動テストする

Travis CIの設定ファイルにNodeJSで実行できるようにします。

language: node_js
node_js:
  - "10"

これで、GitHubにPushするとNodeJSのバージョン10で環境が作成され、「npm test」のスクリプトが自動実行されます。詳しくは公式ドキュメントを参照してください。

$ git add .
$ git commit -m 'Add travis yaml'
$ git push origin master

Travis CIの画面で以下のようにグリーンになっていれば自動テストは成功しています。(参考として別プロジェクトのキャプチャを掲載しています)

NewImage

NPMのAPIトークンを取得する

次にNPMへ公開する作業を自動化します。そのためにNPMをプログラムから実行するためのAPIトークンを取得します。

NPMのTokensのページから「Create New Token」をクリックします。

NewImage

「Read and Publish」を選択して、「Create Token」をクリックします。

NewImage

作成されたAPIトークンをメモしておきます。

NewImage

Travis CIにNPMのAPIトークンを設定する

Travis CIの対象のプロジェクト(今回は「hello-simple-cli」)の環境変数の設定画面から「NPM_TOKEN」という名前で先程のNPMのAPIトークンを登録します。

NewImage

注意点として「Display value in build log」のところはデフォルトのままオフにしておきましょう。そうしないとパブリックなTravis CIのログにAPIトークンが漏洩してしまいます。

Travis CI経由で自動テスト後にNPMに自動で公開する

準備が整ったので、Travis CIの設定ファイルを編集しましょう。

language: node_js
node_js:
  - "10"

deploy:
  provider: npm
  email: "{your-npm-email-address}"
  api_key: "$NPM_TOKEN"
  on:
    tags: true

after_deploy:
  - test ! -e /home/travis/.npm/_logs ; TRAVIS_TEST_RESULT=$?

{your-npm-email-address}の部分は自分のNPMの公開メールアドレスに変更してください。もし書きたくなければ、先程のAPIトークンと同じようにTravis CIの環境変数の設定画面から環境変数として登録しておけば隠せます。(とはいえ、そもそもNPMには公開用のメールアドレスが必要なのでその必要性があるかは微妙です)

GitHubのリポジトリにタグをPushするとデプロイが実行されるように設定しています。

また、今回は一工夫しています。Travis CIでは自動テストの成功や失敗は確認するのですが、デプロイの成功や失敗に関しては見ていません。そのため、デプロイが失敗してもTravis CIのビルドは成功してしまうという問題があります。そこで、今回はNPMコマンドが失敗した場合にデバッグログが特定のフォルダに出力されることを利用して、そのフォルダが無ければ成功、あれば失敗という定義でデプロイの失敗を検知するようにしています。Travis CIのデフォルトの動作のまま(デプロイの失敗は検知されない)で良ければ「after_deploy」の箇所は削除してください。

TravisのNPM設定はこちら、Travisの環境変数はこちらに公式ドキュメントがあります。

では、NPMパッケージをGitHubへのPushだけで自動的にNPMに公開されるか確認しましょう。

$ git add .
$ git commi -m "Edit travis yaml"
$ git push origin master
$ npm version patch
v0.1.1
$ git push origin master
$ git push origin v0.1.1

これでTravis CIの画面でグリーンになれば、NPMに新しいバージョン(今回はv0.1.0 -> v0.1.1に変更)で自動的にパッケージが公開されます。

ポイントとしては、NPMにパッケージを公開する時の条件として、「package.json」の「version」が上がっている必要がある点です。「npm version」コマンドを使うことで、Gitのタグを作ると同時に「package.json」の「version」も変更してコミットされます。なので、手動で「package.json」の「version」を変更してコミットし、Gitのタグを付ける、という操作が不要になり、便利です。(また、補足として「diet-tag」という方法もあります。)

おまけ(Gitのタグコマンド復習)

最後に、Gitのタグを扱うコマンドを簡単に復習しましょう。

Gitのタグを追加してコミットする

$ git tag v1.0.0
または
$ git tag -a v1.0.0 -m "Release version"

GitのタグをPushする

$ git push origin v1.0.0
または
$ git push --tags

Gitのタグを表示する

$ git tag
v0.1.0
v0.1.1
v1.0.0

Gitのタグを削除してPushする

$ git tag -d v1.0.0
$ git push origin :v1.0.0
または
$ git tag -d v1.0.0
$ git push --delete origin v1.0.0

これでGitのタグも問題なしですね。

最後に

いかがでしたか?これで、自作の好きなコマンドラインツールを作っていつでも簡単にNPMで公開できるようになったのではないでしょうか。思いの外、痒いところに手が届くようなツールというのは無かったりするので、自作して公開すると世界中のエンジニアがあなたに感謝するかもしれませんよ。それでは。

環境

  • NPM: 6.4.1
  • NodeJS: v10.12.0
The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • Herokuのデプロイ先をステージング環境と商用環境で分ける方法

    何か作ったアプリケーションをデプロイするにはHerokuは非常にお手軽なデプロイ環境です。今回は、Herokuにデプロイ…

  • UXデザイン初学者のための基本用語まとめ

    UXという言葉はだいぶ前からデザインの考え方として流行っています。ただ、本気で学ぼうと思うとどうしても情報は英語になるた…

  • Heroku上にNginxでリバースプロキシを構築する方法

    Heroku上にオリジナルのアプリケーションを構築したとして、それを公開するにはリバースプロキシを経由するのが一般的です…

  • PythonのためのVisual Studio Codeの設定方法

    Pythonは特にアカデミックな場で人気のプログラミング言語です。機械学習に注目が集まっている今、Pythonを学ぶこと…

  • Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法

    Herokuの無料のdynoを使っている場合、現時点のルールでは30分でスリープしてしまいます。スリープしてしまうと、ア…

カテゴリ : 技術 Tips & Tutorials タグ : nodejs, npm, travis-ci

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
  • バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!
    バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • Herokuのデプロイ先をステージング環境と商用環境で分ける方法

    何か作ったアプリケーションをデプロイするにはHerokuは非常にお手軽なデプロイ環境です。今回は、Herokuにデプロイ…

  • UXデザイン初学者のための基本用語まとめ

    UXという言葉はだいぶ前からデザインの考え方として流行っています。ただ、本気で学ぼうと思うとどうしても情報は英語になるた…

  • Heroku上にNginxでリバースプロキシを構築する方法

    Heroku上にオリジナルのアプリケーションを構築したとして、それを公開するにはリバースプロキシを経由するのが一般的です…

  • PythonのためのVisual Studio Codeの設定方法

    Pythonは特にアカデミックな場で人気のプログラミング言語です。機械学習に注目が集まっている今、Pythonを学ぶこと…

  • Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法

    Herokuの無料のdynoを使っている場合、現時点のルールでは30分でスリープしてしまいます。スリープしてしまうと、ア…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes