LINE Botを永続化するにはGASを用いることで可能となりますが、コードを書き変えなければなりません。その手間を省くにはVSCodeで動いているものを自動化するのが合理的です。今回はVercelによる永続化に挑戦しました。
作成の流れ
①VScodeで動くオウム返しBOTを作成する
1. Botアカウントを作成する
2. Node.jsでBot開発
3. ngrokでトンネリング
②Vercelをの連携
1. Vercelコマンドのインストール
2. プロジェクトのファイル微修正
3. デプロイをする
実際の作業
①VScodeで動くオウム返しBOTを作成する
●1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest
https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#2-nodejs%E3%81%A7bot%E9%96%8B%E7%99%BA
画像分析AIを使ったLINE Botを1時間で作ってみよう(顔検証編)~プロトアウト体験会~
https://zenn.dev/tmitsuoka0423/books/939110f3e1f533d35095
を参考にしてください。
その他、
●VSCodeで動く天気Botを作り、GASで動く天気Botへ書き換えてみた。
https://qiita.com/21HideK/items/9764e2aee9447932cf19
に詳しく解説しましたので、「3. ngrokでトンネリング」の項まで参考にしてください。(2.(1)(c)はserver.jsではなく、index.jsを作成してください。)
②Vercelをの連携
1. Vercelコマンドのインストール
ターミナルに以下のコマンドを入力し実行。
npm i -g vercel
2. プロジェクトのファイル微修正
Vercelにデプロイするにあたり3箇所を修正する。
(1) index.jsをapiフォルダへ
プロジェクトのルート(package.jsonがある階層)にapiという名前で
フォルダを作成する。
apiフォルダ内に、もともLINE BOTで作成したindex.jsを移動させる。
Vercel上ではapiフォルダ内に置いたプログラム(.js or .ts)をNode.jsで実行する模様。
(2) vercel.jsonを作成
プロジェクトのルート(package.jsonがある階層)にvercel.jsonという名前で
ファイルを作成し、開いて以下のコードをコピー&ペーストする。
{
"version": 2,
"routes": [
{ "src": "/", "dest": "api/index.js" },
{ "src": "/webhook", "dest": "api/index.js" }
]
}
(3) index.jsを更新
index.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}`);
3.デプロイをする
(1) ターミナルに以下のコマンドを入力し実行。
プロジェクトのルート(package.jsonがある階層:この場合はmylinebotのある場所)
に行き(必要ならば cd mylinebot と入力し実行)、以下の以下のコードを入力
して実行する。
vercel
ターミナルに「vercel」と入力し実行した時、下記のエラーが出た場合は、
PowerShellスクリプトを実行できるようにポリシーを変更する必要がある。
→以下の【A】へ
以下はほぼ流れで
Set up and deploy :「y」と入力し実行
Which scope do you want to deploy to ? :そのまま実行
Link to existing project? :「n」と入力し実行
What's your project's name?(mylinebot) :適当な名前{ファイル名}を入力し実行
In which directory is your code located? :そのまま実行
What to override the settings? :「n」と入力し実行
(2) Webhook URLの更新
ターミナルにあるProductionの、
https://{ファイル名}.vercel.app
をコピーする。
「LINE developers」の画面の、Messaging APIタグの
Webhook settingsのWebhook URLに、コピーしたURLを張り付け、
後ろに”/webhook”を付ける。
https://{ファイル名}.vercel.app/webhook
というURLにする。
これでLINE Botを永続化できていると思われる。
更新する際
デプロイし直す場合は、ターミナルに「vercel」コマンドを入力し実行する
だけでデプロイ可能。
vercel
ローカルでngrokで試す際は、apiフォルダにindex.jsを移動させてあるので
node api/index.js
という実行の仕方に変える。
【A】PowerShellスクリプトを実行できるようにポリシーを変更する
※デフォルト状態では実行できない
初めてPowerShellスクリプトを作成して、実行しようとすると上のようなエラーが発生し、実行することができない。PowerShellもプログラムの一種であり、悪意あるPowerShellスクリプトを実行した場合、システムを破壊されかねないことから、知識のある人のみ、安全なスクリプトのみ実行できるように、実行ポリシーという設定でPowerShellスクリプトの実行を制限している。よってこの実行ポリシーのデフォルト状態では一切のPowerShellスクリプトを実行できないようになっている。
※実行ポリシーの種類
実行ポリシーはデフォルトではRestrictedになっている。
そこで、以下の流れで実行ポリシーを設定する。
セキュリティを考え、デプロイが終了したら実行ポリシーは元に戻す。
(a) PowerShell で管理者権限で起動する
(b) 実行ポリシーの変更(Set-ExecutionPolicyコマンドで)
(c) vercelをデプロイする(② 3. (1))
(d) 実行ポリシーを戻す(Set-ExecutionPolicyコマンドで)
(a) PowerShell で管理者権限で起動する[PowerShellからコマンドで実行]
以下のコマンドをターミナルに入力し実行
管理者権限で起動された PowerShell は別画面で立ち上がる。
Start-Process PowerShell.exe -Verb runas
(b) 実行ポリシーの変更(Set-ExecutionPolicyコマンドで)
〈1〉起動したPowerShellに以下のコマンドを入力して実行
Set-ExecutionPolicy RemoteSigned
(c) vercelをデプロイする
実行ポリシーが変更されたので、
② 3. (1)に戻り、VSCodeのターミナルに「vercel」と入力し実行、
デプロイを行う。
(d) 実行ポリシーを戻す(Set-ExecutionPolicyコマンドで)
vercelのデプロイが終了したら、
管理者権限で起動したPowerShellに以下のコードを入力し実行する
(セキュリティーを戻しておく)
Set-ExecutionPolicy Restricted
工夫した箇所
①PowerShellスクリプトを実行できるようにポリシーを変更する
vercelをデプロイしようとしたときに出たエラーの意味が分からず調べた。
やり方が記載されたホームページはいくつかあったが、プログラムをある程度
分かっている方への簡略化された記載であった。
そこで、メモがてら、画像をつけて初心者でもわかるように詳細を記事にした。
〔参考にしたホームページ〕
画像分析AIを使ったLINE Botを1時間で作ってみよう(顔検証編)~プロトアウト体験会~
https://zenn.dev/tmitsuoka0423/books/939110f3e1f533d35095
1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest
https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#2-nodejs%E3%81%A7bot%E9%96%8B%E7%99%BA
Vercelを使ってLINE Botを永続化する
https://qiita.com/tomosukesan/items/357c05ec58574b639089
VercelでLINE BOTを動かす 2020年5月版
https://qiita.com/n0bisuke/items/a5f49193fa68f28a7f25
【Windows】PowerShellを管理者権限で起動するコマンド
https://bizlog.tech/powershell-admin-mode/
PowerShellスクリプトを実行できるようにポリシーを変更する
http://bgt-48.blogspot.com/2019/03/powershell.html