Handson-LINE-Bot-GCP-template-01

1.概要

簡単なLINE Botの作成を通じて、、Messaging APIの基本的な使い方と、 Cloud Runでのコンテナのビルドやデプロイの方法、RestAPIの公開方法などが学べます。

当日の持ち物

• LINEがインストール済みのスマホ
• ChromeがインストールされたPC（Chromeのバージョンは最新にしていただくとトラブルを回避しやすいです）

事前準備

• GitHub アカウント作成
• LINEアカウント作成 (普段つかっているLINEアプリのアカウント)
• LINE公式アカウント※ ログインできるかどうかを確認ください
• Google Cloud アカウント 作成
  • 会社アカウントでも大丈夫ですが、以下の手順で プロジェクトを作成 する内容になってますので、適宜読み替えをお願いします。
• (推奨) Google Chrome の最新版のインストール

使用するサービス・ツール

• GitHub
• LINE Messaging API
• Google Cloud
  • Cloud Run
  • Cloud Shell と そのエディター

使用する言語

• Node.js

構成図

注意事項

若干、Google Cloudの課金が発生する可能性があります。それ以外は課金など発生しません。 終わった後はリソース一式を削除するなど、無料範囲に収まるようにご留意ください。

2.実装

LINE側の設定

• https://developers.line.me/ja/services/messaging-api/ にアクセス。

• 「今すぐはじめよう」のボタンを押す

• 「LINEアカウントでログイン」を押す

• LINEのログインを求められるのでログイン

新規チャンネル作成

チャネルの種類

• Messaging APIになっているか確認

プロバイダ

• 既にプロバイダーを作っている場合 → 利用するプロバイダーを選択

• 「初めて」 → 新規プロバイダー作成を選択しプロバイダー名を入力
  • ※プロバイダー名に「LINE」という文字は含められません。

会社・事業者の所在国・地域

チャネルアイコン

• チャネルアイコンを登録しましょう。（今回は必須ではありません）

チャネル名、チャネル説明

• 以下を入力
  • チャネル名：「HandsonBot」
  • チャネル説明：「HandsonBotです。」

大業種、小業種

メールアドレス、プライバシーポリシーURL、サービス利用規約URL

• メールアドレスを確認
• プライバシーポリシーURLとサービス利用規約URLは任意入力

作成実行

• 下記２点の利用規約にチェックをして「作成」ボタンを押す

• 「OK」を押す

• 「同意する」を押す

LINE公式アカウント(LINE Bot)と友だちになる

• 「Messaging API設定」タブに移動し、QRコードを読み取って、友だち追加する

チャネルシークレット、アクセストークンの取得

• 「チャネル基本設定」タブからチャネルシークレットを、「Messaging API設定」タブからアクセスキーをそれぞれ取得する

  • チャネルシークレット

  • アクセストークン

Note:

• チャネルシークレット：Botサーバで受信したリクエストが不正なものでないかのチェックで使用される(LINE以外のサーバーからリクエストが送られていないかの確認)

• アクセストークン：LINEのAPI(機能)を実行する際に、認可が通り利用権限があることを証明するトークン

応答モードをOFFにする

• LINE Official Account Manager 画面にアクセスして、Botの「応答モード」設定をOFFにする。
  • デフォルトの設定はONになっており、メッセージを送るたびにデフォルトのメッセージが返ってきてしまうため

GCP側の設定

• Google Cloud の コンソールにログイン
  • https://console.cloud.google.com/
• 日本語に変更するやり方
  • 右上のケバブをクリックしてナビゲーションバーを開く > Preferences > Language & region > Languageを日本語にする > 保存

プロジェクト作成

• ヘッダの「プロジェクトの選択▼」＞新しいプロジェクト
• プロジェクト名 ： Handson-LINE-Bot-GCP

• 右上の ベルのアイコンをクリック > プロジェクト「Handson-LINE-Bot-GCP」を作成 〜 プロジェクトを選択 をクリックして、Handson-LINE-Bot-GCPのダッシュボードを開く

Cloud Runの有効化

• 画面左上のナビゲーションバーを開く > 「その他のプロダクト」 > [API とサービス] > [ライブラリ] を選択
• 検索バーに「Cloud Run」と入力し、検索結果のリストで Cloud Run API を選択
• プロジェクト「Handson-LINE-Bot-GCP」の課金の有効化、住所とクレジットカードの入力
• CLoud Run APIの[有効にする] をクリック。ブラウザの「戻る」を押すと、以下のように「APIが有効です」となっている

Cloud Shellの起動

Cloud ShellはGCP上に用意される無料のオンライン環境で、
利用が終わると停止しますが、作業内容はディスクに保存され、次回ログイン時にも引き続き使うことができます。
なおディスク容量は5GBしかありませんので、それ以上の大きなデータを扱う場合は 
VM Instanceなど他のサービスを使う必要があります。
参考： https://cloud.google.com/shell/pricing?hl=ja

• ヘッダのCloud Shellアイコンをクリック

LINE公式サンプルコードをGitHubからClone

• Cloud Shellターミナルで以下のコマンドを入力

$ git clone https://github.com/line/line-bot-sdk-nodejs.git
$ cp -r ~/line-bot-sdk-nodejs/examples/echo-bot/ ~/handson-line-bot-gcp-01
$ cd handson-line-bot-gcp-01

Cloud Shellのエディタでファイル編集

• Cloud Shell ターミナルの「エディタを開く」をクリック
• エディタの上を引っ張り上げると、面積を広げることができる

• 左ペインの 「handson-line-bot-gcp-01」 > 「Package.json」 を開いて編集

"name": "echo-bot",

↓

"name": "handson-line-bot-gcp-01" ,

• File＞「Auto Save」にチェックが入っていることを確認する。これが入っていればちゃんと自動保存される

Dockerfileを書く

• 「handson-line-bot-gcp-01」フォルダ右クリック > メニュー一番上の New FIle をクリックし、”Dockerfile”(拡張子無し)という名前のファイルを作る
• 以下を記入

FROM node:12
WORKDIR /usr/src/app
COPY package.json package*.json ./
RUN npm install --only=production
COPY . .
CMD [ "npm", "start" ]

• 1〜2秒で自動保存される

認証

• Cloud Shell ターミナルで以下を実行

$ gcloud auth login

• 「Do you want to continue (Y/n)? 」 には 「Y」 と入力
• 「Go to the following link in your browser:」 の　https://〜 で始まる長いURLをクリックするとブラウザが開くので、Google メールアドレスで認証→許可。
• 以下のような画面が表示されるので、copyをクリックして、verification codeをコピーする

• Cloud Shellのターミナルに戻り、 「Enter authorization code: 」 のプロンプトに、上でゲットしたverification code をペーストして、エンター
• 「You are now logged in as〜」と表示されればOK

コンテナをビルドし、Container Registoryへ格納

• Cloud Shell ターミナルで以下を実行

$ cd ~/handson-line-bot-gcp-01
$ gcloud builds submit \
  --tag gcr.io/$GOOGLE_CLOUD_PROJECT/handson-line-bot-gcp-01

• 「Cloud Shellの承認」というポップアップが出るので「承認」をクリック
• 「API [cloudbuild.googleapis.com] not enabled on project [99670530964]. Would you like to enable and retry (this will take a few minutes)? (y/N)?」 と表示されたら、「y」を入力
• 1〜2分かかりますので、ストレッチでもしましょう
• STATUS: SUCCESSで終了すればOK

Cloud Runへデプロイ

デプロイする際、あわせてチャネルアクセストークンとチャネルシークレットを環境変数に登録するやり方です。
ただし環境変数はプロジェクト閲覧者以上の権限を持つユーザーには見えてしまいますので、
正式なサービスでは避けた方がよく、代わりにSecret Managerを使用してください。
参考）https://cloud.google.com/run/docs/configuring/environment-variables?hl=ja#command-line

• Cloud Shell ターミナルで以下を実行

$ CHANNEL_ACCESS_TOKEN=ここにチャネルアクセストークンを記入（ダブルクウォートなどで囲む必要なし)
$ CHANNEL_SECRET=ここにチャネルシークレットを記入（ダブルクウォートなどで囲む必要なし)

$ gcloud run deploy handson-line-bot-gcp-01 \
  --image gcr.io/$GOOGLE_CLOUD_PROJECT/handson-line-bot-gcp-01 \
  --set-env-vars "CHANNEL_ACCESS_TOKEN=$CHANNEL_ACCESS_TOKEN"  \
  --set-env-vars "CHANNEL_SECRET=$CHANNEL_SECRET"  \
  --platform managed   \
  --region asia-northeast1 \
  --allow-unauthenticated  \
  --max-instances=1

• トラブルシュート
  • 「CHANNEL_ACCESS_TOKEN = 」のようにイコールの前や後に空白が入ると失敗する
• 成功すると以下のようなOKメッセージが表示されるので、Service URLをメモ帳などにコピーしておく

OK Deploying... Done.                                                             
  OK Creating Revision...                                                         
  OK Routing traffic...
  OK Setting IAM Policy...
Done.
Service [line-bot-gcp-01] revision [line-bot-gcp-01-00002-has] has been deployed and is serving 100 percent of traffic.
Service URL: https://line-bot-gcp-01-hogehogehoge-uc.a.run.app ←これをコピー

• トラブルシュート
  • シークレットの変数の代入わすれ

URLの動作確認

• ブラウザで、上記でゲットしたService URLにアクセス
• 以下のように「Cannot GET /」と表示されればOK！

3.統合

Webhook URLをLINE 側に登録

• LINE Developersのコンソール画面に戻って、「Messaging API設定」タブのWebhookに、上記で取得したCloud RunのService URLを記入し、末尾に必ず「/callback」を追加する
• Webhookの利用 > オンにする 例） https://line-bot-gcp-01-hogehogehoge-uc.a.run.app ↓ https://line-bot-gcp-01-hogehogehoge-uc.a.run.app/callback

• 「検証」をクリックして、200 OKになることを確認

• トラブルシュート

  • 404の場合、末尾に/callbackがついていないのかも

これでLINEのBotを動かす準備は全て整いました！

実機確認

• LINE トークアプリでBotに話しかけて、おうむ返しされることを確認

99.片づけ

Container Registory : コンテナを消す

• 左上の

  Container Registory > イメージ > handson-line-bot-gcp-01 > コンテナにチェックを入れて 「削除」

Cloud Run: アプリを消す

• 左上のナビゲーションバー > Cloud Run > handson-line-bot-gcp-01 にチェックを入れて「削除」

参考文献 https://github.com/line/line-bot-sdk-nodejs https://developers.line.biz/ja/docs/messaging-api/getting-started/ https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja