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

https://ngrok.com/

インターネットからローカルで立ち上げたサーバーにアクセスさせるのに ngrok というツールを使います。
Screen_Shot_2019-09-07_at_17.08.49

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

Screen_Shot_2019-09-07_at_17.17.34

1
https://41a30a73.ngrok.io -> http://localhost:8000  

で想像付きますが、これでインターネットからあなたのローカルマシンにトンネルができました。 https://41a30a73.ngrok.io にアクセスしてみると、こんな画面がでてきます。

Screen_Shot_2019-09-07_at_17.19.34

トンネル経由での接続には成功していますが、
ローカルマシンのサーバーへの接続に失敗したと伝えてくれています。

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

Screen_Shot_2019-09-07_at_17.26.11

こんな感じで立ち上がりました。
先程 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コマンドのエンドポイントとして指定します。

Screen_Shot_2019-09-07_at_17.37.12

保存するとスラッシュコマンドの実行時に、ローカルマシンのサーバーが反応するようになります。

Screen_Shot_2019-09-07_at_17.38.38

Screen_Shot_2019-09-07_at_17.38.52

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

  
  
今日はここまで。
  

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた