web-build-deploy
Déployer des applications React sur Vercel, Netlify et Docker
Besoin de déployer une application React mais incertain de la meilleure plateforme et configuration. Cette compétence fournit des modèles de déploiement prêts à l'emploi pour Vercel, Netlify, Docker et des pipelines CI/CD avec les meilleures pratiques de sécurité incluses.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "web-build-deploy". Comment déployer mon application React Vite sur Vercel ?
Résultat attendu:
- Utiliser npm i -g vercel pour installer le CLI
- Exécuter vercel pour un déploiement preview
- Exécuter vercel --prod pour la production
- Créer vercel.json avec buildCommand et outputDirectory
- Ajouter des en-têtes de sécurité (X-Frame-Options, X-Content-Type-Options)
- Définir les variables d'environnement avec vercel env add
Utilisation de "web-build-deploy". Aide-moi à créer un Dockerfile de production pour mon application React
Résultat attendu:
- Utiliser un build multi-étapes avec node:18-alpine comme builder
- Copier les fichiers package et exécuter npm ci
- Copier les sources et exécuter npm run build
- Utiliser nginx:alpine pour l'étape de production
- Copier les fichiers buildés vers le répertoire html de nginx
- Configurer nginx avec des en-têtes de sécurité et la compression gzip
Utilisation de "web-build-deploy". Configurer le déploiement automatique avec GitHub Actions
Résultat attendu:
- Créer .github/workflows/deploy.yml
- Utiliser actions/checkout et actions/setup-node
- Exécuter npm ci pour installer les dépendances
- Exécuter npm test pour les tests
- Exécuter npm run build pour le build de production
- Utiliser vercel-action pour déployer lors d'un push sur la branche main
Audit de sécurité
SûrPure 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.
Facteurs de risque
⚙️ Commandes externes (46)
🌐 Accès réseau (6)
⚡ Contient des scripts (3)
🔑 Variables d’environnement (15)
Score de qualité
Ce que vous pouvez construire
Déployer sa première application React
Choisir la plateforme, configurer le build et déployer l'application React avec les en-têtes de sécurité appropriés
Configurer un pipeline CI/CD
Configurer un workflow GitHub Actions avec tests automatisés et déploiement en production
Conteneuriser une application React
Créer une image Docker optimisée avec build multi-étapes et service nginx
Essayez ces prompts
Comment déployer mon application React sur Vercel ? Montre-moi la configuration vercel.json avec les en-têtes de sécurité.
Quelles sont les commandes pour déployer sur Netlify ? Inclus le fichier de configuration netlify.toml.
Montre-moi un Dockerfile prêt pour la production pour mon application React avec build multi-étapes et nginx.
Crée un workflow GitHub Actions qui build, teste et déploie sur Vercel lors d'un push sur la branche main.
Bonnes pratiques
- Toujours configurer les en-têtes de sécurité (X-Frame-Options, X-Content-Type-Options) dans la configuration de déploiement
- Utiliser des variables d'environnement avec les préfixes appropriés (VITE_, NEXT_PUBLIC_) pour l'accès côté client
- Activer la mise en cache pour les assets statiques afin d'améliorer les performances
Éviter
- Committer des identifiants sensibles dans le contrôle de version
- Utiliser des noms de variables d'environnement sans les préfixes appropriés pour l'accès côté client
- Déployer sans endpoints de health check ou suivi des erreurs