【Rails】最速でLINEボットアプリの開発環境構築~公開まで

※途中で書くのに心が折れ未完です。

# 0. やること

以下の3ステップで行います。

1. LINE Developersでチャネルの作成
2. LINEボットローカル開発環境の構築
3. herokuで本番環境の構築

# 1. LINE Developersでチャネルの作成

- 以下ページの通りに進めます。

[Messaging APIを利用するには
](https://developers.line.biz/ja/docs/messaging-api/getting-started/)

1. コンソールにログインする
2. 開発者として登録する（初回ログイン時のみ）
3. 新規プロバイダーを作成する
4. チャネルを作成する

以下のページまで来れたら成功。

<img width="1092" alt="スクリーンショット 2020-05-31 15.18.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/01ae14d4-6a0d-6767-7201-1922c42c9d3a.png">

以下のページのQRコードを読み込んでLINEボットを友達追加できます。

<img width="1231" alt="スクリーンショット 2020-05-31 15.29.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/c906b9f8-5a44-55ff-48ec-54f5923dd18c.png">

LINEボット自体はこれにて完成！
[LINE Official Account Manager](https://manager.line.biz/)を使うと、開発を行わなくても色々なボット設定を行うことができます。

# 2. LINEボットローカル開発環境の構築

## 2-1. LINEボット開発のテンプレートの取得

以下のGitHubリポジトリからプロジェクトを取得してください。

https://github.com/yokoto/line-bot-app
<img width="422" alt="スクリーンショット 2020-05-31 15.45.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/064f9ccd-2790-bf3f-21ed-5e978936fbcc.png">

http://localhost:3000 で以下が立ち上がっているはずです。

<img width="1001" alt="はじめてのLINE botアプリ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/a84dbae2-bbff-a61d-f115-c18986260e61.png">

## 2-2. 環境変数の設定

LINE Developersからチャネルシークレットとチャネルアクセストークンを取得します。

アプリケーションルート配下に `.env` ファイルを作成し、環境変数を設定します。

<img width="1104" alt="スクリーンショット 2020-05-31 20.08.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/860547e1-e84b-3767-e897-aa7692a36a74.png">

<img width="1237" alt="スクリーンショット 2020-05-31 20.08.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/f74181eb-c901-628f-bcd2-8d10b08d9ffe.png">



## 2-2. ngrokのインストール

以下のリンクからngrokをインストールします。

https://ngrok.com/

> ngrokとは、ローカルPC上で稼働しているネットワーク（TCP）サービスを外部公開できるサービスです。例えば、ローカルPCのWebサーバを外部公開することができます。

参考: [ngrokが便利すぎる](https://qiita.com/mininobu/items/b45dbc70faedf30f484e)

コマンドライン上で以下のコマンドを実行します。

```bash
$ ngrok http -host-header="0.0.0.0:3000" 3000
```

すると、以下のような画面がターミナル上に立ち上がります。

```bash
ngrok by @inconshreveable                                                                   (Ctrl+C to quit)
                                                                                                            
Session Status                online                                                                        
Session Expires               7 hours, 59 minutes                                                           
Version                       2.3.35                                                                        
Region                        United States (us)                                                            
Web Interface                 http://127.0.0.1:4040                                                         
Forwarding                    http://1269ae46c33c.ngrok.io -> http://localhost:3000                         
Forwarding                    https://1269ae46c33c.ngrok.io -> http://localhost:3000                        
                                                                                                            
Connections                   ttl     opn     rt1     rt5     p50     p90                                   
                              0       0       0.00    0.00    0.00    0.00                                  
                                                                                                                                                                                                                        
```

ポートフォワーディングしたURLを開けるようになります。

<img width="722" alt="スクリーンショット 2020-05-31 16.22.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/23e3ad56-5669-1c7d-a4f6-0207176ebab7.png">


ポートフォワーディング用のURL( `https://1269ae46c33c.ngrok.io` ※ httpsの方 )を控えます。

## 3. Webhook URLの登録

1. LINE Developersでチャネルの作成 で作成した [LINE Developers](https://developers.line.biz/console/)のチャネルにて、Webhook URLを設定します。

WebhookURLには、


`ngrokでポートフォワーディングしているhttpsのURL + Railsアプリケーションのcallbackのパス
`

を設定します。

<img width="1046" alt="スクリーンショット 2020-05-31 16.12.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54467/aa71502b-e4e1-0bab-ccc5-ab8e5fa07028.png">