VS Codeでバックエンドを構築する方法は？

vs codeは、アクティブなmcpサーバーを持つ外部ツールをmcpプロトコルを通じて統合することを可能にします。これにより、プロンプトを使用してideを離れることなく、タスクを実行し、これらのソースからデータを読み取ることができます。 このチュートリアルでは、vs codeを使用してブログプラットフォームのバックエンドとユーザーインターフェース（ui）を構築し、 back4app mcpサーバー にデプロイする方法を学びます。 主なポイント vs codeとmcpサーバーを使用してback4app上にバックエンドを構築する方法を学びます。 back4app上でクラス間の関係がどのようにモデル化されているかを探ります。 back4appが組み込みクラスを使用して認証と役割ベースの認可をどのように実装しているかを探ります。 back4appコンテナを使用して数回のクリックでアプリをデプロイします。 このチュートリアルで構築されたライブブログを このリンク で見ることができます。 前提条件 このチュートリアルに従うには、以下が必要です。 back4appアカウント。まだお持ちでない場合は、 無料でサインアップできます 。 システムにインストールされたvs code。 バックエンド開発の基本的な概念に慣れていること。 プロジェクト概要：ブログ このチュートリアルでは、ブログ投稿を作成、編集、表示、削除できるシンプルなブログを構築します。 また、コメントをサポートし、ブログ投稿を閲覧した人数を追跡します。 デフォルトでback4appが提供する user テーブルに加えて、あなたのブログには3つのテーブルがあります：posts、comments、views。 ブログのユーザーがアカウントを作成すると、back4appは user テーブルに新しいレコードを作成し、以降のリクエストで再利用できる安全なセッショントークンを発行します。認証されたユーザーのみが投稿を公開できます。 ブログ投稿が公開されると、認証されたユーザーと未認証のユーザーの両方が投稿を読むことができます。ただし、コメントできるのは認証されたユーザーのみです。 back4appデータベースからブログ投稿が取得されるたびに、ビュー数が増加します。この機能の乱用を防ぐために、ビューを膨らませることがないようにいくつかのガードレールを実装します。 今、あなたが何を構築するかの大まかなアイデアを持っているので、次のセクションでは、vscodeをback4app mcpサーバーに接続します。 vscodeをback4app mcpサーバーに接続する back4appのウェブサイトに移動し、ページの左上にある new app ボタンをクリックします。「バックエンドを構築」画面で、アプリの名前を入力し、 create ボタンをクリックします。 アプリの概要ページで、 mcp setup ボタンをクリックします。「ideを選択」モーダルで、vs codeをクリックし、画面に表示される指示に従って、vscodeをback4app mcpサーバーに自動的に接続します。 自動インストールオプションに従った場合は、続行する前にマシン上のvs codeを再起動する必要があります。 または、モーダルを手動セクションに切り替えることで、back4app mcpサーバーを手動で接続することもできます（これにより、設定に対するより多くの制御が得られます）。 back4app mcpサーバーをvscodeに接続するための手順に従った後、vscodeウィンドウの検索バーをクリックし、「>mcp list servers」と検索してコマンドを実行すると、利用可能なmcpサーバーのリストとその現在の状態（実行中/停止中）が表示されます。 back4app mcpサーバーをvscodeに接続したので、次のセクションでは、アプリケーション全体を構築するためのプロンプトを作成します。 ブログのバックエンドを構築する vscodeとgithub copilotを使用してバックエンドを作成するには、まずgithub copilotのエージェントモードを有効にする必要があります。エージェントモードを有効にするには、macosでは「 control + command + i” を押してgithub copilotチャットを開き、windowsでは「ctrl + i」を押します。 チャットページで、「ask」ラベルのドロップダウンをクリックし、「agent」モードを選択します。 次に、以下のプロンプトまたはそれに類似したものをgithub copilotに入力して、アプリに必要なクラスを作成します。 上記のプロンプトは、「blogger」という新しいback4appバックエンドを作成し、post、comment、およびviewクラスとその必須プロパティで構成されます。 このプロンプトをcopilotで実行すると、チャットウィンドウに従うステップがログされ、データを変更する各ステップで許可を求められます。 最良の結果を得るために、03 miniやclaude sonnet 4のようなプレミアムモデルでこれらのプロンプトを実行してください。 copilotが必要なクラスを作成した後、ブログのデータを保存するための構造化された方法が得られました。次のセクションでは、アプリの認証を実装します。 認証の実装 アプリの認証要件はシンプルです。ユーザーはブログ投稿を作成し、ブログ投稿にコメントするためにサインアップし、ログインする必要があります。ただし、認証されていなくてもアプリ上のブログ投稿を読むことができます。 以下のプロンプトを使用して、アプリの認証要件を実装できます。 上記のプロンプトは、アプリにユーザー認証を追加します。認証ロジックにより、ユーザーはメール、ユーザー名、パスワードを使用してアカウントを作成できます。サインアップ後、ユーザーは自動的にログインし、ユーザーがログアウトすると、現在のセッションが無効になります。 copilotが認証ロジックを実装した後、ユーザーはサインアップとログインのための安全な方法を持つことになります。次のセクションでは、投稿とコメントを作成するために必要なロジックを実装します。 投稿とコメントの作成 投稿とコメントの作成機能を実装するには、2つのcloud functionsと、認証されたユーザーが投稿を公開し、コメントを追加できるようにするサポートフックを作成する必要があります。 サポートフックを作成するには、以下のプロンプトをcopilotに提供して開始します。 上記のプロンプトは、投稿またはコメントが作成される前に行われるチェック/アクションを実装しています。 投稿の場合、タイトルを使用して一意のスラッグが生成され、その後ステータスが公開に変更され、現在の日付が公開日として設定されます。コメントの場合、リンクされている投稿のコメント数が単純に更新されます。 さて、上記のbeforesaveフックに関連するクラウド関数を、以下のプロンプトまたは類似のもので作成してください。 上記のプロンプトは、ユーザーが投稿やコメントを作成できるようにする2つのクラウドコード関数を公開します。 また、1分あたり5つの投稿作成と15のコメントに制限することで、アプリを悪用から保護します。 以下のプロンプトを使用して、updatecommentクラウド関数を実装できます。 上記のプロンプトは、投稿のコメントを更新する関数を作成します。更新はコメントの作成者のみが行うことができます。 以下のプロンプトを使用して、recordviewクラウド関数を実装できます。 上記のプロンプトは、postクラスにafterfindトリガーを作成します。バックエンドが単一の投稿（そのobjectidで取得された）を返すたびに、トリガーはその投稿（および現在のユーザー、ログインしている場合）を指す新しいviewレコードを自動的に作成し、投稿のviewcountを増加させます。クエリが複数の投稿を返す場合、トリガーは何もしません。 これで、ブログの機能のほとんどが完了しました。次に、ユーザーが自分の投稿を削除できる機能を実装します。 投稿の削除 投稿を削除するには、ユーザーがその投稿を作成したものでなければなりません。投稿が削除されると、その関連コンテンツ（views、comments）も一緒に削除されます。 以下のプロンプトを使用して、投稿を削除する機能を実装できます。 上記のプロンプトは、投稿を削除するために必要なロジックを実装します。 これらの追加により、バックエンドはコンテンツのライフサイクル全体をカバーし、著者が公開、修正、削除できるようにし、読者が議論できるようにし、各投稿の正確なビュー統計を保持します。次のセクションでは、アプリケーションのuiを生成します。 フロントエンドの生成 あなたは、back4appでバックエンドを作成する際にcopilotが持つコンテキストを活用して、アプリのスキーマと要件に合ったフロントエンドを作成するように依頼できます。 以下のプロンプトを使用して、予約スケジューラーを実現できます 上記のプロンプトまたは類似のものを使用すると、copilotはバックエンドのスキーマに合ったフロントエンドを生成し、それをバックエンドに接続します。 copilotが提供する指示に従ってアプリを実行し、必要な調整を行ってください。プロジェクトが完了したので、次のセクションではback4appコンテナにデプロイします。 back4appコンテナにアプリをデプロイする back4appコンテナを使用すると、dockerfileとgithubリポジトリを使ってアプリを簡単にデプロイできます。 back4appコンテナにアプリをデプロイするには、まずリポジトリにdockerfileを含める必要があります。以下のプロンプトを使用してclaudeに生成を依頼できます または、以下のdockerfileを使用することもできます dockerfileを追加してgithubにプッシュした後、back4appアプリのダッシュボードに移動し、 ダッシュボード のドロップダウンをクリックし、 webデプロイメントプラットフォーム オプションを選択します。 デプロイメントページで、「webアプリをデプロイ」ボタンをクリックし、デプロイしたいリポジトリへのback4appのアクセスを許可します。 デプロイしたいアプリを選択し、デプロイメントの詳細を入力して、「 デプロイ 」ボタンをクリックします。 ボタンをクリックするとデプロイメントプロセスが開始され、完了するとアプリへのライブurlが取得できます。 このチュートリアルで構築したライブブログは、 このリンク を使用して見ることができます。 結論 この記事では、back4app mcpサーバーとgithub copilotを使用して完全なブログプラットフォームを構築し、その後back4app containersでデプロイしました。 これは、アイデアからローンチまで最小限のオーバーヘッドで移行できるback4appのツールのフルスイートを示しています。 次のステップとして、ソーシャルメディア統合、新しいコメントの自動メール通知、高度な検索機能、または投稿のエンゲージメントと読者の行動に関する分析などの機能でプロジェクトを拡張できます。 これらのすべての強化は、同じback4appワークフローに自然にフィットします：github copilotを使用して新しいクラスやcloud functionsを設計・定義し、beforesaveフックでそれらを保護し、back4app containersを通じて更新を展開します。このアプローチにより、ユーザーを中断させることなくブログに新しい機能を追加できます。