> Discover all available pages from the documentation index: https://mastra.zisheng.pro/ko/llms.txt # 스튜디오 배포 Studio는 브라우저에서 실행되고 실행 중인 애플리케이션에 연결되는 React 기반 SPA(단일 페이지 애플리케이션)입니다.[Mastra server](https://mastra.zisheng.pro/ko/docs/deployment/mastra-server). 두 가지 기본 방법으로 Studio를 배포할 수 있습니다. - Mastra 플랫폼은 호스팅된 Studio를 제공하며 링크를 통해 팀과 액세스를 공유할 수 있도록 해줍니다. - Mastra 서버와 함께 또는 독립형 SPA로 별도로 자체 인프라에서 자체 호스트 Studio 이 페이지에서는 자체 인프라에 Studio를 배포하는 방법을 알아봅니다. 배포에 대한 세부적인 세부 사항은 요구 사항과 설정에 따라 크게 달라질 수 있으므로 사용 가능한 일반 원칙과 옵션을 다루겠습니다. ## 빠른 시작 Studio를 실행하는 가장 쉬운 방법은[`mastra studio`](https://mastra.zisheng.pro/ko/reference/cli/mastra) command. 반면`mastra dev` 는 개발 목적으로 Studio와 API를 모두 실행하지만, `mastra studio` 의 목적은 이미 실행 중인 Mastra 서버에 연결되는 독립 실행형 정적 UI를 제공하는 것입니다. 이를 통해 원하는 경우 Studio를 Mastra 서버와 분리하여 독립적으로 배포할 수 있습니다. 터미널을 열고 설치하십시오.`mastra` CLI globally: **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` command: ```bash mastra studio ``` 열려 있는[localhost:3000](http://localhost:3000) 을 브라우저에서 열어 Studio UI를 확인하세요. 기본적으로 `http://localhost:4111`에서 실행 중인 Mastra 서버에 연결을 시도합니다. 해당 위치에서 서버를 찾지 못하면 Mastra 인스턴스 URL과 API 접두사를 입력할 수 있는 양식이 표시됩니다. 이 명령은 Node의 내장 기능을 사용합니다.`http` module and [`serve-handler`](https://www.npmjs.com/package/serve-handler) to serve the static files. > **노트:** 하위 경로에서 Studio를 호스팅하는 경우(예:`/agents` behind Nginx), set `MASTRA_STUDIO_BASE_PATH` before starting Studio: > > ```bash > MASTRA_STUDIO_BASE_PATH=/agents mastra studio > ``` > > 그러면 HTML 기본 URL과 정적 자산 라우팅이 업데이트되어 독립형 Studio가 해당 하위 경로에서 올바르게 작동합니다. ## 마스트라 플랫폼 Mastra 플랫폼에서 호스팅되는 Studio의 경우 다음을 참조하세요.[Studio on Mastra platform](https://mastra.zisheng.pro/ko/docs/mastra-platform/studio). ## 서버 실행 달리기`mastra studio` 를 장기 실행 프로세스로 실행하는 것은 다른 Node.js 서비스를 실행하는 것과 다르지 않습니다. 배포에 관한 모든 모범 사례, Tool 및 옵션을 여기에도 동일하게 적용할 수 있습니다. PM2 같은 프로세스 관리자나 Docker 또는 Node.js 애플리케이션을 지원하는 클라우드 서비스를 사용할 수 있습니다. 다른 웹 서비스와 마찬가지로 CORS가 올바르게 구성되어 있고 오류가 모니터링되는지 확인해야 합니다. > **경고:** Studio가 Mastra 서버에 연결되면 Agent, Workflow 및 Tool에 대한 전체 액세스 권한을 갖게 됩니다. 무단 액세스를 방지하려면 프로덕션 환경(예: 인증, VPN 등)에서 적절하게 보호해야 합니다. > > 방문[Authentication](https://mastra.zisheng.pro/ko/docs/studio/auth) docs to learn more. ### API와 함께 또는 Studio와 함께 Studio를 제공할 수도 있습니다.[Mastra server](https://mastra.zisheng.pro/ko/docs/deployment/mastra-server). 이렇게 하면 배포하고 관리할 서비스가 하나뿐입니다. 이렇게 하려면 다음을 실행하세요.`mastra build` with the `--studio` flag: ```bash mastra build --studio ``` 그러면`.mastra/output/studio` 빌드된 Studio 애셋이 포함된 폴더입니다. `MASTRA_STUDIO_PATH` 환경 변수를 정의하면 Mastra 서버에서 Studio UI도 제공할 수 있습니다. ```bash MASTRA_STUDIO_PATH=.mastra/output/studio node .mastra/output/index.mjs ``` ## CDN 사용 ### 오토매틱 일부[Cloud providers](https://mastra.zisheng.pro/ko/docs/deployment/cloud-providers) 는 서버리스 함수와 함께 Studio를 배포하는 옵션을 제공합니다. 현재 지원되는 Provider는 다음과 같습니다: - [`VercelDeployer`](https://mastra.zisheng.pro/ko/reference/deployer/vercel) ### 수동 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` and `mastra` as dependencies: **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` file: ```html ``` 5. 만들기`vite.config.js` 파일입니다. 빌드된 Studio 애셋을 `dist` folder and replaces any `%%PLACEHOLDER%%` HTML의 값을 환경 변수 값으로 바꿉니다. ```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` file with the necessary environment variables. ```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` folder: **npm**: ```bash npm run build ``` **pnpm**: ```bash pnpm run build ``` **Yarn**: ```bash yarn build ``` **Bun**: ```bash bun run build ``` 8. 호스팅 Provider에 다음 주소를 지정하세요.`dist` folder and deploy!