Comment utiliser Travis CI et GitHub pour vos processus de développement Web?

Tout devient plus facile avec l'intégration continue via Travis CI

Il est courant de pirater des applications sur CodePen lorsque vous débutez. Mais il y aura un moment où vous voudrez publier vos propres applications Web dans le monde entier. Ils pourraient être des projets parallèles ou des projets pour un client. Un bon flux de travail de développement fera toute la différence à ce stade.

Nous allons configurer un flux de travail de développement à l'aide des outils suivants:

  • créer-réagir-app
  • scripts npm
  • Travis-CI

Nous allons connecter Travis CI et GitHub ensemble. À la fin, nous obtiendrons un joli badge brillant, comme celui ci-dessous.

Mais plus que le look, le badge signifie une fonction. C’est le signe du test, de la construction et de la publication de Travis CI sur GitHub. Travis CI ne publie que si les tests sont réussis.

Préparez-vous à placer ces badges sur votre référentiel:

J'ai organisé tout le flux de travail par étapes. Une séance devrait suffire pour chaque étape. Cela prend environ 50 minutes.

Étape 1: Exécutez create-react-app localement

Préparez votre dépôt git

La première chose à faire est de créer un nouveau dépôt sur GitHub. Si vous n'avez pas encore de compte, le moment est venu de vous en créer un. Les dépôts publics sont gratuits. Lorsque vous créez un nouveau référentiel, GitHub vous permet de créer des fichiers pour .gitignore, license et README.md.

Si vous débutez avec Git pour la première fois, vous pouvez lire ce livre gratuitement en ligne. Il y a aussi une section d'aide sur GitHub.

Voici à quoi ressemblera notre nouveau référentiel:

Très bien, mettons ça sur notre terminal. Voyez-vous ce bouton vert clair sur l'image ci-dessus montrant Cloner ou télécharger? Cela nous donnera l’URL du référentiel. Sur votre terminal, lancez cette commande:

git clone git@github.com: pineboat / react-continu-deployment.git

Cette commande téléchargera le contenu du référentiel dans un nouveau répertoire. Il nomme le répertoire de la même manière que le référentiel. Dans notre cas, le nom du répertoire sera react-continu-deployment.

Si vous voulez vous assurer qu'un lien vers le référentiel d'origine est prêt, utilisez la commande suivante:

git à distance -v

Maintenant que nous sommes prêts à appliquer nos modifications à GitHub, passons à React.

En marche avec create-react-app

Commencer un nouveau projet à partir de zéro peut prendre plus de temps que prévu. Surtout lorsque vous n'utilisez aucun échafaudage prédéfini. Il existe plusieurs solutions que nous pouvons utiliser pour commencer. J’ai choisi l’application officielle Create React parce que j’ai essayé d’abord et que je suis resté avec. Lorsque vous n’avez pas à microgérer vos configurations, cela vous donne un nouveau départ afin que vous puissiez prendre les mesures qui s’imposent.

Comme le montre le fichier README.md du référentiel, il vous suffit de l'installer une fois globalement. Ensuite, vous pouvez l’utiliser pour échafauder autant de projets que vous le souhaitez.

Pour l'installer, tapez:

npm installer -g créer-réagir-application

Une fois installé, vous pouvez l’exécuter à partir de n’importe quel répertoire pour créer une nouvelle application. Donnons-lui le nom de notre référentiel:

créer-réagir-application réagir-continu-déploiement

Cela ne créera pas de nouveau dossier car nous avons déjà créé le dossier par Git. Au lieu de cela, il commencera à installer les nœuds_modules et les scripts d'échafaudage nécessaires dans le dossier existant.

Si vous voulez une nouvelle application, vous pouvez utiliser:

créer-réagir-app fantaisie-app-nom

Ensuite, vous devrez créer un référentiel Git et le connecter à GitHub. Ce n'est pas trop difficile. Vous pouvez utiliser cette page d'aide de GitHub.

Cette installation est-elle terminée? Cela ne devrait pas prendre plus de 5 minutes. Cela m'a pris environ 15 minutes. Ne laissez pas cela vous effrayer. A moins que vous ne soyez comme moi et que vous utilisiez une carte de données 4G de 150 Mo / s vous offrant une vitesse de téléchargement d’environ 512 kbps lors de son meilleur jour.

La bonne chose est que l'installation a déplacé notre ancien fichier README.md de côté. Le terminal affiche ce doux message:

Vous aviez un fichier `README.md`, nous l'avons renommé` README.old.md`

Le terminal aurait également dû vous montrer l'énorme liste de paquets dans une arborescence. Cela peut paraître effrayant. Mais la plupart d'entre elles sont des dépendances entre les paquets. Ils sont là pour vous aider à développer votre application. Le produit final ne contiendra que les fichiers JavaScript nécessaires, tels que react.js et react-dom.js. Nous y irons dans un moment.

Pour le moment, réveillons notre application. Une fois l'installation terminée,
create-react-app nous donnera une liste de commandes qui seront utiles.

Voici un catalogue pour référence:

  • npm start
    Démarre le serveur de développement
  • npm run build
    Regrouper l'application dans des fichiers statiques pour la production
  • test npm
    Démarre le coureur de test
  • npm run eject
    Supprime la construction de dépendance unique de votre projet Voir ici
  • npm run deploy
    Pour déployer la construction dans la branche gh-pages

Les commandes de nœud intégrées npm start et npm test sont reconnues par défaut. Vous devez exécuter d'autres scripts tels que construire, éjecter et déployer à l'aide d'un indicateur d'exécution supplémentaire:
npm run nom_script

Nous ajouterons un peu plus dans le processus au fur et à mesure. Il est maintenant temps de charger notre site sur un navigateur. Entrez dans le répertoire de l'application et exécutez:

npm start

Comme par magie, un nouvel onglet de navigateur s'ouvre et vous voyez une belle roue React tourner. La vue doit vous mettre au défi de créer la prochaine meilleure application dont Internet sera témoin.

Donc, voici ce que nous obtenons:

C’est un joli GIF (Graphics Interchange Format), non? Sauf que mon curseur entre. J'ai capturé ce GIF avec un outil appelé Peek. Vérifiez-le quand vous en avez besoin.

Bien joué! J'espère que cela n'a pas pris plus de 45 minutes. Si vous rencontrez des problèmes, faites attention aux messages d'erreur et essayez de les résoudre.

Lorsque vous vous approchez du point de frustration, dirigez-vous vers Stack Overflow pour obtenir de l'aide. Ou laissez vos questions dans les commentaires ci-dessous.

Avant de pirater l’un des fichiers, récupérons le code et le transmettons au référentiel GitHub. Ces commandes feront:

statut git
git add --all git commit -m "Échafaudage initial, ceci est votre propre message"
  • statut git
    Affiche une liste des modifications que nous avons apportées
  • git ajouter
    Ajoute ces modifications à un emplacement temporaire appelé stage avant de le pousser vers le cloud.

Si vous exécutez à nouveau le statut git, il signalera que

Votre branche est en avance sur 'origine / maître' de 1 commit.
 (utilisez "git push" pour publier vos commits locaux)
 rien à commettre, répertoire de travail propre

C’est vrai, nous avons apporté et engagé des changements localement. Il n'y a pas de modifications non validées. Mais nous sommes en avance sur la version cloud de notre référentiel. Il est temps de les publier dans une maison sécurisée, GitHub.

Tout ce dont vous avez besoin pour courir est:
maître d'origine git push

Vous obtiendrez un bon rapport montrant un hachage comme fb74259..045ec7a, qui est une référence pour notre commit. Bien sûr, votre hash sera différent.

Vérifiez votre référentiel GitHub. Êtes-vous surpris de voir un long fichier README.md? Rappelez-vous que create-react-app a remplacé notre minuscule README.md par le sien. C’est énorme et utile, nous allons donc le garder pour le moment avant d’écrire le nôtre.

Étape 2: transfert du site vers les pages GitHub

Construire le site statique

Jetons un coup d’œil à la version finale.

Vous devez seulement courir:

npm run build

Assurez-vous que vous êtes dans le répertoire de l'application pour toutes les commandes. Nous aurons ce beau texte qui nous montrera ce qui s’est passé et ce que nous pouvons faire:

$ npm run build
> react-continuous-deployment@0.1.0 build / home / weebee / Projets / blog_projects / react-continu-deployment
> react-scripts build

Créer une version de production optimisée ...
Compilé avec succès.

Taille des fichiers après gzip:

  48,12 Ko build / static / js / main.9fdf0e48.js
  288 B build / static / css / main.cacbacc7.css

Le projet a été construit en supposant qu’il soit hébergé à la racine du serveur.
Pour le remplacer, spécifiez la page d'accueil dans votre package.json.
Par exemple, ajoutez ceci pour le construire pour les pages GitHub:

  "homepage": "http://myname.github.io/myapp",

Le dossier de construction est prêt à être déployé.
Vous pouvez le servir avec un serveur statique:

  npm install -g serve
  servir -s construire

La commande npm run build fait ce que nous avons demandé. Il construit notre application, optimise et réduit nos actifs. Et cela place tout dans un dossier appelé build.

Vers le bas, il est suggéré d'installer le paquet serve npm pour démarrer un serveur local. La plupart du temps, si vous êtes sous Linux, Python est déjà installé. Il est assez facile de démarrer un serveur local si vous avez Python.

Entrez dans le répertoire de construction et démarrez un serveur, voir les commandes suivantes:

cd build
python -m SimpleHTTPServer

Par défaut, la commande Python démarre le serveur sur le port 8000. Ainsi, http: // localhost: 8000 servira la version de production du site Web. Il utilise les ressources de votre répertoire de construction local que nous venons de créer.

Si cela vous convient, nous allons l'envoyer aux pages GitHub.

Introduction aux pages GitHub

Les pages GitHub sont une solution d'hébergement fournie par GitHub pour les référentiels. Il existe peu d'endroits où vous pouvez héberger votre site, tous dans un référentiel:

  • Vous pouvez utiliser la branche principale (celle par défaut) pour héberger votre site Web.
    Si vous avez un fichier index.html, il apparaîtra. Sinon, votre fichier README.md apparaîtra.
  • Vous pouvez également utiliser le dossier docs dans une branche principale pour héberger votre site.
    Le cas d'utilisation serait lorsque vous avez un logiciel ou une bibliothèque développé sur GitHub. Vous voudrez peut-être héberger la documentation dans le même référentiel.
  • Vous pouvez utiliser la branche gh-pages pour héberger votre site

Il y a une exception. Le nom de votre référentiel ne doit pas être .github.io ou .github.io

Ce sont des noms spéciaux et ils vous limitent à utiliser la branche principale.

Une fois que vous hébergez votre site Web, vous pouvez le charger dans les URL suivantes. Cela dépend si votre référentiel est sous votre compte ou un compte d'organisation:

https: //  .github.io /  /
https: //  .github.io /  /

Avec cette compréhension, équipons notre référentiel pour pouvoir démarrer.

Publier sur des pages GitHub

Le nouveau fichier README.md qui nous a été fourni par l'application create-rea-application comporte une section distincte sur les pages GitHub. Il y a peu de choses que nous devons faire.

Vérifier les ajouts au fichier package.json

"homepage": "http: //  .github.io / 

Remarque: en général, la dernière section ou entrée d’un JSON n’a pas besoin de virgule, toutes les autres devraient en avoir une.

Installer le paquet gh-pages

Celui-ci est facile. Il suffit d’exécuter la commande suivante lorsque vous vous trouvez dans le répertoire du projet:

npm install --save gh-pages

Le drapeau --save ajoutera gh-pages en tant que dépendance de package.json. Cela permet de garantir que toute personne clonant votre projet pourra également l'obtenir lors de l'exécution de npm install.

Voici un instantané de la commande git diff montrant tout ce que nous avons ajouté depuis la création de package.json.

Déployer dans une branche gh-pages

Exécutons npm run deploy. Il s’exécutera automatiquement avant le déploiement, afin de générer la version de production que nous avons vue précédemment. Il déploiera ensuite la construction dans notre référentiel sous une nouvelle branche nommée gh-pages.

Vérifiez si vous obtenez le statut Publié comme dernière instruction. Si tel est le cas, vous avez correctement déployé la version de production sur GitHub. Voici la sortie:

Sélectionnez la branche gh-pages à publier

Direction le référentiel GitHub et publions notre site. Ouvrez le référentiel et allez dans l'onglet Paramètres en haut. On dirait cette image ci-dessous, attendez une minute! GitHub a automatiquement publié la branche gh-pages. Il n'y a plus rien à faire. Il montre également l'URL dans laquelle nous pouvons accéder au site.

Le sous-titre ci-dessus devrait en fait dire Ne rien faire. Tout est fait et prêt à être consommé.

Remarque: l'URL indiquée pour mon référentiel peut vous induire en erreur. C’est parce que j’ai créé ce référentiel sous une organisation appelée PineBoat, qui est mon blog. GitHub place cela sous mon domaine personnalisé, ce à quoi je ne m'attendais pas lorsque j'ai essayé cela. Le vôtre différera.

Jusqu'ici tout va bien. Si vous avez déjà eu une expérience dans les paquets Git et Node, vous n’auriez pas eu de difficulté à aller aussi loin. En fait, le fichier README.md par défaut était suffisant pour m'aider jusque-là. Si vous n'avez aucune expérience, j'espère que vous avez apprécié le voyage.

Mais nous aspirons à un flux de travail de déploiement continu. Nous commençons à naviguer dans des eaux inexplorées. On dirait que rien n’est inexploré sur Internet. Je serais d'accord, pourtant créer ma propre carte.

Étape 3: déploiement continu

C'est ici que nous faisons appel à des robots pour effectuer la majeure partie du déploiement que nous avons effectué à l'étape 2.

Fil dans Travis CI pour une construction automatique

Travis CI se chargera du déploiement pour nous. Il n'y a aucun mal à construire et déployer votre site par vous-même. Comme nous l’avons vu, il ne nous reste plus que quelques minutes de notre temps précieux.

Cependant, lorsque vous rencontrez des projets de plus grande envergure, il est préférable de laisser des bots de confiance effectuer certains travaux. Travis CI est l'un de ces services.

Nous pouvons tirer parti de Travis CI pour construire et déployer chaque fois que nous validons notre code dans le référentiel.

Inscrivez-vous à Travis CI

Ce serait ennuyeux de commencer par «si vous avez un compte GitHub» maintenant. Je suis sûr que vous en avez déjà un et que nous pourrons l'utiliser pour vous inscrire à Travis CI.

Se connecter au référentiel GitHub

Attention aux autorisations. Si votre référentiel ne figure pas dans la liste, cliquez sur le bouton de synchronisation et actualisez la page. J'ai dû donner la permission à l'organisation «PineBoat» avant de pouvoir voir le référentiel.

Travis CI vous montre les étapes. Faites glisser ce commutateur contre votre référentiel pour le connecter.

Cliquez sur le nom du référentiel pour l'ouvrir. Il indiquera l’état inconnu de la construction et une note plus grande indiquant «Aucune construction pour ce référentiel».

Pas pour longtemps. Changeons-le.

Ajouter .travis.yml au référentiel

Voici le fichier .travis.yml qui doit être ajouté. Regardez et restez avec moi pendant que je clarifie certaines des questions que vous pourriez vous poser.

langue: node_js
node_js:
 - "noeud"
after_success:
 - git config --global user.name "vijayabharathi"
 - git config --global user.email "[email protected]"
 - origine git remote rm
 - git remote ajoute l'origine https: // vijayabharathib: $ {GH_TOKEN} @ github.com / pineboat / react-continu-deployment.git
 - npm run deploy

Faites attention avec l’origine git remote add, c’est une longue ligne. La syntaxe YAML est légèrement différente de JSON. Cette page pourrait aider. Il est maintenant temps de le décomposer. Vous avez peut-être compris la plupart de ces messages.

Le voici en clair:

  • Ceci est un projet de nœud. Obtenir la dernière version du noeud
  • Puisque Travis exécute le test npm par défaut, nous lui demandons de faire les choses après le test.
  • Ajoutez votre nom d'utilisateur et votre email Git
  • Ajoutez ensuite l’origine distante git pour le référentiel
    Utilisez votre nom d'utilisateur et le GH_TOKEN généré comme identifiants
  • Enfin, exécutez la commande npm run deploy
    Si vous vous en souvenez, cela lancera npm run predeploy avant d'exécuter npm run deploy

Commit et regarde la construction de Travis CI

Gardez votre page de référentiel Travis CI ouverte. Sur votre terminal, ajoutez des modifications, validez-les et envoyez-les vers GitHub.

Au cas où vous auriez besoin d’un rappel, voici la liste des commandes:

git add --all
git commit -m "ajouter la configuration .travis.yml pour la construction automatique" maître d'origine git push

Si vous passez à la page Travis CI, vous verrez la page s'animer une fois que git push est terminé ou dans quelques secondes. La construction commence automatiquement et vous saurez si elle réussit.

Voici ma page Travis CI montrant le statut vert agréable.

Le journal affiché ne contient pas moins de 2500 lignes. Je suis heureux que Travis-CI ne montre que ce que nous devons voir.

Une indication claire des étapes suivies comme indiqué ci-dessous dans l'image:

Vérification ponctuelle, avons-nous vraiment réussi?

C’est là que les tests automatisés exécutés en production peuvent être utiles.

Mais c’est pour un autre jour. Le Selenium WebDriver peut attendre la fin de ce câblage. Vérifions manuellement si Travis CI a réellement publié sur des pages GitHub.

Un autre essai, cette fois avec des modifications de code

La dernière fois, nous n’avons constaté aucune différence dans notre application après le déploiement. C’est parce que nous n’en avons pas fabriqué. Il n'y avait donc aucun moyen de savoir si la construction avait réussi. Vous pouvez charger gh-pages branch et regarder dans les commits, mais je m'éloigne du sujet.

Maintenant, faisons quelques petits changements. Il est temps de ramener la roue React dans le passé.

Nous ne ferons que deux changements.

Dans le fichier src / App.css, il y a une section pour l'animation nommée @keyframes App-logo-spin. Changer que 360deg à -360deg. Ceci consiste à faire tourner la roue dans le sens inverse des aiguilles d'une montre.

Chargez le fichier src / logo.svg et changez la couleur de remplissage de # 61DAFB à # DA61FB. Si votre serveur fonctionne via npm start, vous pouvez déjà voir une roue violette tourner dans le sens anti-horaire. Si ce n'est pas le cas, ajoutez les modifications à la cachette, validez-les et placez-les dans le référentiel. Regardez si la construction réussit dans Travis-CI, puis rendez-vous sur votre page Github.

Chargez your_user_name.github.io/repository_name. Vous devriez voir la roue violette au lieu de la roue bleue.

Hélas, je ne vois pas cette roue violette. Je vois toujours le bleu par défaut.

Corrige le GH_TOKEN manquant

Bien que Travis CI ait signalé que tout allait bien, ce n’est pas le cas. Si vous ouvrez la branche gh-pages, vous verrez le commit original que nous avons fait depuis un terminal local. Aucun autre commet. Cela signifie que les commandes after_success n'ont pas eu un tel succès.

Si vous développez la section npm run deploy dans le journal de construction de Travis, vous verrez des erreurs d’authentification. C’est parce que nous n’avons pas donné à Travis CI la permission d’écrire dans notre référentiel.

Vous pouvez créer un nouveau jeton à partir de la page Jetons d'accès personnel de GitHub.com. N'oubliez pas de ne donner accès qu'au référentiel public. Juste un tickmark contre public_repo fera l'affaire. Ne manquez pas ça. Une fois que vous avez généré un jeton, copiez-le. GitHub prévient à juste titre que vous ne pourrez plus le voir.

Rendez-vous sur Travis CI, cliquez sur Plus d'options pour votre référentiel et choisissez les paramètres. Il y aura plusieurs sections, mais les variables d’environnement sont à rechercher.

Nommez le jeton GH_TOKEN et collez-le sous le champ de valeur. Cliquez sur Ajouter. N'activez pas la valeur d'affichage dans les journaux car elle pourrait être visible par les utilisateurs si vous envoyez les journaux. Le jeton est équivalent à votre mot de passe.

C’est tout, Travis-CI peut maintenant écrire dans notre référentiel.

Retournez à l'onglet Current du référentiel et cliquez sur Restart build. Une fois la construction terminée, vous pouvez consulter les journaux et consulter la branche gh-pages sur GitHub. Vous devriez voir un nouveau commit.

Félicitations! C’est notre premier déploiement automatisé. Qu'en est-il du site Web github.io? Aucune quantité de rafraîchissement n'apporterait la roue pourpre si nécessaire. Ne perdez pas espoir pour le moment.

Demander au technicien de faire une pause

La roue saigne toujours en bleu. Mais gh-pages branch dans le référentiel affiche un deuxième commit. Comparons le fichier index.html dans le référentiel et dans la source de la page Web. Ils pointent vers différents fichiers CSS et JavaScript. Le suffixe de hachage est notre indice.

Cela semble être le résultat d'un travailleur énergique du service JavaScript. Il a mis en cache la page pour une utilisation hors connexion. Mais cette conclusion nécessite plus de recherche. En attendant, arrêtons simplement le technicien de service et effacez le stockage.

Si vous êtes sur Chrome, vous pouvez accéder aux outils de développement depuis le menu ou en appuyant sur F12. L'onglet Application de Chrome DevTools comporte une section Clear Storage. Vérifiez toutes les entrées et cliquez enfin sur Effacer les données du site.

Rafraîchissez et boum! Voici notre roue inversée en violet brillant. C’est le moment de célébrer.

Remarque: il doit exister un meilleur moyen de nettoyer ce stockage automatiquement. Cela poserait problème si nous devions arrêter et nettoyer le personnel de service et le stockage à chaque fois pour mettre les modifications en ligne. C’est un sujet de recherche.

Etape 4: Badge d'honneur de Travis CI

Il y a une dernière tâche devant nous. Il s’agit d’obtenir un badge brillant d’état de génération de Travis CI dans le fichier README.md de notre référentiel.

Ouvrez Travis CI et cliquez sur le badge build: pass. Il affichera une boîte de dialogue avec des options pour transférer l’image. Laissez la branche en tant que maître. Sélectionnez Markdown au lieu de l'URL de l'image. Copiez le texte qui vous a été donné.

Collez-le dans le fichier README.old.md, qui nous avait été laissé précédemment par create-react-app. Écrivez votre propre contenu.

Vous pouvez supprimer le fichier README.md par défaut du référentiel et renommer le fichier README.old.md en README.md.

Ajoutez les modifications apportées à la mise en scène Git, à la validation et à la diffusion dans le cloud. Maintenant, le référentiel devrait montrer le lot que vous avez toujours voulu. Voici l'URL indiquée pour notre projet animalier.

https://travis-ci.org/pineboat/react-continuous-deployment.svg?branch=master

Vous pouvez ajouter cette URL au fichier README.md en haut. Voici l'image:

Nous avons fini ici! C'est l'heure de fêter ça.

Je voudrais vous laisser avec une question. Si vous travaillez dans de grandes équipes utilisant un flux de travail similaire, quels sont les défis auxquels vous êtes confrontés et comment les résoudre? Ecrivez un commentaire et faites le moi savoir.

Merci beaucoup d'avoir lu. J'espère que tu as trouvé ça utile.

Ceci a été publié à l'origine sur pineboat.in.

Les applaudissements montrent à quel point vous avez apprécié cet article.