Inngest + E2B Sandbox로 코드 생성과 실행 환경 붙이기

Inngest 함수 안에서 E2B 샌드박스를 띄우고, Agent Kit으로 프롬프트 기반 코드 스니펫을 생성한 뒤, 생성된 샌드박스 URL과 결과를 반환하는 구성을 정리한다.

---

E2B란?

E2B는 클라우드에서 코드 실행용 격리 환경(샌드박스)을 제공하는 서비스이다. 미리 정의한 Docker 이미지로 템플릿을 만들어 두면, 런타임에 그 템플릿으로 샌드박스를 생성하고 연결할 수 있다.

이번 구성에서는 Next.js + shadcn이 설치된 E2B 템플릿을 만들고, Inngest 함수에서 해당 템플릿으로 샌드박스를 띄운다.

---

전체 흐름

1. 사용자 입력(프롬프트)이 이벤트로 들어온다.
2. Inngest 함수가 E2B 샌드박스를 생성하고 sandboxId를 얻는다.
3. Agent Kit이 프롬프트를 받아 Next.js/React 스니펫 코드를 생성한다.
4. 같은 함수에서 sandboxId로 샌드박스에 재연결해 포트 3000 호스트 URL을 만든다.
5. 생성된 코드(output)와 샌드박스 URL(sandboxUrl)을 반환한다.

---

의존성

• @e2b/code-interpreter: E2B 샌드박스 생성·연결용 클라이언트. Inngest 함수에서 Sandbox.create, Sandbox.connect로 사용한다.

---

Inngest 함수 (helloWorld)

이벤트 test/hello.world가 오면 다음을 수행한다.

• step 1 (get-sandbox-id): E2B 템플릿 jinhoforyt/vibe-nextjs-test로 샌드박스를 생성하고 sandboxId를 반환한다.
• Agent Kit: 프롬프트(event.data.value)를 받아 "Next.js 개발자" 에이전트로 코드 스니펫을 생성한다.
• step 2 (get-sandbox-url): sandboxId로 샌드박스에 재연결한 뒤, 포트 3000에 대한 호스트 URL을 만들어 반환한다.
• 반환: { output, sandboxUrl } (생성된 코드와 샌드박스 접속 URL).

// src/inngest/functions.ts
import { inngest } from './client';
import { openai, createAgent } from '@inngest/agent-kit';
import { Sandbox } from '@e2b/code-interpreter';
import { getSandbox } from './utils';

export const helloWorld = inngest.createFunction(
  { id: 'hello-world' },
  { event: 'test/hello.world' },
  async ({ event, step }) => {
    const sandboxId = await step.run('get-sandbox-id', async () => {
      const sandbox = await Sandbox.create('jinhoforyt/vibe-nextjs-test');
      return sandbox.sandboxId;
    });

    const summarizer = createAgent({
      name: 'code-runner',
      system:
        'You are an expert Next.js developer. You write readable and maintainable code. You write simple Next.js & React snippets.',
      model: openai({ model: 'gpt-4o' }),
    });

    const { output } = await summarizer.run(
      `Write the following snippet: ${event.data.value}`
    );

    const sandboxUrl = await step.run('get-sandbox-url', async () => {
      const sandbox = await getSandbox(sandboxId);
      const host = sandbox.getHost(3000);
      return `https://${host}`;
    });

    return { output, sandboxUrl };
  }
);

정리

• step.run으로 단계를 나누면, 실패 시 해당 단계부터 재시도할 수 있다.
• 샌드박스는 한 번 생성한 뒤 sandboxId로 재연결해서 URL만 조회한다. (같은 샌드박스에서 추가 작업을 붙일 수도 있다.)

---

샌드박스 재연결 (utils)

Inngest 함수는 샌드박스를 생성한 뒤, 다른 step에서 같은 sandboxId로 다시 연결해 URL을 만든다. getSandbox는 그 재연결을 담당한다.

// src/inngest/utils.ts
import { Sandbox } from '@e2b/code-interpreter';

export async function getSandbox(sandboxId: string) {
  const sandbox = await Sandbox.connect(sandboxId);
  return sandbox;
}

• Sandbox.create는 새 샌드박스를 만들고, Sandbox.connect는 이미 있는 샌드박스에 붙을 때 쓴다.

---

E2B 템플릿 (sandbox-templates/nextjs)

E2B에서 "템플릿"은 미리 빌드해 둔 이미지다. 이번 구성에서는 Next.js 15 + shadcn이 설치된 환경을 템플릿으로 둔다.

e2b.toml

템플릿 메타정보와 빌드 설정이다.

• template_name: vibe-nextjs-test. 샌드박스 생성 시 이 이름(또는 팀/이름 조합)으로 지정한다.
• dockerfile: e2b.Dockerfile. 이 Dockerfile로 이미지를 빌드한다.

# sandbox-templates/nextjs/e2b.toml
team_id = "99357145-3a24-4800-9d9e-2448d6ca27a2"
dockerfile = "e2b.Dockerfile"
template_name = "vibe-nextjs-test"
template_id = "vevldiyhufoeqhrzirxb"

e2b.Dockerfile

• 베이스: node:21-slim. Debian 계열에 Node 21이 들어 있다.
• curl: 서버 헬스체크용으로 설치한다.
• 앱 설치: create-next-app@15.3.6으로 Next.js 앱을 만든 뒤, shadcn init 및 shadcn add --all로 컴포넌트를 넣는다.
• compile_page.sh: 빌드 시 실행할 스크립트로 복사하고 실행 권한을 준다.

# sandbox-templates/nextjs/e2b.Dockerfile (요지)
FROM node:21-slim
RUN apt-get update && apt-get install -y curl && ...

COPY compile_page.sh /compile_page.sh
RUN chmod +x /compile_page.sh

WORKDIR /home/user/nextjs-app
RUN npx --yes create-next-app@15.3.6 . --yes
RUN npx --yes shadcn@2.7.0 init --yes -b neutral --force
RUN npx --yes shadcn@2.7.0 add --all --yes
RUN mv /home/user/nextjs-app/* /home/user/ && rm -rf /home/user/nextjs-app

compile_page.sh

템플릿 빌드 단계에서 실행된다. Next.js dev 서버가 뜰 때까지 대기한 뒤, 루트 페이지(/)가 한 번이라도 컴파일되도록 한다.

• ping_server: localhost:3000이 200을 돌려줄 때까지 curl로 폴링한다.
• 백그라운드에서 ping_server를 돌리면서, 포그라운드에서 npx next dev --turbopack으로 dev 서버를 띄운다.

그래서 템플릿 이미지 안에는 "이미 Next 앱이 한 번 실행된 상태"가 포함되고, 샌드박스가 뜰 때도 같은 스크립트로 서버를 빠르게 준비할 수 있다.

# sandbox-templates/nextjs/compile_page.sh (요지)
function ping_server() { ... }  # localhost:3000 이 200 될 때까지 대기
ping_server &
cd /home/user && npx next dev --turbopack

---

실행

Input 을 통해 명령어를 입력하면

각각 step에 맞게 동작을 실행하고,

 

Output을 확인해보면

프로젝트를 확인할 수 있는 sandboxUrl을 반환한다.

url로 들어가보면 실제 nextjs app을 빌드해서 제공한다.

 

정리

• Inngest 함수에서 E2B 템플릿으로 샌드박스를 생성하고, Agent Kit으로 프롬프트 기반 코드 스니펫을 만든다.
• getSandbox(sandboxId)로 같은 샌드박스에 재연결해 포트 3000 URL을 만들어, 생성된 코드와 함께 sandboxUrl로 돌려준다.
• E2B 템플릿은 Next.js 15 + shadcn이 들어 있는 Docker 이미지이고, compile_page.sh로 빌드 시 dev 서버를 띄워 루트 페이지를 컴파일해 둔다.

이 구성을 확장하면, 생성된 스니펫을 샌드박스 안에 쓰고 빌드·실행하는 단계를 같은 Inngest 함수에 이어서 붙일 수 있다.