Le processus moderne du développement Web expliqué

De Wiki Agile du @GroupeCESI
Révision datée du 6 décembre 2021 à 20:39 par Fabrice Aimetti (discussion | contributions)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à : navigation, rechercher

Auteur : Przemyslaw Jarzynski
Source : A Modern Web Development Workflow Explained
Date : 06/12/2020


Traducteur : Fabrice Aimetti
Date : 06/12/2021
Crédit : Alicia, Ange, Arthur, Axel, Camille, Elisa, Patrice, Quentin, Simon


Traduction:

Comment déployer des sites web en 2021
Modern-web-development-workflow FR.png

L'une des choses que les développeurs web modernes doivent d'abord comprendre est le processus/workflow du développement web. Dans cet article, je vais expliquer comment les développeurs web d'aujourd'hui récupèrent le code de leurs machines locales et le déploient sur les serveurs opérationnels sur lesquels les internautes peuvent accéder à leur site web ou à une application web dans leur navigateur web.

Tout commence sur une machine locale

Lorsque les développeurs web commencent à travailler sur un site web ou une application web, tout commence généralement sur leur machine locale. Le code est généralement divisé en deux parties principales : le front-end (frontale) et le back-end (dorsale).

Le front-end est ce que les développeurs appellent HTML, CSS, Javascript et tout ce qui est transmis à l'utilisateur qui ouvre le site web et qui est interprété par le navigateur web.

Le back-end est tout ce qui se passe du côté du serveur et tous les scripts qui y sont exécutés. Ces scripts sont généralement écrits en PHP, Python, Node.js, Ruby, Java et .Net. Très souvent, nous avons également une base de données sur le back-end qui stocke des informations comme les informations sur les utilisateurs enregistrés, le contenu des articles sur le site Web ou les produits d'une boutique en ligne. Les bases de données les plus couramment utilisées sont MySQL et PostgreSQL, ainsi que Microsoft SQL.

Git retrace les changements dans le code

Tout le code source présent sur la machine locale (hormis le contenu de la base de données) est en principe stocké dans un système de contrôle de version appelé Git. Git permet aux développeurs de suivre les modifications du code, de créer différentes versions du projet en créant des branches, de revenir à n'importe quelle version précédente du code publié, et bien plus encore.

Git est vraiment un standard pour le contrôle de version de tout projet moderne de développement logiciel.

GitHub, GitLab, Bitbucket - Git dans le cloud Mais là où Git commence vraiment à se distinguer, c'est lorsqu'il est déplacé et stocké dans le cloud à l'aide de services comme GitHub, GitLab ou Bitbucket. Il y a plusieurs avantages à avoir un code source dans le cloud ; la dernière version du code peut être accédée depuis n'importe quelle machine connectée à Internet, une équipe entière peut travailler efficacement et en toute sécurité sur le même projet sans craindre de compromettre le code ; stocker le code dans le cloud Git permet d'améliorer les processus de déploiement du code.

Intégration continue et livraison continue (CI/CD)

Une fois que nous avons le code dans le cloud sur des services comme GitHub, GitLab, Bitbucket, nous pouvons utiliser des services d'intégration continue et de livraison continue pour automatiser le déploiement du code source. Ces services peuvent utiliser le code stocké dans le Git dans le cloud, vérifier le code ( au moins jusqu'à un certain degré ) et déployer le code dans notre environnement d'hébergement si le code passe tous les tests. Les services qui peuvent être utilisés ici sont notamment Codeship, CircleCI et GitHub Actions. Une fois configurés, les services CI/CD peuvent utiliser le code de notre dépôt Git sur le cloud et le déployer automatiquement sur les environnements de test et de production de notre hébergeur.

Hébergement - Code du site Web et base de données

C'est là que notre code se retrouve depuis notre dépôt git local via Git dans le cloud et le service CI/CD. Si nous avons un nom de domaine réservé et configuré pour notre site web ou notre application, cela permet à l'utilisateur de visualiser notre projet dans le navigateur web. Il y a parfois des tâches supplémentaires qui doivent être effectuées sur le serveur à l'aide de scripts shell via une connexion SSH (comme la création d'une structure de base de données pour la base de données sur le serveur).

FTP

Au lieu d'utiliser GitHub, GitLab ou Bitbucket et l'un des services cloud CI/CD, les développeurs utilisent parfois FTP ou SFTP pour transférer leur code vers le serveur du site. Il s'agit d'une méthode simple mais moins utilisée de nos jours et qui n'est pas recommandée pour déployer le code sur le serveur.

Navigateur Web

Une fois que le code est sur le serveur opérationnel et qu'un nom de domaine lui a été attribué, les internautes peuvent ouvrir notre site ou notre application web dans leur navigateur web. Toutes les requêtes (par exemple domaine.com/blog) sont envoyées au serveur depuis le navigateur web, ce qui déclenche les scripts back-end qui ont besoin de s'exécuter pour générer la page et le front-end (HTML, CSS et Javascript) est renvoyé, interprété et affiché sur les navigateurs web des utilisateurs.

À répéter

Si nous devons apporter d'autres modifications à notre projet, nous répétons le même processus : nous effectuons les modifications sur notre dépôt local, nous poussons les modifications sur Git dans le cloud (GitHub, GitLab, Bitbucket), ce qui déclenche une action dans le service CI/CD et notre code est à nouveau déployé chez notre hébergeur.

Résumé

Ce qui précède est une description d'un processus moderne de développement web. Ce processus peut être un peu différent selon l'entreprise et les personnes qui travaillent sur le projet, mais je pense qu'il permet à tout nouveau développeur qui se lance dans le développement web d'avoir une bonne idée de ce à quoi ressemble un processus de déploiement web efficace et efficient de nos jours.

Si vous le souhaitez, vous pouvez également regarder une vidéo dans laquelle je décris le même processus de développement web.