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

LINE Botを永続化するにはGASを用いることで可能となりますが、コードを書き変えなければなりません。その手間を省くにはVSCodeで動いているものを自動化するのが合理的です。今回はVercelによる永続化に挑戦しました。

#作成の流れ
　①VScodeで動くオウム返しBOTを作成する
　　　　１.　Botアカウントを作成する
　　　　２.　Node.jsでBot開発
　　　　３.　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
に詳しく解説しましたので、「３.　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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/dcd71693-eb55-669d-f719-499a083dab55.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/3bd5ff71-3c33-8529-9b57-0f98207c9bd7.png)

**　ターミナルに「vercel」と入力し実行した時、下記のエラーが出た場合は、**
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/ca4ace79-db73-331f-8e09-58047a623ac3.png)
　　**PowerShellスクリプトを実行できるようにポリシーを変更する必要がある。**
　　**→以下の【A】へ**


以下はほぼ流れで
　Set up and deploy　：「y」と入力し実行
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/f8b31ce5-63cf-3c6a-8061-ae1f9091b7da.png)
　Which scope do you want to deploy to ? ：そのまま実行
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/fb5b2dce-ae9b-aa09-b321-cb6bfda46a3a.png)
　Link to existing project?　：「n」と入力し実行
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/a4e0a520-9f37-be65-925c-942cd95d4a6d.png)
　What's your project's name?(mylinebot)　：適当な名前｛ファイル名｝を入力し実行
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/0c57e0b9-fb2e-1879-f2fc-61f69a166bbd.png)
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/cf8ba795-ab1a-1491-6787-efb2bac8b636.png)
　In which directory is your code located?　：そのまま実行
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/083e7986-ddeb-e71b-3028-b2fd4fa31601.png)
　What to override the settings?　：「n」と入力し実行
![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/126807d1-aed0-2a3c-3bc7-b1ea0081a28d.png)
![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/7d44f52a-64d9-27fa-5ea6-612f7b748159.png)
![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/5e3fe230-e0b5-bea9-51cd-b888b752eceb.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/43276bd6-dddd-7594-cb9d-d498fd558015.png)
**※デフォルト状態では実行できない**
初めてPowerShellスクリプトを作成して、実行しようとすると上のようなエラーが発生し、実行することができない。PowerShellもプログラムの一種であり、悪意あるPowerShellスクリプトを実行した場合、システムを破壊されかねないことから、知識のある人のみ、安全なスクリプトのみ実行できるように、実行ポリシーという設定でPowerShellスクリプトの実行を制限している。よってこの実行ポリシーのデフォルト状態では一切のPowerShellスクリプトを実行できないようになっている。

**※実行ポリシーの種類**

実行ポリシーはデフォルトではRestrictedになっている。
![スクリーンショット (354).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/8a57b59a-e143-0eb1-1b62-4a6e3ec043ea.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/2eb1adad-b0d9-f850-2517-0791892f22da.png)

以下のウインドウが開いたら「はい」をクリックする
![20211124_223637.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/7a951813-e245-6d80-cee8-b1a444ef0a2a.jpeg)

![スクリーンショット (360).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/230bfa12-8a29-98ae-6ba4-1bdccd0f1fba.png)



#####　(b)　実行ポリシーの変更（Set-ExecutionPolicyコマンドで）
〈1〉起動したPowerShellに以下のコマンドを入力して実行

```
Set-ExecutionPolicy RemoteSigned
```

![スクリーンショット (361).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/ce35af8a-e367-baa4-7830-5a2c73a2575b.png)

〈2〉「y」と入力し実行
![スクリーンショット (362).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/b5322b90-9fec-69d5-2154-f838588d24ac.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