Zenn
Closed24

Dsicord SlashコマンドをAzure Functionsにデプロイする記事の準備

Azure
TypeScript
Discord
Serverless
Azure Functions
にー兄さんにー兄さん

目的

  • SlashコマンドのインタラクションをAzure Functionsにデプロイ
  • 上記の覚書
にー兄さんにー兄さん

今回はインタラクションAPI EndpointをAzure Functionsでホストすることにより、サーバーレス化するまでをTypeScriptでやってみる

にー兄さんにー兄さん

Slashコマンドはglobalなものとギルド専用のものがあるが、前者は繁栄に1時間かかったりするらしいのでギルド専用のスラッシュコマンドを実装していく
適当な鯖を一個作ってそこにアプリを追加する感じで

にー兄さんにー兄さん

まずはDeveloper Portalで作業

にー兄さんにー兄さん

ボットにコマンドを登録するためにnode.jsを使ってPOSTリクエストを送る
まず適当にディレクトリを作ってその中で

yarn init -y
yarn add node-fetch request

とする

にー兄さんにー兄さん

そのあとに以下のスクリプトをindex.jsに書く

index.js
const appID = "<application id>";
const guildID = "<guild id>"
const apiEndpoint = 
  `https://discord.com/api/v8/applications/${appID}/guilds/${guildID}/commands`;
const botToken = "<bot tolen>";

const commandData = {
  name: "zenntest",
  description: "command for zenn tutorial",
  options: [
    {
      name: "say",
      description: "say something",
      type: 3,
      required: true,
      choices: [
        {
          name: "Hello",
          value: "hello"
        },
        {
          name: "Goodbye",
          value: "goodbye"
        },
        {
          name: "hoge hoge",
          value: "hoge"
        },
      ],
    },
  ],
};

async function main() {
    const fetch = require("node-fetch");

  const response = await fetch(apiEndpoint, {
    method: "post",
    body: JSON.stringify(commandData),
    headers: {
      Authorization: "Bot " + botToken,
      "Content-Type": "application/json",
    },
  });
  const json = await response.json();

  console.log(json);
}
main();
にー兄さんにー兄さん

このスクリプトをnode ./index.jsって感じで実行すると、鯖でコマンドが使えるようになるが
インタラクションが設定されていないのでまだ何もできない

にー兄さんにー兄さん

次にAzure Functionsにinteractionをデプロイしていく
開発にはvscodeとAzure Functionsの拡張機能を使い、言語はTypeScriptを使う

にー兄さんにー兄さん

vscodeのAzure Functions拡張機能でCreate New Projectし、HttpTriggerを選択する
interactionという名前で関数を作成する

にー兄さんにー兄さん

いったんテンプレのままデプロイしてみる
デプロイのときにadvancedのメニューを選択すると詳細な設定ができて良い
functionsのプランをプレミアムにしたかったので今回はadvancedにした

にー兄さんにー兄さん

application insightsもちゃんと設定しよう
モニター機能（strem log）が使えないようだ

にー兄さんにー兄さん

Azure FunctionsをPremiumで動かしていた感じ、1日に500円くらいクレジットを消費されていて怖かった......ツライ......
Premiumにすれば常にホットスタートなのでinteractionのタイムアウトによるエラーは起こらないけど、結構取られるな

にー兄さんにー兄さん

とりあえずfunctionsのプロジェクトに

npm install discord-interactions requrst

してパッケージをインストールする

にー兄さんにー兄さん

コードを書く前にAzure PortalのFunctionsのページから構成→アプリケーション設定→新しいアプリケーション設定を追加、によって環境変数を追加する
環境変数にはslash commandのPublic Keyを追加しておく
Application IDは不要。

にー兄さんにー兄さん

VSCodeから選択できるPremiumプランではお金がかかってしまってしょうがない、、、
従量課金だとコールドスタートのせいなのかInteractionがうまく受信できなかったりするのに困っていた
プランはちゃんと選べた方がよいなと思い、Azure PortalからAzure Functionsを作成し、
デプロイセンターからGitHubデプロイを選択した
その時にプランをApp ServiceプランのB1にしてみたところ、なんとなく好調な気がする

このスクラップは2021/07/31にクローズされました