ngrokのトンネリングURLをSlackにポストする処理を実装する 1. 環境構築編

ウェブサイトなどをちょこっと外のネットワークに出して誰かに確認してもらったりするときにngrokを使っています。ngrokは、URLトンネリングサービスです。トンネリングURLがSlackに通知されるととても便利なので、これをNode.jsで実装します。コマンドの逐次解説も併記してみました。

開発環境のセットアップ

Nodeプロジェクトを開始します。Nodeのバージョンはv7.2.0です。
npm initコマンドのインタラクションでは、入力は全てデフォルトで問題ありません。

$ mkdir ngrok-slack-sample
$ cd ngrok-slack-sample
$ npm init

以下の開発環境を用います。これらをインストールします。

  • トランスパイラ: Babel
  • プリセット: es2015
  • テストクライアント: Mocha
$ npm install --save-dev babel-cli babel-core babel-preset-es2015 mocha

トランスパイラのルールプリセットを追加し、es2015で記述したJavaScriptがNode.jsから読み込み可能となるよう設定します。

$ echo '{ "presets": ["es2015"] }' > .babelrc

Mochaの実行オプションファイルとテストを記述するソースファイルを作成します。実行オプションとしてトランスパイラを指定することで、es2015で記述したテストファイルの使用が可能になります。

$ mkdir test
$ pushd test
$ touch test.es2015.unit.js
$ echo '--compilers js:babel-core/register' > ./mocha.opts
$ popd

プログラムを記述するソースファイルを作成します。

$ touch index.es2015.js

package.jsonを編集して、npmスクリプトとしてテストコマンド、ビルドコマンドを追加します。

$ vi package.json
{
..
  "scripts": {
    "build": "babel index.es2015.js -o index.js", 
    "test": "mocha test/"
  }
..
}

npmスクリプトの実行をテストします。
ビルドコマンドを実行した時に、index.jsが生成されていることを確認してください。

$ npm run build

> ngrok-slack-sample@1.0.0 build /path/to/ngrok-slack-sample
> babel index.es2015.js -o index.js
$ ls index.js

index.js

テストコマンドを実行して、正しくテストが実行されていることを確認して下さい。

$ npm test
> ngrok-slack-sample@1.0.0 test /path/to/ngrok-slack-sample
> mocha test/



  0 passing (3ms)

 

自動生成ファイルや外部のライブラリがコミットされないよう、gitignoreします。

$ echo 'node_modules/'  >> .gitignore
$ echo 'index.js' >> .gitignore

ngrokのNodeラッパー、httpクライアントをインストールします。

$ npm install --save ngrok request

Gitリポジトリとして初期化し、最初のコミットを行います。

$ git init
$ git add .
$ git commit -m"Initialize the project"

以上の操作で、以下のファイルが追加されるはずです。

$ tree -Ia 'node_modules|.git'
.
├── .babelrc
├── .gitignore
├── index.es2015.js
├── index.js
├── package.json
└── test
    ├── mocha.opts
    └── test.es2015.unit.js

1 directory, 7 files

ここまでのファイルは以下のリンクから確認できます。
https://github.com/KamataRyo/ngrok-slack-sample/tree/01_initialized

ngrokの認証情報やSlackのWebhookを取得する

今回のURLトンネリングにはBasic認証を利用します。Basic認証を利用するためには、ngrok.comでユーザー登録を行う必要があります。
以下のURLからサインアップして下さい。
https://dashboard.ngrok.com/user/signup

サインアップ完了後、以下のURLからngrokへのアクセストークン(Tunnel Authtoken)を確認できます。
https://dashboard.ngrok.com/auth

次に、メッセージの投稿先になるSlackのIncomming WebhookのURLを取得します。
以下のURLから、投稿したいSlackグループのチャンネルを設定し、URLを取得して下さい。
https://my.slack.com/services/new/incoming-webhook/

これらのシークレットな情報をアプリケーションに渡すにはいくつかの方法がありますが、今回のアプリケーションはローカルクライアントからのみ使うことを想定して、プロジェクトフォルダにファイルとして設置するのに留めます。
また、同時にBasic認証の認証情報も同一のファイルに格納しておきます。以下は認証情報ファイルのサンプルになります。

$ vi .auth.json

{
  "basic": {
    "user": "user",
    "password": "password"
  },
  "ngrok": {
    "authtoken": "aaaaaabbbbbbccccccddddddeeeeeeffffff"
  },
  "Slack": {
    "webhook": "https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX"
  }
}

重要: この認証ファイルはGitのリポジトリにコミットしないことを強く奨めます。その場合、gitignoreファイルに以下の追記を行います。

$ echo '.auth.json'  >> .gitignore

サンプルのリポジトリでは、代わりに.auth.sample.jsonをコミットしておきました。また、このサンプルはテスト用のフィクスチャとして使用します。

cp .auth.json .auth.sample.json

ここまでのファイルは以下のリンクから確認できます。
https://github.com/KamataRyo/ngrok-slack-sample/tree/02_add-authfile

以上で開発環境が整いました。
次回はテストファーストでプログラムを実装していきます。

コメントを残す

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