前回の記事：⑤：機能追加１弾目はこちら
ここまで5回にわたって記事を書いてきました。
それでも、正直なところ「VPSである意味がまだ弱い」と、自分自身感じ続けていました。
今回は、VPSならではの機能を追加していく回です。
ブラウザからアクセスしなくても、外部サービスを介してチャットを繰り返せるようにすることで、その「意味」を見出していく記事になります。
Tomoya24時間常駐するシステムを、外部サービスから動かしてみる
これには少しわくわくしています。
なぜDiscord Bot化なのか、改めて整理する
Webサイト上での会話継続は、理屈の上ではサーバーレスでも実現できてしまう、という弱さがありました。
実際、自分が運営しているScriptSpeakも、チャットではありませんが、ブラウザから音声を作成して活用できるサービスで、サーバーレスの仕組みで動いています。
つまり、今の段階のシステムだけであれば、同じようにサーバーレスでも十分構築できてしまうのです。
もう少し先をイメージしてAIに相談してみたところ、たどり着いたのがコミュニケーションツールである「Discord」という外部サービスから動かす、という方向でした。
「常時待ち構えていて、いつ呼びかけても即座に応答できる」という性質にこそ、VPSの強みが表れるはずだと、改めて考え直しました。
テキストBotとボイスBot、範囲を決める
VPSと外部サービスを接続すること自体、今回が初めての経験だったので、少し慎重に進めることにしました。
まずは「テキストBot」——メッセージを送ると、テキストと音声ファイルで返信が来る形で、一通りのシステムを構築する方針にしました。
Tomoyaこの判断は良かったと思っています。
開発において、あれもこれもと最初から手を広げてしまうと、収拾がつかなくなる心配があったからです。
最初は慎重に、慣れてきたら少しずつ大胆に、というやり方を、これからも大事にしていきたいと思いました。
Discord Developer Portalでの準備
Tomoyaまずは、Discord側の準備をAIにサポートしてもらいながら進めていきました。
- Discord Developer Portalにアクセスし、Discordアカウントでログイン
- 「New Application」から、新しいアプリケーションを作成（名前は好きなもの、例：「VoiceChatBot」）
- 左メニューの「Bot」を開き、「Add Bot」（すでに追加されている場合はそのまま）
- 「Reset Token」→「Yes, do it!」で、Botのトークン（今回の【鍵】にあたるもの）を発行し、コピーして保管する
注意：このトークンも、これまでのAPIキーやWebhook URLと同じ扱いです。記事には載せず、.envで管理してください。
同じ「Bot」の設定画面の中に、「Privileged Gateway Intents」という項目があります。
ここで「MESSAGE CONTENT INTENT」を必ずONにしてください。
これがオフのままだと、Botはメッセージの中身を読み取ることができません（Discord側のセキュリティ強化により、これは明示的にONにする必要があります）。
- 左メニューの「OAuth2」→「URL Generator」を開く
- 「SCOPES(範囲)」で「bot」にチェック 「BOT PERMISSIONS(Bot 権限)」で、最低限として以下にチェック
- Send Messages（メッセージを送る）
- Read Message History（メッセージを読む）
- Attach Files（音声ファイルを添付する）
- 一番下に生成されたURLをコピーし、ブラウザで開いて、Webhookを設定したのと同じサーバーに招待する
Discord自体のアカウントは持っていたものの、開発者向けの高度な機能を使うのは初めてで、恐る恐る進めた部分もありましたが、AIのサポートのおかげでスムーズに進められました。ここで得た知識は、今後もDiscordを何かの開発に組み込むきっかけになりそうで、視野が少し広がった感覚があり、嬉しかったです。
Botのトークンを発行し、.env.localに追加します。後のVPSにもnanoエディタから環境変数にセットする予定です。
DISCORD_BOT_TOKEN="発行したトークン"
DISCORD_BOT_SPEAKER_ID=52既存の資産をそのまま再利用できた喜び
必要なライブラリを追加し
npm install discord.jsCursorには、次のような方針で実装を依頼しました。
discord.jsを使って、Discord上でテキストメッセージに応答するBotを
実装してください。
・Botがメッセージを受け取ったら、既存のGemini応答処理にそのまま渡す
・その応答をVOICEVOXの音声合成処理に渡し、音声ファイルを生成する
・テキストと音声ファイルの両方をDiscordのチャンネルに返信する
・会話履歴はチャンネル・ユーザーごとにメモリ上で保持する
・Bot自身のメッセージには反応しないようにする
・既存のGemini・VOICEVOXの関数は書き直さず、そのまま再利用するポイントは、Gemini・VOICEVOXの処理を一切書き直さなかったことです。
これまでの記事で作ってきた「音声メッセージ→Gemini→VOICEVOX」という処理を、Discord用に必要な環境変数を追加しただけで、そのまま呼び出せる形にしてもらいました。
ローカルで動かしてみます。Discordの該当サーバーでチャットして確認。
npm run discord-botDiscordでメッセージを送ってみると、何事もなく、無事に音声付きで返ってきました。
作り直しなしで、これまでの積み重ねがそのまま活きたことに、大きな喜びを感じました。ローカルで動作を確認できたので、次はいよいよVPSに反映していきます。しかし、ここでアクシデントが発生しました。
以下のリンクから月額プランを契約すると、初月は半額で利用できます。コストが心配な方でも、最初の1か月は最低10ドルから試せるので、気軽に始めやすいと思います（解約も簡単にできます）。
pm2で管理する仕組みは同じ、でも中身は全く違う
Tomoyaこれは実装を進める中で驚いたポイントです。
Discord Botも、これまでと同じようにpm2で常駐化していくのですが、今回はポート開放もファイアウォールの設定も一切必要ありませんでした。
pm2 start npm --name discord-bot -- run discord-bot
pm2 list
pm2 save- これまでのWebサーバー（Next.jsアプリ）
-
「外部からのアクセスを待つ」仕組み。ブラウザからURL検索でアクセス。
- Discord Bot
-
「自分からDiscordに接続しにいき、その接続を繋ぎっぱなしにする」仕組み。
常駐化はしているのに、ブラウザでアクセスして使うものではない——ここは、最初は少し理解が難しいと感じたポイントでした。
AIのサポートがなければ迷っていたと思いますが、案内された通りに進めることで、次の確認で無事に動作していることが確認でき、ほっとしました。
VPSでのトラブル、そして解決
ローカルでは問題なく動いたので、同じようにVPSへ反映させようとしたところ
git pullができなくなるという壁にぶつかりました。
error: Your local changes to the following files would be overwritten by merge:
frontend/next-env.d.tsnext-env.d.tsというNext.jsが自動生成するファイルが、VPS側とGitHub側の両方で更新されており、衝突を起こしていたことでした。
「VPS側の（自動生成された）変更を、先に消すか確定するかしないと上書きできません」と、Gitに止められている状態だったのです。
TomoyaVPSを扱っていると、こういうエラーも起きるのかと、正直驚きました。
何となく「新しい方でどんどん上書きされていくもの」だと思い込んでいましたが、自動生成ファイルに関しては、どちらか一方に決めてあげる必要がある
Tomoyaこれは今回のテーマを通して、新しく学んだポイントでした。
対処は、以下のコマンドで解決できました。
git checkout -- next-env.d.ts
git pull
続けて表示されたMissing script: "discord-bot"というエラー
実はまだgit pullが正しく完了していない状態のまま、pm2 startを実行してしまっていたことが原因でした。
git pullが無事に成功した後は、このエラーも自然と解消されました。
今後同じ問題が起きないよう、.gitignoreにnext-env.d.tsを追加する対応も、あわせて行っています。
npm install
npm run build
echo $?
pm2 restart discord-bot
pm2 save
ついに到達した瞬間
こうして、VPS上で音声生成チャットAIを構築し、Discordを介して会話ができる状態に、ついに到達しました！！
これこそが「VPS上である意味」なのだと思うと、大きな達成感を覚えました。
実際に使うかどうかはまだわかりませんが、気が向いた時にふとDiscordから話しかければ、雀松朱司や春歌ナナの声で返事が返ってくる
ローカルPCの電源を切っていても、ブラウザを開いていなくても、です。
これは、気軽に使えて、かつ「常に起きていてくれる」という安心感があり、想像していた以上に良い体験だと感じています。
シリーズを振り返って
今回のテーマは、段階を踏んで少しずつ改良を重ねながら、自分が思い描いていたイメージに近づけていけたと感じています。1本1本の記事は長くなってしまいましたが、その分の密度で書けているので、自分自身の成長にもつながっているのではないかと思います。
TomoyaVPSを使う以上は、VPSならではのシステムを作ることを、これからも目指していきたいです！
引き続き検証と学習を重ねながら、このブログで共有していこうと思うので、温かい目で見守っていただけると嬉しいです。感想やコメントがあれば、どんな内容でも大歓迎です。
▼これまでのシリーズ記事の全て▼
①：テーマ選定
②：基盤構築（土台作り）
③：実装編（MVP）
④：VPSに反映(MVP)
⑤：VPS上である意味の為に機能追加(発展)
Tomoyaこれがこのシリーズの元になったサービスです！
※自分が運営しているサービスです
次回予告
正直、まだ次のテーマは決まっていません。またAIと相談しながら、次に検証してみたいテーマを見つけていこうと思います。しばらくお待ちください。
以下のリンクから月額プランを契約すると、初月は半額で利用できます。コストが心配な方でも、最初の1か月は最低10ドルから試せるので、気軽に始めやすいと思います（解約も簡単にできます）。
他のVPSは「さくらインターネットから！」
前回のおすすめ記事はこちらから
VPSを使った24時間稼働システムを作成した記事はこちら
コメント