Table des matières
1. Concept de base du déploiement de projet front-end
1.1 Construction du projet initial
1.2 Hébergement de ressources statiques
1.3 Intégration continue et déploiement continu (CI/CD)
2. Pratique d'intégration continue
2.2 Intégration continue avec Travis CI
Étape 1 : Activer Travis CI sur GitHub
Étape 2 : Configurez le fichier .travis.yml
Étape 3 : valider le code et déclencher la compilation
2.3 Déploiement continu avec Netlify
Étape 1 : Créer un compte Netlify
Étape 2 : Configurer le projet
Étape 3 : Configurer les paramètres de compilation et de déploiement
Étape 4 : Déclencher un déploiement continu
introduction
À mesure que le développement front-end continue d'évoluer, la création et le déploiement de projets front-end sont devenus plus complexes. Afin d'assurer la stabilité et la fiabilité de la livraison du projet, nous devons utiliser la technologie d'intégration continue et de déploiement continu (CI/CD). Cet article vous donnera une compréhension approfondie des concepts de base du déploiement de projet frontal et de l'intégration continue, et vous montrera comment utiliser des outils populaires pour mettre en œuvre ces processus à travers des exemples pratiques.
1. Concept de base du déploiement de projet front-end
Avant de commencer à introduire l'intégration continue, comprenons d'abord quelques concepts de base du déploiement de projet front-end.
1.1 Construction du projet initial
La construction de projets front-end est le processus de conversion du code source en fichiers statiques (HTML, CSS, JavaScript) qui peuvent être exécutés dans le navigateur. Le processus de construction comprend généralement des tâches telles que la fusion de fichiers, la compression du code, le traitement des feuilles de style, la conversion du code ES6+ en ES5, etc., pour garantir que les fichiers générés finaux ont une taille plus petite et des performances supérieures.
1.2 Hébergement de ressources statiques
Une fois la construction terminée, nous devons déployer les fichiers statiques générés sur un serveur Web ou un CDN afin que les utilisateurs puissent accéder et utiliser notre application.
1.3 Intégration continue et déploiement continu (CI/CD)
L'intégration continue et le déploiement continu sont des pratiques de développement conçues pour améliorer la productivité de développement d'une équipe et la qualité du code en automatisant le processus de construction, de test et de déploiement. L'intégration continue (CI) garantit aux développeurs que leur code n'entre pas en conflit avec le code principal et passe les tests de base avant de le fusionner dans une base de code partagée. Le déploiement continu (CD) déploiera automatiquement le code via l'étape CI vers l'environnement de production pour obtenir une livraison rapide et fréquente.
2. Pratique d'intégration continue
Dans cette section, nous présenterons comment utiliser les outils d'intégration continue pour créer, tester et déployer automatiquement des projets frontaux.
2.1 Préparatifs
Avant de commencer, vous avez besoin d'un projet frontal et utilisez un système de contrôle de version tel que Git pour gérer le code. Assurez-vous d'avoir un fichier à la racine de votre projet package.json
qui contient les dépendances et les scripts de construction de votre projet.
2.2 Intégration continue avec Travis CI
Travis CI est un outil d'intégration continue largement utilisé qui s'intègre très étroitement à GitHub. Voici les étapes à suivre pour configurer Travis CI pour générer et tester automatiquement le projet frontal :
Étape 1 : Activer Travis CI sur GitHub
- Visitez le site officiel de Travis CI et connectez-vous avec votre compte GitHub.
- Activez le service CI pour votre projet frontal.
Étape 2 : Configurez le fichier .travis.yml
Créez un fichier nommé à la racine de votre projet .travis.yml
et ajoutez la configuration suivante :
language: node_js
node_js:
- "lts/*"
cache:
directories:
- "node_modules"
script:
- npm install
- npm test
La configuration ci-dessus spécifie l'utilisation de la dernière version LTS de Node.js et l'utilisation de npm pour installer les dépendances et exécuter des tests pendant le processus de construction.
Étape 3 : valider le code et déclencher la compilation
Validez .travis.yml
les fichiers dans le référentiel GitHub et envoyez-les à la branche distante. Cela déclenchera Travis CI pour démarrer le processus de construction et de test.
2.3 Déploiement continu avec Netlify
Netlify est un outil puissant pour le déploiement de sites Web statiques et l'intégration continue. Grâce à lui, nous pouvons rapidement déployer des projets frontaux sur le CDN mondial et réaliser un déploiement continu automatique.
Étape 1 : Créer un compte Netlify
- Visitez le site Web officiel de Netlify et créez un compte gratuit.
Étape 2 : Configurer le projet
Connectez-vous à l'arrière-plan Netlify et cliquez sur le bouton "Nouveau site à partir de Git", sélectionnez votre entrepôt de code et autorisez-le.
Étape 3 : Configurer les paramètres de compilation et de déploiement
Sur la page "Paramètres", configurez les paramètres de compilation et de déploiement :
- Commande de construction : Entrez la commande de construction, par exemple
npm run build
. - Répertoire de publication : entrez un répertoire pour la sortie de la construction, par exemple
dist
oubuild
.
Étape 4 : Déclencher un déploiement continu
Validez le code et poussez-le vers votre référentiel de code. Netlify détecte automatiquement les modifications de code et déclenche le processus de construction et de déploiement.
en conclusion
Cet article présente les concepts de base du déploiement de projet front-end et de l'intégration continue, et montre comment utiliser Travis CI et Netlify pour réaliser une construction, des tests et un déploiement automatisés à travers des exemples pratiques. Grâce à des pratiques d'intégration continue, vous pouvez améliorer l'efficacité du développement de votre équipe, réduire les erreurs et obtenir une livraison rapide et stable. J'espère que ce blog pourra vous aider à mieux appliquer le déploiement de projet frontal et la technologie d'intégration continue.