LoginSignup
11
8

More than 3 years have passed since last update.

docker+heroku(container registry)でline botを開発するための環境を構築する

Last updated at Posted at 2021-03-26

概要

 docker、heroku(container registry)を使用して、line botの開発環境を構築したため、その方法を共有する。

前提

 line developersにアクセスし、チャンネルを作成し、ラインアクセストークン、ラインシークレットを取得する。ここでは、Message APIを用いる方法で作製すること。

参考記事

全体像

 dockerにて開発環境を構築し、それをそのままherokuへデプロイすることで簡単にlinebotを実現することができる。ローカル上で開発テスト行うのであれば、push通知などであればherokuへデプロイしなくても実施はできる。

image.png

1. Dockerfile, docker-compose.ymlの作成

Dockerfile
# docker-hubからベースのdocker imageをpull
FROM node:14.5.0-alpine

# コンテナ内で作業するディレクトリを指定
WORKDIR /app
docker-compose.yml
version: "3.0"

services:
  linebot:
    build: .
    restart: always
    tty: true
    ports:
      - 1212:1212
    volumes:
      - .:/app

以下のコマンドでイメージ作成しコンテナを起動。そして、コンテナ内に入る

sehll
$ docker-compose up -d --build       # イメージの作成、コンテナの起動
$ docker-compose exec linebot sh     # コンテナ内に入る

2. コンテナ内でのインストール作業

以下のコマンドでパッケージをインストール。できたらctrl+dでコンテナを抜ける。

shell(コンテナ内)
$ npm init --yes    # package.json作成
$ npm install --save express @line/bot-sdk   # packageのインストール

3. Dockerfile,docker-compose.ymlの変更

Dockerfile
FROM node:14.5.0-alpine

# ワークディレクトリ
WORKDIR /app

# コンテナ内で必要なパッケージをインストール
COPY package.json .
RUN npm install

# ホスト側カレントディレクトリ内部をコンテナ側にコピー
COPY . .

# 起動
CMD npm start   
docker-compose.yml
version: "3.0"

services:
  linebot:
    build: .
    restart: always
    tty: true
    ports:
      - 1212:1212
    env_file:
      - .env
    volumes:
      - .:/app
      - /app/node_modules
    entrypoint: >
      sleep 86400

4. その他のファイル作成

npm startで実行するコマンドをpackage.jsonのscript欄に追加。index.jsを実行するように設定する。

package.json
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "echo \"Error: no test specified\" && exit 1",
+   "start": "node index.js"
  },

.envファイルの追加。

.env
LINE_CHANNEL_SECRET=[ラインチャンネルシークレット]
LINE_ACCESS_TOKEN=[ラインアクセストークン]

実行するファイルindex.jsの追加。https://[アプリ名].herokuapp.com/bot/webhookへアクセスしたら、HTTPレスポンスコード200を返すとしている。応答処理などは、index.jsに記述する。

index.js
// モジュールのインポート
const server = require("express")();
const line = require("@line/bot-sdk"); // Messaging APIのSDKをインポート

// パラメータ設定
const line_config = {
    channelAccessToken: process.env.LINE_ACCESS_TOKEN, // 環境変数からアクセストークンをセットしています
    channelSecret: process.env.LINE_CHANNEL_SECRET // 環境変数からChannel Secretをセットしています
};

// Webサーバー設定
server.listen(process.env.PORT || 1212);

// ルーター設定
// https://[アプリ名].herokuapp.com/bot/webhookでアクセスすると実行する関数
server.post('/bot/webhook', line.middleware(line_config), (req, res, next) => {
    res.sendStatus(200);
    console.log(req.body);
});

5. gitで管理

 gitの初期化。

shell
$ git init

.gitignoreの追加。

.gitignore
npm-debug.log
node_modules
.env

6. herokuへのデプロイ

shell
# herokuにログイン
$ ​heroku login​

# heroku container registryにログイン
$ heroku container:login

# herokuアプリの作成
$ heroku create

 herokuのホームページで作成したアプリにアクセスし、環境変数を設定する。
setting->cofing varsで.envで設定した環境変数を設定する。
image.png
image.png

デプロイは以下のコマンドで行う。$ heroku openはなくてもよい。ファイルを編集した際は毎回以下のデプロイ作業を行う事。

shell
# イメージをビルド(Dockerfileを実行)しcontainer registryにプッシュ
$ heroku container:push web

# herokuサーバー上でコンテナ起動
$ heroku container:release web

# アプリをブラウザで開き、エラーがねければOK
$ heroku open

7. line developerツールでの確認

 line developersにアクセスし、前提で作成したチャネルのwebhookをオンにして、webhookURLにhttps://[アプリ名].herokuapp.com/bot/webhookを設定し、検証を押して成功と表示されればOK!
アプリ名は、$ heroku openを実行した際のURLを見たらわかる。

image.png

8. line botを追加

 line developersにアクセスし、作成したbotのMessage APIタブのQRでbotを追加する。メッセージの送信に対しての処理は、index.jsで記述することができるため、以降はindex.jsを編集し、デプロイ作業を実施して開発を進めることができる。
 herokuへデプロイせずに応答を確かめるには、dockerのコンテナ内に入り、$ node index.jsを実行する。

shell
$ docker-compose exec linebot sh   # コンテナの中に入る
$ node index.js                    # serverの立ち上げ

さいごに

 間違っている個所があればご指摘おねがいします!

参考

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8