よく使う記事(↓)のソースコードを元にVercel（旧: now.sh）にLINE BOTをデプロイします。
ちなみに、Vercelはnow時代から仕様がちょくちょく変わる印象があるのであくまでも現時点版だと思った方が良さそうです。
事前準備: LINE BOTを作成し、ngrokで動作確認
参考記事のSTEP3のngrokでトンネリングさせるところまで進めます。
参考: 1時間でLINE BOTを作るハンズオン (資料+レポート)
1. Vercelコマンドのインストール
$ npm i -g vercel
既にインストールしている人はこの手順はスキップしましょう。
2. プロジェクトのファイル微修正
Vercelにデプロイするにあたりちょっとした修正を3箇所行います
2-1. server.jsをapiフォルダへ
プロジェクトのルート（package.jsonがある階層）にapiという名前でフォルダを作成します。
apiフォルダ内に、もともLINE BOTで作成したserver.jsを移動させます。
Vercel上ではapiフォルダ内に置いたプログラム(.js or .ts)をNode.jsで実行する模様です。
2-2. vercel.jsonを作成
プロジェクトのルート（package.jsonがある階層）にvercel.jsonという名前でファイルを作成します。
{
"version": 2,
"routes": [
{ "src": "/", "dest": "api/server.js" },
{ "src": "/webhook", "dest": "api/server.js" }
]
}
2-3. 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}`);
3. デプロイ
あとはプロジェクトのルートでvercelコマンドを実行するだけです。デプロイ時に対話式に質問が来ますが全てエンターで進めます。
Vercelの利用が初めての場合のみログイン認証があります。
$ vercel
デプロイが成功するとhttps://<アプリ名>.now.shというURLが発行されます。
この時点で、このURLにブラウザでアクセスし、Hello LINE BOT!(GET)の文字が表示されれば問題なくデプロイできています。
4. LINE Developersの管理画面でWebhook URLを更新
LINE DevelopersのWebhook設定の管理画面からhttps://<アプリ名>.now.sh/webhookというURLを設定します。
これで完成となります。
更新する際
デプロイし直す場合はvercelコマンドだけでデプロイ可能です。
$ vercel
ローカルでngrokで試す際はapiフォルダにserver.jsを移動させてあるので
$ node api/server.js
という実行の仕方に変えましょう。
所感 now時代と違うところなど
割と軽微な変更でデプロイできました。一回感覚を掴むと問題ないですが、初見だとちょっと戸惑う人いるかもなぁという印象です。
vercel.jsonは基本的にはnow.jsonと同じような書き方でしたが、buldsが非推奨っぽくなってたり、apiフォルダに入れると認識されるなど微妙に変わってるところがありうまく行くまでなんどかやり直しが発生しました。
今回はもともとローカル起動させるnode.jsプログラムの記述をあまり変えずにVercelにデプロイするやり方ですが、Vercelのドキュメント的にはapiフォルダにhoge.jsを設置すると /api/hogeという形でアクセスできるようになるみたいですね。
詳細はこの辺を見ると良さそうです。