web-build-deploy
React-Apps auf Vercel, Netlify und Docker bereitstellen
Sie müssen eine React-Anwendung bereitstellen, sind sich aber nicht sicher, welche Plattform und Konfiguration am besten geeignet ist. Diese Fähigkeit bietet sofort einsetzbare Bereitstellungsmuster für Vercel, Netlify, Docker und CI/CD-Pipelines mit bewährten Sicherheitspraktiken.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「web-build-deploy」を使用しています。 Wie stelle ich meine Vite React-App auf Vercel bereit?
期待される結果:
- Verwende npm i -g vercel um die CLI zu installieren
- Führe vercel für Preview-Bereitstellung aus
- Führe vercel --prod für Produktion aus
- Erstelle vercel.json mit buildCommand und outputDirectory
- Füge Sicherheits-Header hinzu (X-Frame-Options, X-Content-Type-Options)
- Setze Umgebungsvariablen mit vercel env add
「web-build-deploy」を使用しています。 Hilf mir, ein Produktions-Dockerfile für meine React-App zu erstellen
期待される結果:
- Verwende mehrstufigen Build mit node:18-alpine als Builder
- Kopiere package-Dateien und führe npm ci aus
- Kopiere Source und führe npm run build aus
- Verwende nginx:alpine für Produktionsstufe
- Kopiere gebaute Dateien in nginx html-Verzeichnis
- Konfiguriere nginx mit Sicherheits-Headern und gzip-Kompression
「web-build-deploy」を使用しています。 Richte automatische Bereitstellung mit GitHub Actions ein
期待される結果:
- Erstelle .github/workflows/deploy.yml
- Verwende actions/checkout und actions/setup-node
- Führe npm ci aus, um Dependencies zu installieren
- Führe npm test für Testing aus
- Führe npm run build für Produktions-Build aus
- Verwende vercel-action für Bereitstellung bei main-Branch-Push
セキュリティ監査
安全Pure documentation skill containing only markdown reference material for React deployment. No executable code, file access, network calls, or external commands. Contains only example code snippets demonstrating deployment workflows. All static findings are false positives - the scanner misinterpreted documentation examples as executable code patterns.
リスク要因
⚙️ 外部コマンド (46)
🌐 ネットワークアクセス (6)
⚡ スクリプトを含む (3)
品質スコア
作れるもの
Erste React-App bereitstellen
Plattform auswählen, Build konfigurieren und React-Anwendung mit properen Sicherheits-Headern bereitstellen
CI/CD-Pipeline einrichten
GitHub Actions-Workflow mit automatisiertem Testen und Bereitstellung in der Produktion konfigurieren
React-App containerisieren
Optimiertes Docker-Image mit mehrstufigem Build und nginx-Bereitstellung erstellen
これらのプロンプトを試す
Wie stelle ich meine React-App auf Vercel bereit? Zeige mir die vercel.json-Konfiguration mit Sicherheits-Headern.
Welche Befehle brauche ich für die Bereitstellung auf Netlify? Inklusive der netlify.toml-Konfigurationsdatei.
Zeige mir ein produktionsbereites Dockerfile für meine React-App mit mehrstufigem Build und nginx.
Erstelle einen GitHub Actions-Workflow, der auf main-Branch-Push zu Vercel buildet, testet und bereitstellt.
ベストプラクティス
- Konfiguriere immer Sicherheits-Header (X-Frame-Options, X-Content-Type-Options) in der Bereitstellungskonfiguration
- Verwende Umgebungsvariablen mit properen Präfixen (VITE_, NEXT_PUBLIC_) für Client-Side-Zugriff
- Aktiviere Caching für statische Assets zur Leistungsverbesserung
回避
- Empfindliche Zugangsdaten in die Versionskontrolle einchecken
- Umgebungsvariablennamen ohne properen Präfix für Client-Side-Zugriff verwenden
- Bereitstellen ohne Health-Check-Endpunkte oder Fehlerverfolgung