IBM Code Engine でシンプルな LINE BOT をつくれる Docker リポジトリを作ったメモ

IBM Code Engine でシンプルな LINE BOT をつくれる Docker リポジトリを作ったメモです。

2024/03/05 の情報でうまくいった情報で進めます。

もしかすると、ところどころ以後のアップデートで画面や設定が変わっているときは、読み替えてください。

今回使う LINE BOT の設定をメモ

ibm-code-engine-simple-linebot-base-docker-image_10.png

LINE Developers コンソール https://developers.line.biz/console/ で今回使う LINE BOT の以下の設定をメモしておきましょう。

  • チャネルアクセストークン
  • チャネルシークレット

GitHub からリポジトリをフォーク

ibm-code-engine-simple-linebot-base-docker-image_00.png

https://github.com/1ft-seabass/ibm-ce-simple-nodejs-line-bot

こちらをフォークします。

ibm-code-engine-simple-linebot-base-docker-image_06.png

+Create a new fork をクリックします。

ibm-code-engine-simple-linebot-base-docker-image_24.png

  • Owner
    • 自分のプロジェクトを選択します
  • リポジトリの名前
    • ibm-ce-simple-nodejs-line-bot-forked

にして Create fork をクリックします。

IBM Cloud アカウントのログイン

IBM アカウントでログインします。

Code Engine の準備

ibm-code-engine-simple-linebot-base-docker-image_16.png

https://cloud.ibm.com/codeengine/create/start にアクセスなどで Code Engine の準備をはじめます。

ibm-code-engine-simple-linebot-base-docker-image_08.png

プロジェクトの作成ボタンをクリックします。

ibm-code-engine-simple-linebot-base-docker-image_21.png

  • ロケーション
    • 東京
  • 名前
    • 自動生成される名前で OK
  • リソースグループ
    • default

作成ボタンをクリックします。

ibm-code-engine-simple-linebot-base-docker-image_07.png

このように今回のプロジェクトが作成され、選択された状態になります。

ibm-code-engine-simple-linebot-base-docker-image_20.png

名前は以下のように設定します。

  • 名前
    • application-simple-linebot-38136
    • 38136 は適当な数字

実行するコードの選択は「ソース・コード」を選択して、ソース・コード URLを先ほどのリポジトリの URL を入力します。

ibm-code-engine-simple-linebot-base-docker-image_14.png

ビルド詳細の指定ボタンをクリックします。

ibm-code-engine-simple-linebot-base-docker-image_05.png

設定を確認して次へボタンをクリックします。各内容は自動生成のものを使い変更しません。

ibm-code-engine-simple-linebot-base-docker-image_09.png

戦略を確認して次へボタンをクリックします。各内容は自動生成のものを使い変更しません。

ibm-code-engine-simple-linebot-base-docker-image_19.png

出力を確認して完了ボタンをクリックします。各内容は自動生成のものを使い変更しません。

ibm-code-engine-simple-linebot-base-docker-image_15.png

イメージ・ビルドの詳細が作成されます。

以下の確認を行います。

  • リソースおよびスケーリング
    • そのままの設定
  • ドメイン・マッピング
    • パブリック
  • オプションの設定
    • なにもしない

ibm-code-engine-simple-linebot-base-docker-image_04.png

ここまでできると、作成ボタンが押せるようになるのでクリックします。

ibm-code-engine-simple-linebot-base-docker-image_03.png

作成中の画面です。

ibm-code-engine-simple-linebot-base-docker-image_13.png

アプリケーションのテストボタンが押せるようになったら、作成されたので、うまく作成されたか確認しましょう。

ibm-code-engine-simple-linebot-base-docker-image_17.png

アプリケーションの URL ボタンをクリックします。

ibm-code-engine-simple-linebot-base-docker-image_18.png

このように別のタブで表示されたら作成成功です!この URL を覚えておきましょう。

環境変数に LINE BOT の設定

ibm-code-engine-simple-linebot-base-docker-image_12.png

アプリケーションの環境設定タブに移動します。

ibm-code-engine-simple-linebot-base-docker-image_25.png

環境変数の追加をクリックします。

ibm-code-engine-simple-linebot-base-docker-image_02.png

  • 環境変数名
    • LINE_BOT_CHANNEL_SECRET
    • 今回使う LINE BOT のチャネルシークレット

設定できたら完了ボタンをクリックします。

ibm-code-engine-simple-linebot-base-docker-image_25.png

環境変数の追加をクリックします。

ibm-code-engine-simple-linebot-base-docker-image_23.png

  • 環境変数名
    • LINE_BOT_CHANNEL_ACCESS_TOKEN
    • 今回使う LINE BOT のチャネルアクセストークン

設定できたら完了ボタンをクリックします。

LINE BOT の設定

LINE Developers にアクセスして、今回使う LINE BOT に移動ます。Messaging API設定 の Webhook 設定を確認します。

ibm-code-engine-simple-linebot-base-docker-image_22.png

編集ボタンをクリックします。さきほど動作確認した今回の Code Engine の URL に /webhook をつけた形で入力して更新ボタンをクリックします。

ibm-code-engine-simple-linebot-base-docker-image_01.png

Webhook の利用のチェックが ON になっていることも確認しましょう。

これで準備が完了です。

動かしてみよう

ibm-code-engine-simple-linebot-base-docker-image_11.png

今回使う LINE BOT からメッセージを送ってみるとオウム返してメッセージが返ってきます。

最初の 1 回はコールドスタートといって、はじめてサーバーが起動するので 5 ~ 15 秒くらい待ちますが、それ以降はすぐに返答がくるようになるはずです。

しばらくアクセスしないと、またサーバーが終了するので、そのときは同じように最初だけ待ちます。