ハンズオン勉強会#Docker 入門
～ Docker でお手軽 LINEbot 作成～

元ネタ記事：
https://techracho.bpsinc.jp/wingdoor/2020_02_06/87529

アジェンダ

0.作成する LINEbot のイメージ
1.Docker セットアップ
2.ngrok のインストール
3.LINEbot 用アカウントの作成
4.docker-compose.yml,設定ファイル,プログラム準備
5.Docker コンテナ起動
6.ngrok で URL 外部公開 & Webhook URL の登録

0.作成する LINEbot のイメージ

参考にしたサイト
- Laravel で使う Line Messaging API
- 【動画】【初心者向け】LINE bot 構築の基礎知識

1.Docker セットアップ

Docker 実行環境が未セットアップの場合、下記を参考にセットアップ。
- Windows10 で WSL2&Docker の環境構築

2.ngrok のインストール

ngrok 公式にアクセス、Sign up for freeよりサインアップ。
ログインし、Download for Windowsをクリックし、zip を DL。
フォルダC:\ngrokを作成、zip に含まれるngrox.exeを同フォルダに配置。
コマンドプロンプト起動、2. Connect your account 記載のコマンドを実行。
C:\ngrok以外からも ngrok コマンド実行できるよう、Path を追加。
- タスクバー検索でシステム環境変数の編集を検索し、開く。
- 環境変数を開き、システム環境変数＞ Path を選択し編集を押下。
- 一覧の一番下にC:\ngrokを追加し、OK 押下。
参考にしたサイト
- 【公式】Setup & Installation
- 【動画】INSTALL AND USE NGROK ON WINDOWS

3.LINEbot 用アカウントの作成

元ネタ記事＞LINEbot 用アカウントの作成　の手順通りプロバイダーを作成する。
- 名称は、202304DockerLineBot を設定。
- チャネル作成の、業種は個人(その他)を選択。

4.docker-compose.yml,設定ファイル,プログラム準備

元ネタ記事＞LINEbotを動かすDockerコンテナの作成　の手順通り Docker 上で LINEbot を動かすための各種ファイルを作成する。
- nginx.conf、docker-compose.ymlは、元ネタ記事の記載をそのままコピペ。
- index.phpは、次スライドの記載をコピペ&アクセストークン部分修正。
docker-compose.yml内容は、nginx と PHP のコンテナの定義。以下記事は Linux ホスト上での環境構築手順だが、同様の構成を Docker 上で構築するイメージ。
- nginx で PHP を動かす【Ubuntu 編】
- nginx と PHP-FPM の仕組みをちゃんと理解しながら PHP の実行環境を構築する

index.php（＜自身のアクセストークン＞部分は要修正）

<?php

const CHANNEL_ACCESS_TOKEN = '＜自身のアクセストークン＞';

$entityBody = file_get_contents('php://input');
$data = json_decode($entityBody, true);

foreach ($data['events'] as $event) {
    switch($event['type']) {
        case 'message':
            $message = $event['message'];
            $text = mb_convert_kana($message['text'], 'KVas');
            // 返信メッセージ、"～なの？"にアレンジ
            $return_message_text = "「" . $text . "」なの？";
            $message = array(
                'replyToken' => $event['replyToken'],
                'messages' => array(
                    array(
                        'type' => 'text',
                        'text' => $return_message_text
                    )
                )
            );

            $header = array(
                "Content-Type: application/json",
                'Authorization: Bearer ' . CHANNEL_ACCESS_TOKEN,
            );

            $context = stream_context_create(array(
                "http" => array(
                    "method" => "POST",
                    "header" => implode("\r\n", $header),
                    "content" => json_encode($message),
                )
            ));
            $response = file_get_contents('https://api.line.me/v2/bot/message/reply', false, $context);
        default:
            error_log("Unsupported event type: " . $event['type']);
            break;
    }
}

5.Docker コンテナ起動

フォルダLINEBot_testを開き、右クリック＞ターミナルで開くを選択。LINEBot_test(がマウントされたディレクトリ)を、カレントディレクトリとして Ubuntu を起動できる。
Ubuntu でなく PowerShell 等が起動する場合は、以下の設定後再度試す。
- ターミナルのタブのｖ(+の右隣)押下＞設定押下＞「既定のプロファイル：Ubuntu」に変更し保存
以下コマンドを実行、docker-compose.yml定義通りの Docker コンテナ起動。
```
docker compose up
```

6.ngrok で URL 外部公開 & Webhook URL の登録

元ネタ記事＞手順4 ngrokで立ち上げたDockerコンテナへのポートフォワーディング、Webhook URLの登録の手順通り進める。
- 下記コマンド実行。localhost:8080(nginx コンテナのポート)を公開。
```
ngrok http --host-header="0.0.0.0:8080" 8080
```
- 動作確認がうまくいかない場合、Forwarding の https の URL を開き、php のエラーログが出力されていないか確認。
- デフォルトの応答メッセージ(メッセージありがとうございます!…)の送信をストップする場合
  - LINE 公式アカウント機能＞応答メッセージ＞編集＞応答メッセージ:OFF