본문으로 건너뛰기

스튜디오 배포

Studio는 브라우저에서 실행되고 실행 중인 애플리케이션에 연결되는 React 기반 SPA(단일 페이지 애플리케이션)입니다.Mastra server.

두 가지 기본 방법으로 Studio를 배포할 수 있습니다.

  • Mastra 플랫폼은 호스팅된 Studio를 제공하며 링크를 통해 팀과 액세스를 공유할 수 있도록 해줍니다.
  • Mastra 서버와 함께 또는 독립형 SPA로 별도로 자체 인프라에서 자체 호스트 Studio

이 페이지에서는 자체 인프라에 Studio를 배포하는 방법을 알아봅니다. 배포에 대한 세부적인 세부 사항은 요구 사항과 설정에 따라 크게 달라질 수 있으므로 사용 가능한 일반 원칙과 옵션을 다루겠습니다.

빠른 시작
빠른 시작에 대한 직접 링크

Studio를 실행하는 가장 쉬운 방법은mastra studio command.

반면mastra dev 는 개발 목적으로 Studio와 API를 모두 실행하지만, mastra studio 의 목적은 이미 실행 중인 Mastra 서버에 연결되는 독립 실행형 정적 UI를 제공하는 것입니다. 이를 통해 원하는 경우 Studio를 Mastra 서버와 분리하여 독립적으로 배포할 수 있습니다.

터미널을 열고 설치하십시오.mastra CLI globally:

npm install -g mastra

실행mastra studio command:

mastra studio

열려 있는localhost:3000 을 브라우저에서 열어 Studio UI를 확인하세요. 기본적으로 http://localhost:4111에서 실행 중인 Mastra 서버에 연결을 시도합니다. 해당 위치에서 서버를 찾지 못하면 Mastra 인스턴스 URL과 API 접두사를 입력할 수 있는 양식이 표시됩니다.

이 명령은 Node의 내장 기능을 사용합니다.http module and serve-handler to serve the static files.

노트

하위 경로에서 Studio를 호스팅하는 경우(예:/agents behind Nginx), set MASTRA_STUDIO_BASE_PATH before starting Studio:

MASTRA_STUDIO_BASE_PATH=/agents mastra studio

그러면 HTML 기본 URL과 정적 자산 라우팅이 업데이트되어 독립형 Studio가 해당 하위 경로에서 올바르게 작동합니다.

마스트라 플랫폼
마스트라 플랫폼에 대한 직접 링크

Mastra 플랫폼에서 호스팅되는 Studio의 경우 다음을 참조하세요.Studio on Mastra platform.

서버 실행
서버 실행에 대한 직접 링크

달리기mastra studio 를 장기 실행 프로세스로 실행하는 것은 다른 Node.js 서비스를 실행하는 것과 다르지 않습니다. 배포에 관한 모든 모범 사례, Tool 및 옵션을 여기에도 동일하게 적용할 수 있습니다. PM2 같은 프로세스 관리자나 Docker 또는 Node.js 애플리케이션을 지원하는 클라우드 서비스를 사용할 수 있습니다. 다른 웹 서비스와 마찬가지로 CORS가 올바르게 구성되어 있고 오류가 모니터링되는지 확인해야 합니다.

경고

Studio가 Mastra 서버에 연결되면 Agent, Workflow 및 Tool에 대한 전체 액세스 권한을 갖게 됩니다. 무단 액세스를 방지하려면 프로덕션 환경(예: 인증, VPN 등)에서 적절하게 보호해야 합니다.

방문Authentication docs to learn more.

API와 함께
API와 함께에 대한 직접 링크

또는 Studio와 함께 Studio를 제공할 수도 있습니다.Mastra server. 이렇게 하면 배포하고 관리할 서비스가 하나뿐입니다.

이렇게 하려면 다음을 실행하세요.mastra build with the --studio flag:

mastra build --studio

그러면.mastra/output/studio 빌드된 Studio 애셋이 포함된 폴더입니다. MASTRA_STUDIO_PATH 환경 변수를 정의하면 Mastra 서버에서 Studio UI도 제공할 수 있습니다.

MASTRA_STUDIO_PATH=.mastra/output/studio node .mastra/output/index.mjs

CDN 사용
CDN 사용에 대한 직접 링크

오토매틱
오토매틱에 대한 직접 링크

일부Cloud providers 는 서버리스 함수와 함께 Studio를 배포하는 옵션을 제공합니다. 현재 지원되는 Provider는 다음과 같습니다:

수동
수동에 대한 직접 링크

UI는 일부 런타임 구성에 의존하므로 빌드된 Studio 자산을 CDN에 직접 배포할 수 없습니다. 약간의 추가 설정을 통해 구축된 자산에서 독립형 SPA를 생성하고 이를 모든 정적 호스팅 서비스에 배포할 수 있습니다.

Vite를 사용하여 SPA를 생성하려면 아래 예를 따르십시오.

  1. 새 폴더를 만들고 새 Node.js 프로젝트를 초기화합니다.

    mkdir studio-spa
    cd studio-spa
    npm init

  2. 설치하다vite and mastra as dependencies:

    npm install vite mastra

  3. 빌드 스크립트를package.json:

    package.json
    {
      "scripts": {
        "build": "vite build"
      }
    }

  4. 자리 표시자 만들기index.html file:

    index.html
    <!doctype html>
    <html>
      <head></head>
      <body></body>
    </html>

  5. 만들기vite.config.js 파일입니다. 빌드된 Studio 애셋을 dist folder and replaces any %%PLACEHOLDER%% HTML의 값을 환경 변수 값으로 바꿉니다.

    vite.config.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 run build

  8. 호스팅 Provider에 다음 주소를 지정하세요.dist folder and deploy!

On this page