#記事作成にあたって
LINEbotの開発はhttps前提なので、ローカルでの開発は難しい。けど、ローカルで開発できないと毎回サーバに上げてテストするのもかなりしんどいなぁって思ってました。
うーん、どうにかローカルでも開発できないものかねぇ。。と悩んでた所、ngrokのサービスを使えばローカル開発環境でもいけるとの事。やってみた結果、上手くいったので、記事にして共有します。
#アジェンダ
1.ローカル開発環境の仕組み
2.ローカル開発環境の構築
3.LINEbotの設定
#1.ローカル開発環境の仕組み
仕組みは図の通りです!!!えっ、説明が雑すぎるって。。。わかりました。少しだけ、説明します。
##ローカル開発環境のシステムフロー
①スマホアプリのLineからLineサーバに遷移します。
②Lineサーバからngrokのサーバに遷移します。
③ngrokサーバから開発端末に遷移します。
※ngrokとは開発環境用のトンネリングツール。サーバからサーバへの接続線を作るためのものであり、Lineサーバと開発端末の接続線をhttpsで構築してくれます。これにより、Lineサーバと開発端末の接続線が作成されました。
④Lineサーバからのリクエストを開発端末上のどのサービスが受け入れるのかを指定します。
今回はServerless Frameworkで構築したAPIGatewayに紐づけております。
まぁ、イメージはこんな感じです。
#2.ローカル開発環境の構築
では、ローカル開発環境を構築していきましょう。プログラムは前回作成したオウム返しのbotを利用します。まだ実施していない人はリンクから実施してね。
###2-1. 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のオフライン実行
~/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の実行
~/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 を開いて下記画面が出力されていれば上手く行ってます！！！
###2-4. Lineの設定
WebhookURLの設定を変更すれば、ローカル開発環境の構築完了です。
