> Discover all available pages from the documentation index: https://mastra.zisheng.pro/ja/llms.txt # Studio のデプロイ Studio はブラウザーで動作し、実行中の [Mastra サーバー](https://mastra.zisheng.pro/ja/docs/deployment/mastra-server)に接続する React ベースのシングルページアプリケーション（SPA）です。 Studio の主なデプロイ方法は2つあります。 - Mastra platform のホステッド Studio を使用し、リンクでチームにアクセスを共有する - Mastra サーバーと同じ場所、または独立した SPA として別の場所に Studio をセルフホストする このページでは、Studio を独自のインフラストラクチャにデプロイする方法を説明します。デプロイの詳細は要件や構成によって大きく異なるため、ここでは一般的な原則と利用可能な選択肢を取り上げます。 ## クイックスタート Studio を実行する最も簡単な方法は、[`mastra studio`](https://mastra.zisheng.pro/ja/reference/cli/mastra) コマンドです。 `mastra dev` は開発用の Studio と API の両方を実行します。一方、`mastra studio` は、すでに実行中の Mastra サーバーに接続する独立した静的 UI を提供します。必要に応じて Studio を Mastra サーバーとは別にデプロイできます。 ターミナルを開き、`mastra` CLI をグローバルにインストールします。 **npm**: ```bash npm install -g mastra ``` **pnpm**: ```bash pnpm add -g mastra ``` **Yarn**: ```bash yarn global add mastra ``` **Bun**: ```bash bun add --global mastra ``` `mastra studio` コマンドを実行します。 ```bash mastra studio ``` ブラウザーで [localhost:3000](http://localhost:3000) を開くと Studio UI が表示されます。デフォルトでは、`http://localhost:4111` で実行中の Mastra サーバーへの接続を試みます。見つからない場合は、Mastra インスタンスの URL と API プレフィックスを入力するフォームが表示されます。 このコマンドは Node の組み込み `http` モジュールと [`serve-handler`](https://www.npmjs.com/package/serve-handler) を使用して静的ファイルを配信します。 > **注記:** Studio をサブパス（Nginx の背後にある `/agents` など）でホストする場合は、Studio を起動する前に `MASTRA_STUDIO_BASE_PATH` を設定します。 > > ```bash > MASTRA_STUDIO_BASE_PATH=/agents mastra studio > ``` > > これにより HTML のベース URL と静的アセットのルーティングが更新され、独立した Studio がそのサブパスで正しく動作します。 ## Mastra platform Mastra platform のホステッド Studio については、[Mastra platform の Studio](https://mastra.zisheng.pro/ja/docs/mastra-platform/studio) を参照してください。 ## サーバーを実行する `mastra studio` を長時間実行するプロセスとして運用する方法は、他の Node.js サービスと変わりません。デプロイに関する一般的なベストプラクティス、ツール、選択肢をそのまま適用できます。PM2 などのプロセスマネージャー、Docker、Node.js アプリケーションに対応するクラウドサービスを利用できます。他の Web サービスと同様に、CORS を正しく設定し、エラーを監視してください。 > **警告:** Studio を Mastra サーバーに接続すると、Agent、Workflow、Tool に対するフルアクセスが与えられます。不正アクセスを防ぐため、本番環境では認証や VPN などを使用して適切に保護してください。 > > 詳しくは[認証](https://mastra.zisheng.pro/ja/docs/studio/auth)ドキュメントを参照してください。 ### API と同じ場所で実行する また、[Mastra サーバー](https://mastra.zisheng.pro/ja/docs/deployment/mastra-server)と同じ場所で Studio を配信することもできます。この方法なら、デプロイして管理するサービスは1つだけです。 これを行うには、`--studio` フラグを指定して `mastra build` を実行します。 ```bash mastra build --studio ``` ビルドされた Studio アセットを含む `.mastra/output/studio` フォルダーが作成されます。`MASTRA_STUDIO_PATH` 環境変数を定義すると、Mastra サーバーから Studio UI も配信できます。 ```bash MASTRA_STUDIO_PATH=.mastra/output/studio node .mastra/output/index.mjs ``` ## CDN を使用する ### 自動 一部の[クラウド Provider](https://mastra.zisheng.pro/ja/docs/deployment/cloud-providers) には、サーバーレス関数とともに Studio をデプロイするオプションがあります。現在対応している Provider は次のとおりです。 - [`VercelDeployer`](https://mastra.zisheng.pro/ja/reference/deployer/vercel) ### 手動 Studio UI は一部のランタイム設定に依存するため、ビルド済みの Studio アセットを CDN に直接デプロイすることはできません。少し設定を追加すれば、ビルド済みアセットから独立した SPA を作成し、任意の静的ホスティングサービスにデプロイできます。 次の例に従って、Vite を使用した SPA を作成します。 1. 新しいフォルダーを作成し、Node.js プロジェクトを初期化します。 **npm**: ```bash mkdir studio-spa cd studio-spa npm init ``` **pnpm**: ```bash mkdir studio-spa cd studio-spa pnpm init ``` **Yarn**: ```bash mkdir studio-spa cd studio-spa yarn init ``` **Bun**: ```bash mkdir studio-spa cd studio-spa bun init ``` 2. `vite` と `mastra` を依存関係としてインストールします。 **npm**: ```bash npm install vite mastra ``` **pnpm**: ```bash pnpm add vite mastra ``` **Yarn**: ```bash yarn add vite mastra ``` **Bun**: ```bash bun add vite mastra ``` 3. `package.json` にビルドスクリプトを追加します。 ```json { "scripts": { "build": "vite build" } } ``` 4. プレースホルダーとなる `index.html` ファイルを作成します。 ```html ``` 5. `vite.config.js` ファイルを作成します。このファイルは、ビルド済みの Studio アセットを `dist` フォルダーにコピーし、HTML 内の `%%PLACEHOLDER%%` 値を環境変数の値に置き換えます。 ```js import { defineConfig, loadEnv } from 'vite' import { readFileSync, cpSync, writeFileSync } from 'node:fs' import { resolve, join } from 'node:path' const studioDir = resolve(import.meta.dirname, 'node_modules/mastra/dist/studio') export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), 'MASTRA_') return { plugins: [ { name: 'mastra-studio', closeBundle() { const outDir = resolve(import.meta.dirname, 'dist') cpSync(studioDir, outDir, { recursive: true }) const indexPath = join(outDir, 'index.html') const html = readFileSync(indexPath, 'utf-8') writeFileSync( indexPath, html.replaceAll(/%%(\w+)%%/g, (_, key) => env[key] ?? ''), ) }, }, ], build: { emptyOutDir: true, }, } }) ``` 6. 必要な環境変数を指定した `.env` ファイルを作成します。 ```env MASTRA_SERVER_HOST=localhost MASTRA_SERVER_PORT=4111 MASTRA_SERVER_PROTOCOL=http MASTRA_API_PREFIX=/api MASTRA_HIDE_CLOUD_CTA=false MASTRA_CLOUD_API_ENDPOINT= MASTRA_EXPERIMENTAL_FEATURES=false MASTRA_TEMPLATES=false MASTRA_TELEMETRY_DISABLED=true MASTRA_REQUEST_CONTEXT_PRESETS= MASTRA_THEME_TOGGLE=false MASTRA_EXPERIMENTAL_UI=false MASTRA_STUDIO_BASE_PATH= ``` 7. ビルドスクリプトを実行し、`dist` フォルダーに静的ファイルを生成します。 **npm**: ```bash npm run build ``` **pnpm**: ```bash pnpm run build ``` **Yarn**: ```bash yarn build ``` **Bun**: ```bash bun run build ``` 8. ホスティング Provider のデプロイ対象を `dist` フォルダーに設定します。