Préparation au lancement — Déployer sur Vercel
Dans ce chapitre, vous apprendrez comment empaqueter un projet de blog développé localement et le déployer gratuitement sur Internet, en obtenant un lien d'accès public.
Générer le bundle de production
Pendant le développement, exécuteznpm run dev, Vite démarre un serveur de développement local avec prise en charge du remplacement de module à chaud.
Ce qu'il vous faut pour le déploiement, c'estle bundle de production optimisé et minifié.。
$ npm run build
Après exécution, ce qui suit est généré dans le répertoire racine du projetdist/dossier :
dist/ ├── index.html # 入口 HTML ├── assets/ │ ├── index-Df3aBc9x.js # 打包压缩后的 JS │ ├── index-Gh7jKl2m.css # 提取并压缩后的 CSS │ └── ... ├── posts.json # public 目录文件原样复制 └── favicon.svg # 静态资源
Principaux changements :
- Les noms de fichiers incluent un hash (le hash change lorsque le contenu change, utilisé pour le contrôle du cache du navigateur)
- Le code est minifié et soumis au tree-shaking (supprime le code inutilisé)
- Le contenu du répertoire public/ est copié tel quel dans le répertoire racine
Pour prévisualiser le résultat du build : exécutez
npx vite preview, qui démarre un serveur local en mode production pour simuler l'environnement réel.
Poussez le projet vers GitHub
Étape 1 : Créer un dépôt GitHub
Sur GitHub, cliquez sur + → Nouveau dépôt, puis remplissez :
- Nom du dépôt：react-blog-app
- Définissez-le sur Public (pour un déploiement gratuit)
- Ne cochez pas Initialiser avec README
Étape 2 : Initialiser Git et push
$ cd blog-app $ git init $ git add . $ git commit -m "初始化 React 博客项目" $ git branch -M main $ git remote add origin https://github.com/你的用户名/react-blog-app.git $ git push -u origin main
Avant de faire le push, assurez-vous
.gitignorecontainsnode_modulesetdist. node_modules ne doit pas être téléversé (il peut être restauré via npm install), et dist est généré automatiquement par la plateforme de build.
Déploiement Vercel
Vercelest actuellement la plateforme de déploiement front-end la plus populaire, avec un support sans configuration pour les projets React/Vite.
Étapes de déploiement
- Visitezvercel.com, connectez-vous avec votre compte GitHub
- Cliquez sur "Nouveau projet" → Importer un dépôt Git → sélectionnez react-blog-app
- Vercel détecte automatiquement Vite + React et remplit automatiquement la configuration
- Cliquez sur « Deploy » et attendez quelques dizaines de secondes
- Après un déploiement réussi, vous obtenez un lien tel que :
https://react-blog-app.vercel.app
| Élément de configuration | Valeur | Description |
|---|---|---|
| Préréglage du framework | Vite | Détection automatique |
| Commande de build | npm run build | Détection automatique |
| Répertoire de sortie | dist | Détection automatique |
Déploiement automatique
À partir de ce moment, chaque foisgit push, Vercel fait automatiquement : récupérer le code → npm install → npm run build → déployer en production.
L'ensemble du processus est entièrement automatique : un push et c'est en ligne.
Domaine personnalisé (facultatif)
- Tableau de bord du projet Vercel → Paramètres → Domaines
- Saisissez votre domaine (par exemple, blog.example.com)
- Ajoutez un enregistrement CNAME chez votre fournisseur DNS pointant vers
cname.vercel-dns.com - Attendez que le DNS prenne effet ; Vercel demande automatiquement un certificat SSL
Prochaines orientations d'apprentissage
| Orientation d'apprentissage | À qui cela s'adresse | Point de départ recommandé |
|---|---|---|
| TypeScript + React | Vous souhaitez écrire des projets plus rigoureux et à grande échelle | Ajoutez TypeScript au projet, en commençant par les types Props et Hook |
| Next.js | Besoin de capacités SEO, SSR et full-stack | Un framework full-stack basé sur React où les fichiers sont des routes |
| React Query (TanStack Query) | Besoin d'une gestion plus puissante de la récupération de données | Mise en cache, re-récupération automatique, mises à jour optimistes |
| Bibliothèque de gestion d'état | La logique d'état de l'application est très complexe | Zustand (léger), Redux Toolkit (lourd) |
| Bibliothèque de composants | Créer rapidement des tableaux de bord d'administration | Ant Design、MUI、shadcn/ui |
Comparaison des roadmaps full-stack React vs Vue3
| Direction | Écosystème React | Écosystème Vue3 |
|---|---|---|
| Framework full-stack | Next.js | Nuxt.js |
| Système de types | TypeScript (meilleur support natif) | TypeScript |
| Gestion d'état (légère) | Zustand | Pinia |
| Récupération de données | React Query | VueUse / TanStack Query |
| Mobile | React Native | — (Weex a été abandonné) |
Autres extensionsVous avez franchi l’étape la plus importante — construire un vrai projet entièrement avec React. Que vous passiez plus tard à TypeScript ou à Next.js, vous ajoutez une nouvelle dimension par-dessus ce que vous avez déjà. La façon de penser de React (vues pilotées par l’état, composantisation, flux de données unidirectionnel) jouera un rôle dans chaque projet que vous construirez par la suite.