Mocxykit

🚀 mocxy ローカル開発環境プロキシツール

mocxyは強力なローカル開発環境プロキシツールで、いくつかの便利な機能をサポートしています。このツールは、開発者がローカル環境での作業をより効率的に行うのを支援します。

🚀 クイックスタート

機能概要

mocxyは、以下のような実用的な特性を備えた強力なローカル開発環境プロキシツールです。

• Ngrok 公開アクセス
• 環境変数管理
• MCP データリクエストサポート
• Faker MOCK データ生成
• 静的リソースキャッシュ

使用ガイド

Ngrok 公開アクセス

Ngrokを使用して公開アクセスを実現するには、以下の手順に従ってください。

1. 設定ページにアクセスします: http://localhost:3000/config
2. 右上隅の設定アイコンをクリックします。
3. Ngrok コンソールで無料アカウントを登録します。
4. Ngrokアカウントのauthtokenをコピーします。
5. authtokenを設定ウィンドウに貼り付けます。
6. 「外部アクセスを有効にする」をクリックします。

⚠️ 重要提示

• 無料版のNgrokには使用制限があります。
• 新しいトンネルを作成するたびに、公開URLが再生成されます。

環境変数管理

環境変数機能を有効にするには、以下の手順に従ってください。

1. DefinePluginを使用したwebpack構成を使用します。
2. webpackにWebpackProxyMockPluginを追加します。
3. または、viteプラグインでは、viteProxyMockPluginをvite.config.jsに追加します。

MCP データリクエストサポート

AIプログラミングでMCPを使用してデータをリクエストするには、以下の例を参考にしてください。

💻 使用例

基本的な使用法

// 在 @todoList.tsx 中实现 todo 列表功能

AIは自動的に api/todo-list インターフェースのデータ構造をリクエストし、返された結果に基づいてコードを生成します。

高度な使用法

// 请求 api/todo-list 接口，处理错误反馈

AIはエラーデータを取得してその構造を分析し、その後、エラーメッセージを表示するポップアップを生成します。

Faker MOCK データサポート

Faker MOCK機能は、柔軟なデータ生成能力を提供します。

1. MOCKデータ編集ページで「ランダムデータを返す」をチェックします。
2. ランダム化する必要があるフィールドパスを入力します。
3. サポートされる構文形式は以下のとおりです。
   • data：データオブジェクト全体をランダム化します。
   • data.list：listフィールドのみをランダム化します。
   • data.list<100>：100件のランダムデータを生成します。
   • data,page.total：複数のフィールドをランダム化します。

静的リソースキャッシュ

mocxyは、効率的な静的リソースキャッシュ機能を提供します。

• 自動キャッシュ：静的リソースを迅速にロードします。
• 多段階キャッシュメカニズム：アクセス速度を向上させます。
• キャッシュクリア戦略の設定可能：手動または自動でキャッシュをクリアできます。

環境変数管理

環境変数は、以下の操作をサポートしています。

1. 複数の環境構成を作成します。
2. 環境変数を特定のプロキシにバインドします。
3. 異なる環境を迅速に切り替えます。
4. 環境を切り替えるときにキャッシュをクリアすることができます。

ヘルプの取得

さらなるヘルプが必要な場合は、開発者メールに連絡するか、公式ドキュメントを参照してください。

⚠️ 重要提示

本文書はサンプル内容です。具体的な機能と操作は、実際のツールに準拠してください。