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」というバックエンドを作成します。最初に、次のフィールドを持つpostクラスを追加します：タイトルと本文は必須の文字列、ユニークなスラッグ、back4appのバケットに保存されたオプションのheroimageファイル、組み込みのuserクラスへの著者ポインタ、commentcountとviewcountのカウンタ（すべて0から開始）、ドラフトまたは公開に制限されたステータス文字列、ドラフトが最初に公開されるときに自動的に設定されるpublishedat日付。次に、コンテンツ文字列、著者ポインタ、および投稿ポインタを保存するcommentクラスを作成します。オプションのユーザーと必須の投稿ポインタを持つ各ページビューを記録するviewクラスを追加します。 上記のプロンプトは、「blogger」という新しいback4appバックエンドを作成し、post、comment、およびviewクラスとその必須プロパティで構成されます。 このプロンプトをcopilotで実行すると、チャットウィンドウに従うステップがログされ、データを変更する各ステップで許可を求められます。 最良の結果を得るために、03 miniやclaude sonnet 4のようなプレミアムモデルでこれらのプロンプトを実行してください。 copilotが必要なクラスを作成した後、ブログのデータを保存するための構造化された方法が得られました。次のセクションでは、アプリの認証を実装します。 認証の実装 アプリの認証要件はシンプルです。ユーザーはブログ投稿を作成し、ブログ投稿にコメントするためにサインアップし、ログインする必要があります。ただし、認証されていなくてもアプリ上のブログ投稿を読むことができます。 以下のプロンプトを使用して、アプリの認証要件を実装できます。 組み込みのuserクラスを拡張してbloggerにユーザー認証を追加します。 すべてのアカウントは、`username`、少なくとも8文字の長さの`password`、および`email`アドレスを提供する必要があります。 各保存の前に、cloud codeはメールアドレスを小文字に変換し、 他のアカウントがすでにそれを使用していないか確認します。アドレスが使用中の場合、保存は拒否されます。 同じトリガーがパスワードの長さルールも強制します。 フロントエンドに4つのcloud functionsを公開します： \ signup ユーザー名、メール、パスワードを受け入れます。新しいレコードを作成し、 	ユーザーを返し、呼び出し元が即座に認証されるようにセッショントークンを含めます。 \ login ユーザー名またはメールとパスワードを受け取り、 	successの場合、ユーザーオブジェクトとトークンを返します。 \ logout 現在のセッショントークンを無効にします。 上記のプロンプトは、アプリにユーザー認証を追加します。認証ロジックにより、ユーザーはメール、ユーザー名、パスワードを使用してアカウントを作成できます。サインアップ後、ユーザーは自動的にログインし、ユーザーがログアウトすると、現在のセッションが無効になります。 copilotが認証ロジックを実装した後、ユーザーはサインアップとログインのための安全な方法を持つことになります。次のセクションでは、投稿とコメントを作成するために必要なロジックを実装します。 投稿とコメントの作成 投稿とコメントの作成機能を実装するには、2つのcloud functionsと、認証されたユーザーが投稿を公開し、コメントを追加できるようにするサポートフックを作成する必要があります。 サポートフックを作成するには、以下のプロンプトをcopilotに提供して開始します。 bloggerアプリを拡張して、 post beforesave フックを追加し、 各新しい投稿のタイトルをurlフレンドリーなスラッグに変換します（小文字、スペースをダッシュに置き換え、記号を削除） その後、postクラスをチェックしてスラッグがユニークであることを確認します。 投稿が作成されるとき、フックは`status`を `"published"`に設定し、`publishedat`に現在の日付を記録します。 comment aftersave フックを添付し、コメントが保存された直後に、親投稿の `commentcount`をインクリメントして、合計が正確であることを保証します。 上記のプロンプトは、投稿またはコメントが作成される前に行われるチェック/アクションを実装しています。 投稿の場合、タイトルを使用して一意のスラッグが生成され、その後ステータスが公開に変更され、現在の日付が公開日として設定されます。コメントの場合、リンクされている投稿のコメント数が単純に更新されます。 さて、上記のbeforesaveフックに関連するクラウド関数を、以下のプロンプトまたは類似のもので作成してください。 フロントエンド用に2つのクラウド関数を公開します。最初の関数、createpostは、 `title`、`body`、およびオプションの`heroimage`を受け取り、呼び出し元がログインしていることを要求し、呼び出し元を`author`に割り当て、提供された場合は画像を添付し、投稿を保存し、保存されたオブジェクトを返します。 2つ目の関数、 addcomment は、認証を必要とし、`postid`と`content`を受け取り、投稿が存在することを確認し、投稿と呼び出し元の両方にリンクされたコメントを作成し、それを保存して新しいコメントを返します。 悪用を防ぐために、各認証ユーザーの createpost への呼び出しを5回、 addcomment への呼び出しを1分あたり15回に制限します。 上記のプロンプトは、ユーザーが投稿やコメントを作成できるようにする2つのクラウドコード関数を公開します。 また、1分あたり5つの投稿作成と15のコメントに制限することで、アプリを悪用から保護します。 以下のプロンプトを使用して、updatecommentクラウド関数を実装できます。 認証を必要とする updatecomment クラウド関数を実装し、コメントのobjectidと修正された内容を受け取り、コメントを取得して呼び出し元がその著者であることを確認します。新しい内容を適用して保存します; comment aftersaveフックは、コメントがすでに存在するため、commentcountを変更しません。編集されたコメントを返します。 上記のプロンプトは、投稿のコメントを更新する関数を作成します。更新はコメントの作成者のみが行うことができます。 以下のプロンプトを使用して、recordviewクラウド関数を実装できます。 post クラスにafterfindトリガーを追加し、バックエンドが`objectid`で単一の投稿を返すたびに、自動的にページビューを記録します。クエリが複数の投稿を返すフィードまたは検索の場合、トリガーは何もしないで終了します。トリガー内で、`request results\[0]`から投稿を取得し、新しい view オブジェクトを作成し、その`post`ポインタをその投稿に設定し、利用可能な場合は`viewer`ポインタを`request user`に設定し、ビューを保存し、`post increment("viewcount")`を呼び出し、投稿を保存し、元のクエリを完了するために`request results`を返します。 上記のプロンプトは、postクラスにafterfindトリガーを作成します。バックエンドが単一の投稿（そのobjectidで取得された）を返すたびに、トリガーはその投稿（および現在のユーザー、ログインしている場合）を指す新しいviewレコードを自動的に作成し、投稿のviewcountを増加させます。クエリが複数の投稿を返す場合、トリガーは何もしません。 これで、ブログの機能のほとんどが完了しました。次に、ユーザーが自分の投稿を削除できる機能を実装します。 投稿の削除 投稿を削除するには、ユーザーがその投稿を作成したものでなければなりません。投稿が削除されると、その関連コンテンツ（views、comments）も一緒に削除されます。 以下のプロンプトを使用して、投稿を削除する機能を実装できます。 著者が自分の作品を削除できるように、 deletepost クラウド関数を作成します。呼び出し元はログインしている必要があり、投稿のobjectidを渡す必要があります。最初に投稿を取得し、その著者がrequest userと等しいことを確認します。そうでない場合は、リクエストを拒否します。所有権が確認された後、投稿レコードを削除し、削除された投稿と一致するポインタを持つすべての関連するcommentsとviewsを削除します。最後に、削除されたレコードの数とともに簡単な成功メッセージを返します。 上記のプロンプトは、投稿を削除するために必要なロジックを実装します。 これらの追加により、バックエンドはコンテンツのライフサイクル全体をカバーし、著者が公開、修正、削除できるようにし、読者が議論できるようにし、各投稿の正確なビュー統計を保持します。次のセクションでは、アプリケーションのuiを生成します。 フロントエンドの生成 あなたは、back4appでバックエンドを作成する際にcopilotが持つコンテキストを活用して、アプリのスキーマと要件に合ったフロントエンドを作成するように依頼できます。 以下のプロンプトを使用して、予約スケジューラーを実現できます 私のback4appアカウントのblogアプリケーションのスキーマに合った最小限のフロントエンドを生成し、javascript parse sdkを使用してフロントエンドをバックエンドに接続します。 上記のプロンプトまたは類似のものを使用すると、copilotはバックエンドのスキーマに合ったフロントエンドを生成し、それをバックエンドに接続します。 copilotが提供する指示に従ってアプリを実行し、必要な調整を行ってください。プロジェクトが完了したので、次のセクションではback4appコンテナにデプロイします。 back4appコンテナにアプリをデプロイする back4appコンテナを使用すると、dockerfileとgithubリポジトリを使ってアプリを簡単にデプロイできます。 back4appコンテナにアプリをデプロイするには、まずリポジトリにdockerfileを含める必要があります。以下のプロンプトを使用してclaudeに生成を依頼できます 私のブログアプリケーションのui用のdockerファイルを生成します。 または、以下のdockerfileを使用することもできます \# 公式の軽量nginx alpineイメージから開始 from nginx\ alpine \# デフォルトのコンテンツを削除 run rm rf /usr/share/nginx/html/ \# 静的サイト（html、css、アセット）をコンテナにコピー copy /usr/share/nginx/html/ \# ポート80を公開 expose 80 \# nginxをフォアグラウンドで起動 cmd \["nginx", " g", "daemon off;"] dockerfileを追加してgithubにプッシュした後、back4appアプリのダッシュボードに移動し、 ダッシュボード のドロップダウンをクリックし、 webデプロイメントプラットフォーム オプションを選択します。 デプロイメントページで、「webアプリをデプロイ」ボタンをクリックし、デプロイしたいリポジトリへのback4appのアクセスを許可します。 デプロイしたいアプリを選択し、デプロイメントの詳細を入力して、「 デプロイ 」ボタンをクリックします。 ボタンをクリックするとデプロイメントプロセスが開始され、完了するとアプリへのライブurlが取得できます。 このチュートリアルで構築したライブブログは、 このリンク を使用して見ることができます。 結論 この記事では、back4app mcpサーバーとgithub copilotを使用して完全なブログプラットフォームを構築し、その後back4app containersでデプロイしました。 これは、アイデアからローンチまで最小限のオーバーヘッドで移行できるback4appのツールのフルスイートを示しています。 次のステップとして、ソーシャルメディア統合、新しいコメントの自動メール通知、高度な検索機能、または投稿のエンゲージメントと読者の行動に関する分析などの機能でプロジェクトを拡張できます。 これらのすべての強化は、同じback4appワークフローに自然にフィットします：github copilotを使用して新しいクラスやcloud functionsを設計・定義し、beforesaveフックでそれらを保護し、back4app containersを通じて更新を展開します。このアプローチにより、ユーザーを中断させることなくブログに新しい機能を追加できます。