Version: v1

For the complete documentation index, see llms.txt

Part 4: Production deployment

이 섹션에서는 리더보드 프론트엔드를 Vercel에 배포합니다.

Vercel build configuration

Vercel 빌드 설정을 만듭니다. 이 설정은 Vercel에게 모노레포를 빌드하는 방법을 알려줍니다. 먼저 컨트랙트와 API 패키지를 컴파일한 다음, Vite 프론트엔드를 빌드합니다.

touch vercel.json

buildCommand는 각 워크스페이스 패키지의 TypeScript 컴파일을 순서대로 연결합니다. outputDirectory는 Vite 빌드 출력을 가리킵니다.

{
  "buildCommand": "cd contract && npm run build && cd ../api && npm run build && cd ../leaderboard-ui && npm run build",
  "outputDirectory": "leaderboard-ui/dist",
  "installCommand": "npm install",
  "framework": null
}

Compiled contract output

Vercel에는 Compact 컴파일러가 설치되어 있지 않습니다. contract/managed/가 .gitignore에 포함되지 않도록 하세요. 그래야 GitHub에 푸시할 때 컴파일된 circuit 키와 TypeScript 바인딩이 함께 올라갑니다.

Production environment file

배포한 컨트랙트 주소를 담은 프로덕션 환경 파일을 만듭니다.

touch leaderboard-ui/.env.preprod

leaderboard-ui 빌드 스크립트는 vite build --mode preprod를 실행하며, 이때 .env 대신 .env.preprod를 불러옵니다.

VITE_NETWORK_ID=preprod
VITE_INDEXER_URL=https://indexer.preprod.midnight.network/api/v4/graphql
VITE_INDEXER_WS_URL=wss://indexer.preprod.midnight.network/api/v4/graphql/ws
VITE_DEFAULT_CONTRACT=<your deployed contract address>

Deploy to Vercel

Vercel 대시보드에서 저장소를 가져와 배포합니다.

vercel.com에 접속해 GitHub로 로그인하세요.
Add New Project를 클릭하고 저장소를 가져오세요.
Root Directory 설정이 비어 있는지(하위 디렉터리로 지정되지 않았는지) 확인하세요.
Deploy를 클릭하세요.

Test the production deployment

Lace가 설치된 Chrome에서 Vercel URL에 접속하세요. 리더보드가 indexer에서 로드됩니다. 지갑을 연결하고 점수를 제출해, 전체 파이프라인이 처음부터 끝까지 동작하는지 확인하세요.

Summary

프로덕션 스택은 다음 서비스에 의존합니다.

Component	Service
Frontend	Vercel
Chain and indexer	Midnight Preprod
Wallet and proof generation	Lace 브라우저 확장
Test tokens	Preprod faucet

이 아키텍처는 어떤 Midnight DApp에도 확장해 적용할 수 있습니다. 컨트랙트는 온체인 로직을 정의합니다. API 레이어는 이를 TypeScript에서 쓸 수 있게 감쌉니다. 프론트엔드는 Lace를 통해 연결되고, 지갑의 proof server가 증명 생성을 처리합니다.

Vercel build configuration​

Compiled contract output​

Production environment file​

Deploy to Vercel​

Test the production deployment​

Summary​