Glitchを使って簡単にBotをデプロイする
本記事
本記事ではGlichというサービスを使ってアプリケーションをホスティングしてみようと思います。
無料で、かつ、簡単にデプロイできるうえに、GUI上で複数人でソースコードを変更することができる点で新しいので調査も兼ねて使っていこうと思います。
Botを開発する
1. .envを準備
以下のように.envを作成してください。
cp .env.sample .env
2. smee.ioでプロキシを取得する
以下のようにプロキシを取得することができます。Start a new channelをしてプロキシのURLを取得してください。
.envのWEBHOOK_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が発行されているので.envのAPP_ID追加します。

5. Botをリポジトリにインストールする
このhttps://github.com/settings/apps/${xxxxx}/installationsでインストールしてください。
`${xxxxx}には自分のアプリケーション名がはいります。

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

Glitchのデプロイ手順
以下の手順でデプロイします。
1. プロジェクトの作成
まず、GUI上からプロジェクトを作成します。

現在、作成可能なのは
- Node.js(Express)アプリケーション
- 静的Webページ
- Node.js(Express)とsqliteのアプリケーション
- githubからのクローン(今回はこれを使います)
です。今回はGithubからクローンをします。Clone form githubと選択すると以下のようになります。

ここにユーザー名とリポジトリ名を入力するとクローンがはじまります。
最初は初期ファイルがあって、クローンに時間がかかります。クローン中の画面は以下の通りです。

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プロジェクトに入ります。
左上の自分のプロジェクトをクリックしてください。

4. Glitch上でのWebhook URLを取得
ここで左上のSHOWを押すとアプリケーションがひらけます。
このURLから/probotを取り除いたものがGithub上で設定するアプリケーションになります。
5. Botの情報を新しくする
先ほどの.envのWEBHOOK_SECRECTの値をまたGithubのWebhook Secretに追加してください。
また先ほどのURLをWebhook URLに貼り付けてください。
GlitchでのLogをみる
左上のStatusをみてみてください。
すると以下のようにlogをみることができます。

Glitch上で書いたコードをGithubに同期する
Importと同じようにExportがあるのですがConsoleからgit pushなど操作もすることができます。
