Firebase FunctionsでLINE Bot的なものを作る

JavaScript

Node.js

Firebase

Firestore

GitHub

Linux

Functions

VSCode

はじめに

前回に引き続き、LINE Botの投稿です！
今回はFirebase Functionsを使って作ってみました。

※追記
Githubはこちら

環境

 
OS: macOS Montery 
Node: 14.15.3 
npm: 6.14.9

LINE側の設定を行う

プロバイダーの作成

LINE Developers にログインします。
ログイン後、作成ボタンをクリックし、プロバイダーを作成します。

プロバイダー名などを入力し、作成完了します。
作成が完了すると以下のような画面になると思います。

チャネル作成

作成したプロバイダーで[Messaging API]を選択し、チャネルを作成していきます。

諸々の入力が完了したら、LINE側の設定は一旦完了です。
※後程、チャネルシークレットとチャネルアクセストークンを使います。
そのためにMessaging API設定＞チャネルアクセエストークンの発行ボタンをクリックし、トークンを発行しておきましょう。

Firebaseの設定を行う

Firebaseコンソール設定

Firebaseコンソールにログインします。
アカウントをまだ作成していない場合は作成しログインしてください。（Googleログインで比較的簡単に作成はできたと思います。）

新規プロジェクト作成

ログイン後、「プロジェクトの追加」をクリックします。画面上の指示に従い、新規プロジェクトを作成します。

プランアップグレード

今回使用するFunctionsは従量課金プランである「Blaze」へのアップグレードが必須になります。
※200万リクエスト/月の無料枠があるので、個人で利用する分には請求が来ることはほぼないと思います。参考

ターミナル

アップグレードが完了したら、ターミナルを開いて適当なところでディレクトリを作成します。

mkdir linebot-functions
cd linebot-functions

ディレクトリに移動したら、CLIでのFirebase設定を行います。

npm install -g firebase-tools
firebase login
firebase init

聞かれる質問で必要なものを選んで設定ファイル等を生成します。

2つめ選択肢は先ほどFirebaseコンソールで新規プロジェクトを作成しているので、Use an existing projectを選択し、作成したプロジェクト名を選択しましょう。

初期化が完了するとfunctionsディレクトリが作成されるので、配下に移動して必要なパッケージをインストールします。
※実行時に必要なパッケージのインストールが完了していれば、以下の実行は必要はないです。

npm install firebase-functions@latest firebase-admin@latest --save

LINE SDKをインストールします。以下は実行してください。

npm install --save @line/bot-sdk

環境変数を利用するのでdotnevもインストールしておきます。
※ここはFirebaseの環境変数設定を使った方がいいです。更新したら追記しておきます。

npm install dotenv --save

いざ、実装！

実装したコードは以下の通りです。

const functions = require("firebase-functions");
const line = require("@line/bot-sdk");

require("dotenv").config();

const config = {
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.CHANNEL_SECRET,
};

const client = new line.Client(config);

/**
 * Hello World関数
 */
exports.helloWorld = functions.https.onRequest(async (req, res) => {
  const events = req.body.events[0];
  // Hello Wolrdを送信する。
  await client.replyMessage(events.replyToken, {
    type: "text",
    text: "Hello World!!!",
  });
  res.status(200).send();
});

.envは以下の通りで設定しました。

CHANNEL_ACCESS_TOKEN="チャネルアクセストークン"
CHANNEL_SECRET="チャネルシークレット"

デプロイ

以下コマンドを実行してデプロイを行います。

firebase deploy --only functions

LINE Webhook URL設定

FirebaseコンソールからURLを取得

デプロイがうまくいっていれば、
Firebaseコンソール上の「Functions」のダッシュボードにデプロイした関数が表示されていると思います。
そのダッシュボード上のトリガーにリクエストURLがあると思いますので、それをコピーします。

LINE DevelopersでURLをセット

LINE Developersで作成したチャネルの「Messaging API設定」タブの中にある「Webhook URL」にコピーしたURLをセットします。

ここまでで準備は完了です。

実践

LINE Developers上のQRコードを読み取って、LINE友達登録します。
登録完了後、何かしらメッセージを投稿するとうまくいっていれば、メッセージが返ってくると思います！

まとめ

以上で設定、実装、実践の完了です。 所々、変えた方がいいものもありますが、動くものができたかと思います。。

これを基盤にいろんな実装ができるようになると思います。
今回のコードは整備したのちGithubに上げれたらと思っています。。

追記

Firebase Functionsでの環境変数の設定を行いました！
以下実行したコマンドです。

firebase functions:config:set linebot.secret="xxxxxxxxx" linebot.access_token="xxxxxxxxx"

コード上の.envから取得していた箇所をfirebase configから取得するように修正したものが以下です。

const config = {
  channelAccessToken: functions.config().linebot.access_token,
  channelSecret: functions.config().linebot.secret,
};

現場からは以上です。

作成したGithubはこちらです。

Sakakky

@Sakakky6825

目次