Slack / ローカルの開発環境を整える
前回まではこちら。
Slack / Google Cloud Platformと連携してスラッシュコマンドを作成する
Slack / Functions FrameworkでサクッとCloud Functionsをカスタマイズ
functions-framework のおかげでサクッとローカル開発環境が立ち上げられました。
ただ、サーバーが立ち上がるといっても localhost で立ち上がるので、これをこのままSlackから実行することはできません。
毎回 Google Cloud Functions にデプロイするのは面倒ですし時間もかかります。
今回は開発中のローカルマシンにSlackから直接アクセスさせる方法を解説します。
関連するSlack公式ドキュメントはこちら。
https://api.slack.com/tutorials/tunneling-with-ngrok
ngrok
インターネットからローカルで立ち上げたサーバーにアクセスさせるのに ngrok というツールを使います。
64-bitバージョンをダウンロード して、解凍したファイルを実行できる場所に置きます。 /usr/local/bin で良いと思います。
bash
1
2
3
4
5
$ mv ~/Downloads/ngrok /usr/local/bin/
# 実行できるか確認
$ ngrok -v
=> ngrok version 2.3.34
起動してみる
bash
1
$ ngrok http 8000
1
https://41a30a73.ngrok.io -> http://localhost:8000
で想像付きますが、これでインターネットからあなたのローカルマシンにトンネルができました。 https://41a30a73.ngrok.io にアクセスしてみると、こんな画面がでてきます。
トンネル経由での接続には成功していますが、
ローカルマシンのサーバーへの接続に失敗したと伝えてくれています。
Slackコマンドのエンドポイントを開発環境で用意する
まずはCould Functionのサーバーを立ち上げ。
helloWorld がはこんな感じで定義されているという前提です。
1
2
3
exports.helloWorld = (req, res) => {
res.send('Good morning, World');
};
bash
1
2
3
4
5
$ npx functions-framework --target=helloWorld
Serving function...
Function: helloWorld
URL: http://localhost:8080/
localhost:8080 でサーバーが立ち上がりました。
$ curl localhost:8080 と叩くとターミナル上に Good morning, World と返ってきます。
これをインターネット経由で叩けるようするため、先程の ngrok を使用します。
bash
1
2
# 先程はポートが 8000 でしたが今回は 8080 を指定
$ ngrok http 8080
こんな感じで立ち上がりました。
先程 localhost:8080 を叩けばSlackにメッセージが投稿されましたが、
https://a1698242.ngrok.io -> http://localhost:8080 となっている通り、https://a1698242.ngrok.io にアクセスしても Good morning, World がターミナルに表示されます。
bash
1
2
3
4
# これは $ curl localhost:8080 と同等
$ curl https://a1698242.ngrok.io
=> Good morning, World
Slackにエンドポイントを設定する
インターネットからローカルマシンを叩けるようになりましたので、今度はSlackの設定画面からSlashコマンドのエンドポイントとして指定します。
保存するとスラッシュコマンドの実行時に、ローカルマシンのサーバーが反応するようになります。
ngrokの問題点
ngrokは便利なのですが、再起動する度にアドレスが変わってしまいます。固定するには有料になってしまうので、なかなかテストでは使いづらい。
そんな時にはこちらが便利でした。
https://github.com/localtunnel/localtunnel
bash
1
2
3
4
5
$ npm install -g localtunnel
=> + [email protected]
$ lt --port 1234 --subdomain testapp
=> your url is: https://testapp.localtunnel.me
これで https://testapp.localtunnel.me にアクセスできるようになりました。
ドメインも変わらないので簡単!
参考：
https://stackoverflow.com/questions/38050182/how-to-generate-fixed-url-with-ngrok
今日はここまで。