LINEbotのローカル開発環境を構築する。

#記事作成にあたって
LINEbotの開発はhttps前提なので、ローカルでの開発は難しい。けど、ローカルで開発できないと毎回サーバに上げてテストするのもかなりしんどいなぁって思ってました。:cold_sweat:
うーん、どうにかローカルでも開発できないものかねぇ。。と悩んでた所、ngrokのサービスを使えばローカル開発環境でもいけるとの事。やってみた結果、上手くいったので、記事にして共有します。

#アジェンダ
1.ローカル開発環境の仕組み
2.ローカル開発環境の構築
3.LINEbotの設定

#1.ローカル開発環境の仕組み
仕組みは図の通りです!!!えっ、説明が雑すぎるって。。。わかりました。少しだけ、説明します。
![C8BFCB9E-94C8-4A3D-A7C6-AA84BC512762_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/99f184bd-171a-144f-77e8-00f3ce74d834.jpeg)

##ローカル開発環境のシステムフロー
①スマホアプリのLineからLineサーバに遷移します。
②Lineサーバからngrokのサーバに遷移します。
③ngrokサーバから開発端末に遷移します。
 ※ngrokとは開発環境用のトンネリングツール。サーバからサーバへの接続線を作るためのものであり、Lineサーバと開発端末の接続線をhttpsで構築してくれます。これにより、Lineサーバと開発端末の接続線が作成されました。
④Lineサーバからのリクエストを開発端末上のどのサービスが受け入れるのかを指定します。
今回はServerless Frameworkで構築したAPIGatewayに紐づけております。
まぁ、イメージはこんな感じです。

#2.ローカル開発環境の構築
 では、ローカル開発環境を構築していきましょう。プログラムは前回作成したオウム返しのbotを利用します。まだ実施していない人は[リンク](https://qiita.com/kouji0705/items/ccd799a263ac515dfece)から実施してね。

###2-1. ngrokのインストール
```shell:ngrokのインストール
~/develop/study/linebot/jankenbot $ brew install ngrok
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 5 taps (heroku/brew, homebrew/core, homebrew/cask, homebrew/services and mongodb/brew).
==> New Formulae
alda                                             kalker                                           psalm
amfora                                           kubeconform                                      py-spy
argocd-vault-plugin                              lexbor                                           pyright
ciphey                                           libfuse@2                                        pythran
clarinet                                         linux-headers@4.15                               rhit
conmon                                           mariadb@10.5                                     rover
crun                                             mbedtls@2                                        s4cmd
darglint                                         mongodb/brew/mongodb-community@4.4               samba
demumble                                         mongodb/brew/mongodb-mongocryptd@4.4             scorecard
envoy@1.17                                       multi-git-status                                 scry
fluid-synth@2.1                                  nbsdgames                                        slirp4netns
frum                                             ncc                                              spectra
func-e                                           ns-3                                             sqsmover
fuse-overlayfs                                   openfpgaloader                                   svgbob
graphqurl                                        openliberty-jakartaee8                           tracker
hcl2json                                         openliberty-microprofile4                        vala-language-server
iredis                                           openliberty-webprofile8                          zet
jrsonnet                                         poppler-qt5
==> Updated Formulae
Updated 3569 formulae.
==> Renamed Formulae
linux-headers -> linux-headers@4.4               parallelstl -> onedpl                            weboob -> woob
==> Deleted Formulae
libinfinity
==> New Casks
affinity-designer            itraffic                     odbc-manager                 safe-exam-browser            touchosc
affinity-publisher           maestral                     physics-101                  samsung-dex                  ubports-installer
cinc-workstation             maxon                        pktriot                      sleek                        vial
diagnostics                  midiview                     portx                        sonic-robo-blast-2           wezterm
dropzone                     millie                       pulse                        sonic-robo-blast-2-kart      youtube-dl-gui
final-fantasy-xiv-online     moebius                      redis-pro                    tabby
==> Updated Casks
Updated 815 casks.
==> Deleted Casks
nure                                 pdftotext                            terminus                             xamarin

==> Downloading https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-darwin-amd64.zip
######################################################################## 100.0%
Warning: No checksum defined for cask 'ngrok', skipping verification.
==> Installing Cask ngrok
==> Linking Binary 'ngrok' to '/usr/local/bin/ngrok'
🍺  ngrok was successfully installed!
```

###2-2. ServerlessFrameworkのオフライン実行
```javascript:ServerlessFrameworkのオフライン実行
~/develop/study/linebot/linebot $ serverless offline start
offline: Starting Offline: dev/ap-northeast-1.
offline: Offline [http for lambda] listening on http://localhost:3002
offline: Function names exposed for local invocation by aws-sdk:
           * hello: linebot-dev-hello
           * lineWebhook: linebot-dev-lineWebhook

   ┌───────────────────────────────────────────────────────────────────────────────┐
   │                                                                               │
   │   GET  | http://localhost:3000/dev/hello                                      │
   │   POST | http://localhost:3000/2015-03-31/functions/hello/invocations         │
   │   POST | http://localhost:3000/dev/line/webhook                               │
   │   POST | http://localhost:3000/2015-03-31/functions/lineWebhook/invocations   │
   │                                                                               │
   └───────────────────────────────────────────────────────────────────────────────┘

offline: [HTTP] server ready: http://localhost:3000 🚀
offline: 
offline: Enter "rp" to replay the last request
```

###2-3. ngrokの実行
```javascript:ngrokの実行
~/develop/study/linebot/linebot ngrok http 3000
ngrok by @inconshreveable                                                                                                                  (Ctrl+C to quit)
                                                                                                                                                           
Session Status                online                                                                                                                       
Session Expires               1 hour, 59 minutes                                                                                                           
Version                       2.3.40                                                                                                                       
Region                        United States (us)                                                                                                           
Web Interface                 http://127.0.0.1:4040                                                                                                        
Forwarding                    http://19d2a44ff0a2.ngrok.io -> http://localhost:3000                                                                        
Forwarding                    https://19d2a44ff0a2.ngrok.io -> http://localhost:3000                                                                       
                                                                                                                                                           
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                  
                              0       0       0.00    0.00    0.00    0.00   
```
ForwardingのURLが出力されてOKです。今回の例ではhttp://19d2a44ff0a2.ngrok.io ですね。
ブラウザで開いてみましょう。https://19d2a44ff0a2.ngrok.io/dev/hello を開いて下記画面が出力されていれば上手く行ってます！！！
![スクリーンショット 2021-07-23 15.12.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/a1cd3a57-141f-2bd1-e782-2d7de1ed949e.png)

###2-4. Lineの設定
WebhookURLの設定を変更すれば、ローカル開発環境の構築完了です。
![スクリーンショット 2021-07-23 15.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ffbc2e71-923f-c037-4b3a-6d25f63fff0f.png)