Kekeの日記

エンジニア、読書なんでも

Glitchを使って簡単にBotをデプロイする

本記事

本記事ではGlichというサービスを使ってアプリケーションをホスティングしてみようと思います。

無料で、かつ、簡単にデプロイできるうえに、GUI上で複数人でソースコードを変更することができる点で新しいので調査も兼ねて使っていこうと思います。

glitch.com

Botを開発する

1. .envを準備

以下のように.envを作成してください。

cp .env.sample .env

2. smee.ioでプロキシを取得する

以下のようにプロキシを取得することができます。Start a new channelをしてプロキシのURLを取得してください。

.envWEBHOOK_PROXY_URLに取得したURLをPasteします。

3. 実装する

最初は基本的なBotで確認してみましょう。

import { Application } from 'probot'

export = (app: Application) => {
  app.log('Yay, the app was loaded!')

  app.on('issues.opened', async context => {
    const issueComment = context.issue({ body: 'Thanks for opening this issue!' })
    context.github.issues.createComment(issueComment)
  })
}

これを走らせます。

npm run dev

4. GithubAppsで登録して秘密鍵を取得する

Register new Github Appにアクセスして必要が情報を打ち込んで、秘密鍵を作成します。

  • Webhook Secret: development

このときApp IDが発行されているので.envAPP_ID追加します。

f:id:bobchan1915:20181118004324p:plain

5. Botをリポジトリにインストールする

このhttps://github.com/settings/apps/${xxxxx}/installationsでインストールしてください。

`${xxxxx}には自分のアプリケーション名がはいります。

f:id:bobchan1915:20181118015901p:plain

そしてInstallを押して以下のようにリポジトリを選択するとインストールされます。

f:id:bobchan1915:20181118015938p:plain

Glitchのデプロイ手順

以下の手順でデプロイします。

1. プロジェクトの作成

まず、GUI上からプロジェクトを作成します。

f:id:bobchan1915:20181118000618p:plain

現在、作成可能なのは

  • Node.js(Express)アプリケーション
  • 静的Webページ
  • Node.js(Express)とsqliteのアプリケーション
  • githubからのクローン(今回はこれを使います)

です。今回はGithubからクローンをします。Clone form githubと選択すると以下のようになります。

f:id:bobchan1915:20181118001841p:plain

ここにユーザー名とリポジトリ名を入力するとクローンがはじまります。

最初は初期ファイルがあって、クローンに時間がかかります。クローン中の画面は以下の通りです。

f:id:bobchan1915:20181118001949p:plain

4. 環境変数を設定する

環境変数を使っていれば、Glictchデフォルトの.envに追加してください。

たとえば、私の場合は以下のようになります。

# デフォルトで追加されるのでいじらないこと
APP_ID=<your app id>
WEBHOOK_SECRET=<your app secret>
PRIVATE_KEY_PATH=.data/private-key.pem

# これを追加
NODE_ENV=production

3. 認証情報を設定する

.data/にいれたファイルは公開されません。今回はGithubアプリケーションのprivate.pem.data以下に配置します。

Glitchプロジェクトの削除の仕方

まず、Glitchプロジェクトに入ります。

左上の自分のプロジェクトをクリックしてください。

f:id:bobchan1915:20181118001000p:plain

4. Glitch上でのWebhook URLを取得

ここで左上のSHOWを押すとアプリケーションがひらけます。

このURLから/probotを取り除いたものがGithub上で設定するアプリケーションになります。

5. Botの情報を新しくする

先ほどの.envWEBHOOK_SECRECTの値をまたGithubのWebhook Secretに追加してください。

また先ほどのURLをWebhook URLに貼り付けてください。

GlitchでのLogをみる

左上のStatusをみてみてください。

すると以下のようにlogをみることができます。

f:id:bobchan1915:20181118021742p:plain

Glitch上で書いたコードをGithubに同期する

Importと同じようにExportがあるのですがConsoleからgit pushなど操作もすることができます。

f:id:bobchan1915:20181118021938p:plain