marketplace-deploy

作成者: vercel

Sitecore Marketplaceアプリを適切なCSPヘッダーと設定でVercelにデプロイします。

npx skills add https://github.com/vercel-labs/sitecore-skills --skill marketplace-deploy

Deploy to Vercel

You are helping the user deploy their Sitecore Marketplace app to Vercel.

Important: This skill has real side effects (deploying to production). Confirm each step with the user before executing.

Pre-Deploy Checklist

Before deploying, verify:

  1. Build succeeds locally:
npm run build
  1. CSP headers are configured — Check next.config.ts for frame-ancestors:
// next.config.ts must include:
headers: [
  {
    source: "/(.*)",
    headers: [
      {
        key: "Content-Security-Policy",
        value: "frame-ancestors 'self' https://*.sitecorecloud.io",
      },
    ],
  },
]
  1. Environment variables are set — Check that .env.local exists and has required values

  2. Extension points are registered — All routes defined in the app should be registered in the Developer Portal

Deploy Steps

Step 1: Install Vercel CLI (if needed)

npm i -g vercel

Step 2: Link to Vercel project

vercel link

Step 3: Set environment variables

# For client-side apps
vercel env add NEXT_PUBLIC_SITECORE_APP_ID

# For full-stack (Auth0) apps — add all Auth0 vars too
vercel env add AUTH0_SECRET
vercel env add AUTH0_BASE_URL
vercel env add AUTH0_ISSUER_BASE_URL
vercel env add AUTH0_CLIENT_ID
vercel env add AUTH0_CLIENT_SECRET
vercel env add AUTH0_AUDIENCE
vercel env add AUTH0_SCOPE

Step 4: Deploy

# Preview deployment
vercel

# Production deployment
vercel --prod

Step 5: Post-Deploy Configuration

After deploying:

  1. Copy the production URL from Vercel
  2. Go to Sitecore Developer Portal → Your App → Settings
  3. Set the App URL to the Vercel production URL
  4. Update AUTH0_BASE_URL env var in Vercel to match the production URL (if using Auth0)

Reference Files

vercelのその他のスキル

benchmark-sandbox
vercel
Vercel Sandbox上でvercel-pluginの評価シナリオを実行し、ローカルのWezTermパネルの代わりに使用します。Claude Codeとプラグインがプリインストールされた一時的なマイクロVMをプロビジョニングします…
official
emil-design-eng
vercel
このスキルは、Emil KowalskiのUIポリッシュ、コンポーネントデザイン、アニメーションの決定、そしてソフトウェアを素晴らしいものにする目に見えない細部に関する哲学をエンコードしています。
official
vercel-react-best-practices
vercel
Vercel EngineeringによるReactおよびNext.jsのパフォーマンス最適化ガイドライン。このスキルは、React/Next.jsのコードを記述、レビュー、またはリファクタリングする際に使用すべきものです。
official
vercel-react-best-practices
vercel
Vercel EngineeringによるReactおよびNext.jsのパフォーマンス最適化ガイドライン。このスキルは、React/Next.jsのコードを記述、レビュー、またはリファクタリングする際に使用すべきものです。
official
write-guide
vercel
現実世界のユースケースを段階的な例を通じて教える技術ガイドを作成します。概念は読者が必要とするタイミングでのみ導入されます。
official
release
vercel
Vercelプラグインをリリース — ゲートを実行し、バージョンを上げ、アーティファクトを生成し、コミットしてプッシュします。「リリースして」「出荷して」「バージョンを上げてプッシュして」または「リリースを切って」と依頼されたときに使用します。
official
deepsec
vercel
dev3000からチェックアウトしたVercelプロジェクトに対してDeepSecを実行します。ワンクリックDeepSecセットアップ、プロジェクトコンテキストのブートストラップ、制限付きの初回パス処理などに使用します。
official
backport-pr
vercel
マージされたNext.jsのプルリクエストをcanaryからnext-16-2などの以前のリリースブランチにバックポートします。ユーザーがバックポート、チェリーピック、またはオープンを依頼した場合に使用します…
official