自作ピクミンブルームLINE Botを永続化する際のメモ #linebot

この記事は、プロトアウトスタジオのアドベントカレンダー2021の12日目です！

LINE Botを実際に生活で使いたいよぉ

以前の記事（ https://qiita.com/tkyko13/items/335277b376c99dcc50be ）ではIFTTTとfitbitを利用して、その日歩いた結果で色々な花瓶が届くものを作ってみました。引っこ抜きボタンでその花瓶にあったピクミンが生まれるというものです。

そこで利用していたのが、localtunnelというもので、ngrokのような一時的に自分のPCをサーバにするものでした。

実際の生活で使うにはずっとPCでlocaltunnelを実行しておくのも大変なので、別のサーバを用意しないといけません。

何も自分のPCを用意する必要もなく、最近では無料で使えるクラウドサービスを使ってずっと使えるようにできるので、そちらのメモを残していこうと思います。

LINE Botで使えそうなサービス

LINE Bot永続化参考サイト

今回は自分もVercelを使ってみたいと思います

やったこと

dotenv導入
GitHubへコミット
Vercelでプロジェクト作成
プロジェクト、ソースコードの編集
IFTTT、LINE developでURL編集

dotenv導入

シークレットキーなどみんなに見られてはいけない文字列を別ファイルで管理できる

参考：https://qiita.com/ozaki25/items/3e2cf94f29bd0edc1979

いったん導入後、今まで動作させていたlocaltunnelを使ったやり方で動作確認しておきましょう

GitHubへコミット

https://github.com/ でリポジトリを作ってコミット

忘れずに「.gitignore」に'.env'を書き加えましょう

.gitignoreについて

Vercelへデプロイする際も連携してできるので、予めGitHubリポジトリから作っておくと楽です

Vercelでプロジェクト作成

https://vercel.com/ からユーザ登録 or ログイン、プロジェクト作成します

GitHub（もしくは、GitLab、Bitbucket）のリポジトリ一覧から選ぶとすぐにできます

プロジェクトの編集

apiフォルダ内に前回作ったプログラムを入れる
vercel.jsonを作る
- 内容は以下のような感じにIFTTTからやLINEから実行されるパスを記述する（ここらへんは上述した参考サイトを参考に）
server.jsの編集
- 最後の2行をVercel用に編集
- 編集後でも普通に今まで通り動かせます

{
  "version": 2,
  "routes": [
    { "src": "/", "dest": "api/server.js" },
    { "src": "/webhook", "dest": "api/server.js" },
    { "src": "/ifttt", "dest": "api/server.js" }
  ]
}

server.js

// 略
// app.listen(PORT);
// console.log(`Server running at ${PORT}`);
(process.env.NOW_REGION) ? module.exports = app : app.listen(PORT);
console.log(`Server running at ${PORT}`);

編集後、改めてGitHubにプッシュしましょう

自動的にVercelにもデプロイされるはずです

「Deployments」タグを見るとちゃんとできてるか確認できます

IFTTT、LINE developでURL編集

Vercelのダッシュボードトップを見るとDOMAINSがあり、すでにURLがもらえている状態です

まずはそのURLにアクセスし、ページが見れたらOK

その後IFTTTには、「VercelのURL + /ifttt」、LINE developには「VercelのURL + /webhook」に変更

もちろんこのURLは変更されないのでこれで永続化できました

使ってみて

実はなぜかまだうまく通知が来てないです…

IFTTTのActivetyではうまくいっているように見えるのですが…

もうちょっと見ている途中です〜