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

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

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

<!--
_paginate: false
-->

---

# アジェンダ

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

---

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

![goal_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3281137/8f777f2e-e481-c834-cc58-f27cf99a01dc.png)


- 参考にしたサイト
  - [Laravel で使う Line Messaging API](https://www.fourier.jp/techblog/articles/laravel-line-messaging-api/)
  - [【動画】【初心者向け】LINE bot 構築の基礎知識](https://www.youtube.com/watch?v=LHwJBpxorAg)

---

# 1.Docker セットアップ

- Docker 実行環境が未セットアップの場合、下記を参考にセットアップ。
  - [Windows10 で WSL2&Docker の環境構築](https://qiita.com/osakaonuma/items/f6c076375e05acc00492)

---

# 2.ngrok のインストール

- [ngrok 公式](https://ngrok.com/)にアクセス、`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](https://dashboard.ngrok.com/get-started/setup)

  - [【動画】INSTALL AND USE NGROK ON WINDOWS](https://www.youtube.com/watch?v=XhRmn9Y8Agk)

---

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

- [元ネタ記事](https://techracho.bpsinc.jp/wingdoor/2020_02_06/87529)＞`LINEbot 用アカウントの作成`　の手順通りプロバイダーを作成する。
  - 名称は、`202304DockerLineBot` を設定。
  - チャネル作成の、`業種は個人(その他)`を選択。

---

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

- [元ネタ記事](https://techracho.bpsinc.jp/wingdoor/2020_02_06/87529)＞`LINEbotを動かすDockerコンテナの作成`　の手順通り Docker 上で LINEbot を動かすための各種ファイルを作成する。
  - `nginx.conf`、`docker-compose.yml`は、元ネタ記事の記載をそのままコピペ。
  - `index.php`は、次スライドの記載をコピペ&アクセストークン部分修正。
- `docker-compose.yml`内容は、nginx と PHP のコンテナの定義。以下記事は Linux ホスト上での環境構築手順だが、同様の構成を Docker 上で構築するイメージ。
  - [nginx で PHP を動かす【Ubuntu 編】](https://101010.fun/programming/run-php-with-nginx.html)
  - [nginx と PHP-FPM の仕組みをちゃんと理解しながら PHP の実行環境を構築する](https://qiita.com/kotarella1110/items/634f6fafeb33ae0f51dc)

---

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

  ```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 の登録

- [元ネタ記事](https://techracho.bpsinc.jp/wingdoor/2020_02_06/87529)＞`手順4 ngrokで立ち上げたDockerコンテナへのポートフォワーディング`、`Webhook URLの登録`の手順通り進める。

  - 下記コマンド実行。localhost:8080(nginx コンテナのポート)を公開。

    ```
    ngrok http --host-header="0.0.0.0:8080" 8080
    ```

  - 動作確認がうまくいかない場合、Forwarding の https の URL を開き、php のエラーログが出力されていないか確認。

  - デフォルトの応答メッセージ(メッセージありがとうございます!…)の送信をストップする場合

    - LINE 公式アカウント機能＞応答メッセージ＞編集＞応答メッセージ:OFF