slackinとHerokuでSlackの自動招待システムを用意したときにつまづいたことのメモ


<img width="386" alt="スクリーンショット 2019-04-30 13.01.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/6998ae9a-a485-6f47-f9b4-71e93a4c39f0.png">

[Unity Fukuoka](https://www.facebook.com/UnityFukuoka/)というコミュニティをやってまして、前に専用Slackを作っていました。
その専用Slackに自動招待ができるようにslackinとHerokuを使って無料作れる事を知り用意していたところ、1年以上ぶりに開くと`Application error`となっていたことを先日知りました（コミュニティー自体全然動いていないので案の定何の連絡もありませんでした苦笑）。

久々に触りたいこともあって作り直した際に何点かつまづいたことのメモとして、正直使いにくいHerokuの使い方や所感も交えながら書いているのでお急ぎの方は欲しい情報だけ読んでくださいmm



## heroku-cli

[Herokuのsignup](https://signup.heroku.com/login)が終わったのちに、slackingを使うのでデプロイはやりませんが、[heroku-cli](https://devcenter.heroku.com/articles/heroku-cli)をインストールしておきましょう。

heroku-cliは、Node.jsで作られているCLIツールなので（問題が起きないことを確認した上で）`npm update`をやってからインストールすると良いでしょう。

Herokuは、Node.jsで操作させるアーキテクチャになっているみたいでちょっと面白いですよねぇ＾＾

## slackin

[rauchg/slackin](https://github.com/rauchg/slackin)の[READMEに載っているHeroku](https://heroku.com/deploy?template=https://github.com/rauchg/slackin/tree/master)をクリックするとslackinとHerokuが連携している状態でHerokuアプリケーションが作成できます。

<img width=60% alt="スクリーンショット 2019-04-30 13.30.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/fdee9104-06a6-a4a3-de86-4eb18df26820.png">
<img width=60% alt="スクリーンショット 2019-04-30 13.38.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/250bcee2-4aa7-2f67-a86b-1797164ebfab.png">

遷移先のslackin × Herokuのアプリケーション作成に必要な情報は以下の内容です。

- GOOGLE_CAPTCHA_SECRET
    - [Google reCAPTCHA](https://www.google.com/recaptcha/intro/)で作成した**シークレットキー**
- GOOGLE_CAPTCHA_SITEKEY
    - [Google reCAPTCHA](https://www.google.com/recaptcha/intro/)で作成した**サイトキー**
- GOOGLE_CAPTCHA_SITEKEY
    - 自動招待したいSlackの**レガシートークン**
- SLACK_SUBDOMAIN
    - 自動招待したいSlackの**サブドメイン**

## Google reCAPTCHA

[Google reCAPTCHA](https://www.google.com/recaptcha/intro/)は、ボットからサイトを守るセキュリティシステムです。

<img width=60% alt="スクリーンショット 2019-04-30 13.40.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/b9cf71b2-3528-4fb4-e4b2-ee29dd8811d5.png">
<img width=60% alt="スクリーンショット 2019-04-30 13.41.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/fe13b5d3-c0d4-f924-c5dd-026471dbad37.png">

間違いやすいですがHerokuのページでは、上から**シークレットキー**→**サイトキー**ですが、recaptchaのページだと、上から**サイトキー**→**シークレットキー**と順番が逆なので何も考えずそのままコピペして間違わないように注意しましょう。


## Slack Legacy Tokens 
[Legacy tokens](https://api.slack.com/custom-integrations/legacy-tokens)で自動招待したいSlackのトークンを発行しましょう。

<img width=60% alt="スクリーンショット 2019-04-30 14.21.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/d7576a25-241c-a3f8-31cf-0fd46b1e5495.png">


## Deploy app

全て入力後にDeploy appを押すとちょっと待ち時間がありますが、数分後すぐにアプリケーションがデプロイされて`https://【App name】.herokuapp.com/`にアクセスできるようになります。

私の場合は、ある問題でアクセスしても`Application error`ページでそこから1時間以上つまづいた状況でした。


## Application error

まず、`Application error`ページが出たときは、ログの確認です。
ですが、Herokuの管理画面上ではログを確認することができません。

マジでHerokuの使い方って分かりにくいんですが苦笑、heroku-cliからログを確認することができます。
確認するには、まず、デプロイはしませんがHerokuアプリケーションをlocalにcloneする必要があります。

<img width=60% alt="スクリーンショット 2019-04-30 14.29.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/2095f6d9-58e9-8a0b-e165-2e6bab29abb7.png">

以下のコマンドのそれ以降のコマンドは行わなくて大丈夫です。

```
$ heroku git:clone -a 【App name】
$ cd 【App name】
```

この次に

```
$ heroku logs --tail
```

と実行すると作ったHerokuアプリケーションが動いているログがリアルタイムで流れ込んできます。
再度`https://【App name】.herokuapp.com/`にアクセスしてみるとエラーの詳細が表示されてますのでそこから原因を探ることになります。

さて、私の場合は以下の各エラーが表示されて原因が突きとめました。


### status=503 

```
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=unityfukuoka.herokuapp.com request_id=【REQUEST_ID】 fwd=【IP】 dyno= connect= service= status=503 bytes= protocol=https
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=unityfukuoka.herokuapp.com request_id=【REQUEST_ID】 fwd=【IP】 dyno= connect= service= status=503 bytes= protocol=https
```

これはエラーが原因で出てしまうエラーのようです。
簡単に説明すると「デプロイ」→「反映」→「アクセス可能」というフローでデプロイ時に何らかの問題が起き、反映が完了できておらず、アクセス不可状況でアクセスしてしまうとこのエラーが出てしまうようです。


### TypeError: Cannot read property 'body' of undefined

```
app[web.1]: TypeError: Cannot read property 'body' of undefined
app[web.1]: at /app/dist/slack.js:62:23
app[web.1]: at Request.callback (/app/node_modules/superagent/lib/node/index.js:699:3)
app[web.1]: at ClientRequest.<anonymous> (/app/node_modules/superagent/lib/node/index.js:636:10)
app[web.1]: at ClientRequest.g (events.js:292:16)
app[web.1]: at emitOne (events.js:96:13)
app[web.1]: at ClientRequest.emit (events.js:188:7)
app[web.1]: at TLSSocket.socketErrorListener (_http_client.js:309:9)
app[web.1]: at emitOne (events.js:96:13)
app[web.1]: at TLSSocket.emit (events.js:188:7)
app[web.1]: at emitErrorNT (net.js:1277:8)
heroku[web.1]: Process exited with status 1
```
これはデプロイ時に起きたエラーでした。
正直このエラーでは全く分かりませんでした笑汗

色々調べたところslackinのissuesに[Issues with set up in heroku #160](https://github.com/rauchg/slackin/issues/160#issuecomment-205043436)があるのを見つけて、サブドメインに関する話しをされていたので`SLACK_SUBDOMAIN`に設定した内容を確認しました。


### オプションの設定後の確認/編集について

これまたHerokuの分かりづらいUI/UXで初見じゃどこに設定したオプションが確認と編集ができるのか気づきにくいんですよねぇ( *｀ω´)
Settingページの`Config Vars`の`Reveal Config Vars`ボタンをクリックすると設定した各オプションが表示され、確認と編集が可能になります。

<img width=60% alt="スクリーンショット 2019-04-30 14.45.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/f9d5d26d-5bc0-e94e-7985-df6ffd9e5a64.png">
　↓　クリック後
<img width=60% alt="スクリーンショット 2019-04-30 14.46.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/1d11e850-9f8b-64c2-bfd7-78234b6b99a3.png">

このとき、私が`SLACK_SUBDOMAIN`に設定した内容は、`unityfukuoka.slack.com`でした。
サブドメインだからそのまま指定しましたが、試しに`https://unityfukuoka.slack.com`などと設定してみたところ、`Error: getaddrinfo ENOTFOUND https https:443`という結果でした。

ちなみにどれか`Config Vars`のオプションを変更するとHerokuが勝手に毎度デプロイ作業を自動で行います。
`$ heroku logs --tail`しておくとその様子が見れるのですぐに確認ができます。


### Error: getaddrinfo ENOTFOUND https https:443

```
app[web.1]: Error: getaddrinfo ENOTFOUND https https:443
app[web.1]: at errnoException (dns.js:28:10)
app[web.1]: at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:76:26)
```

なおさら分からなくなりましたね笑汗
再度、`SLACK_SUBDOMAIN`を`unityfukuoka.slack.com`に戻したところ次のエラーが表示されました。


### Error: Hostname/IP doesn't match certificate's altnames

```
app[web.1]: Error: Hostname/IP doesn't match certificate's altnames: "Host: unityfukuoka.slack.com.slack.com. is not in the cert's altnames: DNS:slack.com, DNS:*.slack.com"
app[web.1]: at Object.checkServerIdentity (tls.js:199:17)
app[web.1]: at TLSSocket.<anonymous> (_tls_wrap.js:1098:29)
app[web.1]: at emitNone (events.js:86:13)
app[web.1]: at TLSSocket.emit (events.js:185:7)
app[web.1]: at TLSSocket._finishInit (_tls_wrap.js:610:8)
app[web.1]: at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:440:38)
heroku[web.1]: Process exited with status 1
```

ここでやっとエラーの原因が分かりました。
`DNS:*.slack.com`とあり、`Host: unityfukuoka.slack.com.slack.com`と表示されているため、`SLACK_SUBDOMAIN`への設定は、`unityfukuoka`（Slackのアプリ名）だけで良かったようです＾＾;


## まとめ
その後は、全てデプロイが上手く処理され反映が完了し、この記事のトップに載せている画像のページが表示されるようになりました。

参考にした記事は以下になりますので、付き合わせて何かのお役に立てたらなと思いますmm


- [hamakn/slackin_2018.md](https://gist.github.com/hamakn/93ba71bd7cb21756753d1d0549f913d2)
- [[Ruby on Rails Tutorial]Herokuにデプロイ後Application error[H10 (App crashed)]が発生した時の対処法](https://qiita.com/masarusan24/items/77d064147a32169b5449)