Help us understand the problem. What is going on with this article?

VercelでLINE BOTを動かす 2020年5月版

よく使う記事(↓)のソースコードを元にVercel(旧: now.sh)にLINE BOTをデプロイします。

https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

ちなみに、Vercelはnow時代から仕様がちょくちょく変わる印象があるのであくまでも現時点版だと思った方が良さそうです。

事前準備: LINE BOTを作成し、ngrokで動作確認

参考記事のSTEP3のngrokでトンネリングさせるところまで進めます。

参考: 1時間でLINE BOTを作るハンズオン (資料+レポート)

1. Vercelコマンドのインストール

$ npm i -g vercel

既にインストールしている人はこの手順はスキップしましょう。

参考: 爆速!Vercelとfreenomで独自ドメインのサイトを無料で作成する

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という名前でファイルを作成します。

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

2-3. server.jsを更新

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という形でアクセスできるようになるみたいですね。

詳細はこの辺を見ると良さそうです。

n0bisuke
プロトタイピング専門スクール「プロトアウトスタジオ」で教えたりしてます。 プロフ -> https://dotstud.io/members/n0bisuke
https://protoout.studio
dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。
https://dotstud.io
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした