Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

posted at

updated at

Vercelを使い、VSCodeで動かすLINE Botを永続化してみた。

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を移動させる。
スクリーンショット (384).png
Vercel上ではapiフォルダ内に置いたプログラム(.js or .ts)をNode.jsで実行する模様。

 (2) vercel.jsonを作成

  プロジェクトのルート(package.jsonがある階層)にvercel.jsonという名前で
  ファイルを作成し、開いて以下のコードをコピー&ペーストする。

vercel.json
{
    "version": 2,
    "routes": [
        { "src": "/", "dest": "api/index.js" },
        { "src": "/webhook", "dest": "api/index.js" }
    ]
}

 (3) index.jsを更新

  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

001.png.png

 ターミナルに「vercel」と入力し実行した時、下記のエラーが出た場合は、
002.png
  PowerShellスクリプトを実行できるようにポリシーを変更する必要がある。
  →以下の【A】へ

以下はほぼ流れで
 Set up and deploy :「y」と入力し実行
003.png
 Which scope do you want to deploy to ? :そのまま実行
004.png
 Link to existing project? :「n」と入力し実行
005.png
 What's your project's name?(mylinebot) :適当な名前{ファイル名}を入力し実行
006.png
007.png
 In which directory is your code located? :そのまま実行
008.png
 What to override the settings? :「n」と入力し実行
009.png
010.png
011.png

 (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スクリプトを実行できるようにポリシーを変更する

012.png
※デフォルト状態では実行できない
初めてPowerShellスクリプトを作成して、実行しようとすると上のようなエラーが発生し、実行することができない。PowerShellもプログラムの一種であり、悪意あるPowerShellスクリプトを実行した場合、システムを破壊されかねないことから、知識のある人のみ、安全なスクリプトのみ実行できるように、実行ポリシーという設定でPowerShellスクリプトの実行を制限している。よってこの実行ポリシーのデフォルト状態では一切のPowerShellスクリプトを実行できないようになっている。

※実行ポリシーの種類

実行ポリシーはデフォルトではRestrictedになっている。
スクリーンショット (354).png

そこで、以下の流れで実行ポリシーを設定する。
セキュリティを考え、デプロイが終了したら実行ポリシーは元に戻す。

  (a) PowerShell で管理者権限で起動する
  (b) 実行ポリシーの変更(Set-ExecutionPolicyコマンドで)
  (c) vercelをデプロイする(② 3. (1))
  (d) 実行ポリシーを戻す(Set-ExecutionPolicyコマンドで)

 (a) PowerShell で管理者権限で起動する[PowerShellからコマンドで実行]

    以下のコマンドをターミナルに入力し実行
    管理者権限で起動された PowerShell は別画面で立ち上がる。

Start-Process PowerShell.exe -Verb runas

013.png

以下のウインドウが開いたら「はい」をクリックする
20211124_223637.jpg

スクリーンショット (360).png

 (b) 実行ポリシーの変更(Set-ExecutionPolicyコマンドで)

〈1〉起動したPowerShellに以下のコマンドを入力して実行

Set-ExecutionPolicy RemoteSigned

スクリーンショット (361).png

〈2〉「y」と入力し実行
スクリーンショット (362).png

 (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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?