GitHub+Docker Hub+Azure Webapp for ContainerによるLINE Botの作り方



# 使うもの

本記事では、以下のサービスやツールを使ってLINE Botを動かします。

* GitHub
  * ソース置き場
* Docker Hub
  * ソースからビルドしたコンテナイメージの置き場所
* Azure Webapp for Container
  * コンテナイメージを動かす
* yeoman
  * テンプレートのソース生成ツール
  * https://yeoman.io/
* generator-line-bot
  * yeoman用のLINE Botテンプレート
  * https://github.com/kenakamu/generator-line-bot

# 構築手順

## 1. yeoman & generator-line-botのインストール
下記コマンドでyeomanとgenerator-line-botをインストールします。もしnodejs環境がない場合は先に準備してください。

```
npm install -g yo
npm install -g generator-line-bot
```

## 2. LINE Botテンプレートの生成

↑でインストールしたyeoman & generator-line-botを使ってLINE Botテンプレートを作成します。ここではソースをnodejsとして生成しています。

```
yo line-bot mybot --nodejs
```

コマンドを実行するとChannel SecretとChannel Access Tokenを聞かれますが、ここで指定した値は使わない＆GitHubにアップしてはいけない文字列なので、未入力のままにするなど適当に設定しておきます。

## 3. Dockerfileの作成

作成したテンプレートをDockerイメージとしてビルドするためのDockerfileを作成します。（下記サンプル）

```
FROM node:11.6.0-alpine

ARG CHANNEL_ACCESS_TOKEN
ARG CHANNEL_SECRET

WORKDIR /var/opt/mybot
ADD mybot/index.js .
ADD mybot/package-lock.json .
ADD mybot/package.json .
ADD mybot/static ./static
RUN npm install

ENV CHANNEL_ACCESS_TOKEN ${CHANNEL_ACCESS_TOKEN}
ENV CHANNEL_SECRET ${CHANNEL_SECRET}
EXPOSE 3000

CMD ["npm", "start"]
```

## 4. GitHubリポジトリの作成

GitHubにソースを保存するためのリポジトリを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63849/bb11a0fe-0590-5a00-6740-3cfb470eb29d.png)

## 5. Docker Hubリポジトリの作成と自動ビルド設定

Docker Hub上でLINE Botのコンテナイメージを公開するためのリポジトリを作成します。
このときに、↑の手順4で作成したGitHubリポジトリに対する自動ビルド設定をしておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63849/621065a1-3c4f-ae33-288c-ffc43d334108.png)

## 6. 作成したソースをGitHubリポジトリにpush

下記コマンドにて作成したソースやDockerfileをpushします。

```
git init
git remote add origin https://github.com/stakagi/linebot.git
echo node_modules >> .gitignore
git add -A
git commit -m "add mybot"
git push -u origin master
```

pushした後にDocker Hubのリポジトリを見ると、自動ビルドが走り、新しいコンテナイメージが作られるはずです。

## 7. Azure Webapp for Containerの作成

AzureポータルからAzure Webappを作成します。<BR>
細かい設定は省きますが、この設定では「OS」はLinux「公開」はDockerイメージを選択し、コンテナーの構成から↑の手順5で作成したリポジトリのlatestイメージを使うようにしておきます。

// TODO スクリーンショットをつける

ちなみにterraformで作る場合は、↓こんな感じです。

```
provider "azurerm" {
  version = "=1.21.0"
  subscription_id = "<<Set your subscription id>>"
}

variable "channel_access_token" {}
variable "channel_secret" {}

resource "azurerm_resource_group" "default" {
  name     = "linebot"
  location = "Japan East"
}

resource "azurerm_app_service_plan" "default" {
  name                = "${azurerm_resource_group.default.name}-plan"
  location            = "${azurerm_resource_group.default.location}"
  resource_group_name = "${azurerm_resource_group.default.name}"
  kind                = "Linux"
  reserved            = "true"

  sku {
    tier = "Basic"
    size = "B1"
  }
}

resource "azurerm_app_service" "default" {
  name                = "${azurerm_resource_group.default.name}-appservice"
  location            = "${azurerm_resource_group.default.location}"
  resource_group_name = "${azurerm_resource_group.default.name}"
  app_service_plan_id = "${azurerm_app_service_plan.default.id}"
  https_only          = "true"

  app_settings {
    CHANNEL_ACCESS_TOKEN                = "${var.channel_access_token}"
    CHANNEL_SECRET                      = "${var.channel_secret}"
    BASE_URL                            = "https://${azurerm_resource_group.default.name}-appservice.azurewebsites.net"
    WEBSITES_ENABLE_APP_SERVICE_STORAGE = "false"
    DOCKER_ENABLE_CI                    = "true"
    DOCKER_REGISTRY_SERVER_URL          = "https://index.docker.io"
  }

  site_config {
    linux_fx_version = "DOCKER|shunichitakagi/linebot:latest"
    always_on        = "true"
  }

  identity {
    type = "SystemAssigned"
  }
}
```

## 8. LINE Botアカウントの作成とWebhook設定

https://developers.line.biz/ja/ よりLINE Botアカウントを作成します。<BR>
作成できたら、そのLINE Botのチャネル基本設定画面にて、Webhook URLに対して↑の手順7で作成したAzure WebappのURL + /callback を設定します。

// TODO スクリーンショットをつける

## 9. Azure Webapp for Containerに対するトークン設定

Azureポータルに戻って、手順7で作成したWebappのアプリケーション設定画面を開いて、アプリケーション設定項目に下記２つの設定を追加します。

* CHANNEL_ACCESS_TOKEN
  * チャネル基本設定画面にある「アクセストークン（ロングターム）」の値を設定
* CHANNEL_SECRET
  * 同画面の「Channel Secret」の値を設定

// TODO スクリーンショットをつける

## 10. Azure Webapp for Containerへの自動デプロイ用Webhook設定

Docker Hubに新しいイメージがpushされた際に、そのイメージを自動的にAzure Webapp for Containerへ展開するため、Docker Hub上にAzure WebappのWebhookを仕掛けます。

// TODO スクリーンショットをつける

# 終わり

以上の設定を行うことで、GitHubにソースをプッシュすると自動的にLINE Botが更新される仕組みができあがります。