Contexte
Lors de ma première année de BTS SIO, j’ai été chargé avec des collègues de classe de promouvoir une entreprise fictive en ligne.
Nous avons conjointement choisis de créer une société de vente de box contenant des objets thématique aléatoire à l’achat unique ou bien par abonnement (mensuel).
Après plusieurs sessions de brainstorming, nous en sommes arrivés à définir une politique de vente, de prix et le public visé.
Et finalement à définir une charte graphique avec un logo:
Réalisation
Avant de commencer
Avant de réaliser le site, nous avions besoin de réfléchir aux ressources nécessaires pour le projet ainsi que de planifier la réalisation du projet.
Réfléchir en amont aux ressources nécessaires permet de gagner du temps, tandis que la planification permet d’avoir un point de repère sur l’avancement du projet.
Suite au brainstorming avant de mettre en place le projet, 2 grandes parties à faire en sont ressorties:
- Développement du code du site web
- Hébergement du site et mise en place de l’infrastructure réseau
Nous avons donc réalisé un daily meeting à chaque début de séance, pour discuter avec les différents collègues et les professeurs au sujet de l’avancement, des éventuels problèmes et des besoins que nous avions.
code du site
Maquette
Se lancer dans le code tête baissée sans avoir une idée de la page que l’on souhaite réaliser est une très mauvaise idée, une perte de temps. Nous avons donc réalisé au préalable une série de maquettes, voici celle que nous avons retenue:
Développer en local
N’ayant pas encore d’infrastructure permettant d’accueillir le site en développement, nous avons commencé par installer localement sur nos machines un serveur Wamp afin de bénéficier de la possibilité d’avoir des pages en PHP et une base de données.
sTATIQUE
Dans un premier temps, il a fallu coder en HTML la structure des pages du site, en alliant ensuite le style des pages via du CSS.
Une bonne structure HTML optimise le référencement naturel et permet une bonne lecture du code et donc une meilleure maintenance tandis que l’aspect esthétique d’une page web doit être gérée par le CSS.
Dynamique
Ensuite, nous avons voulu rajouter un dynamisme pour simplifier la maintenance du site et le rendre plus agréable à visiter.
Nous avons par exemple gérer l’accès aux pages du site via un switch sur la page principale qui récupérait la variable GET « page » en PHP, et affichait la page correspondante.
switch($_GET['page']) {
case 'panier':
include('pagepanier.php');
break;
case 'accueil':
include('pageaccueil.php');
break;
case 'CGU':
include('pageCGU.php');
break;
etc...
}
Exemple, pour accéder à la page panier: http://stonksbox.fr/?page=panier
Aperçu
Après plusieurs semaines de développement, voici à quoi ressemble la page principale du site:
Hébergement
Expression du besoin
Avant de faire des recherches sur les options d’hébergement disponibles, définissons ce dont nous avons besoin:
– Nous souhaitons que le site soit accessible à tout moment, de n’importe où et sur tout support.
– Le site étant tout nouveau, il aura un faible nombre de connexion à gérer simultanément dans un premier temps.
– Nous avons besoin d’un hébergement capable de fournir un serveur PHP.
Solution choisie
Plusieurs possibilités d’hébergement:
– en local sur un poste de travail
– sur un serveur local dédié
– externaliser l’hébergement à une entreprise tierce.
Héberger en local sur un poste de travail n’est pas une bonne pratique et de manière à travailler nos compétences réseaux, nous avons exclu l’hébergement payant (nous ne pouvions également pas le payer cela dit).
Afin de répondre à tous ces besoins, nous avons décidé d’héberger localement le site produit sur un serveur dédié.
Pour le système d’exploitation, nous avons opté pour la distribution Linux Debian car c’est un système plus léger qu’un Windows et qui bénéficie d’une grande communauté d’utilisateurs prêt à aider en cas de besoin et est l’un des Linux les plus facile à appréhender.
Quand aux services, nous avons choisi Apache2 comme service de serveur Web pour sa simplicité et sa légèreté couplé aux paquets PHP et une base de donnée MYSQL.
Infrastructure Réseau
Maintenant que nous avons un serveur hébergeant notre site, il faut le rendre accessible aux autres en dehors de notre réseau.
En effet, chaque groupe en classe s’est vu attribué une plage réseau de manière à ce que chacun s’organise comme il le souhaite sans empiéter sur le travail des autres.
Le serveur web est accessible en local via une adresse IPv4 définie statiquement. Si nous souhaitons le rendre accessible aux autres groupes, nous allons devoir permettre aux différents réseaux de communiquer entre eux à l’aide de routeurs.
Un switch reliant tous les réseaux de la salle est à notre disposition. Nous allons donc relier notre routeur à ce switch et à notre réseau.
Les réseaux et adresses ne sont qu’à titre indicatif. Chaque groupe avait une plage réseau définie et était libre d’adresser comme il le souhaitait. Il reste préférable dans un projet réseau de cette envergure de normaliser l’adressage afin de simplifier la compréhension du réseau et la communication entre les différents acteurs du projet. Ainsi, accéder au serveur web du groupe X reviendrait à accéder à la page 192.168.X.1. Plus besoin donc de demander à chaque groupe leur adresse IP de serveur web en permanence.
Le réseau d’interconnexion n’a besoin que d’un nombre restreint d’adresses IPv4. L’infrastructure telle que décrite dans le schéma ci-dessus n’a alors besoin que de 6 adresses Ipv4 (5 pour les groupes et 1 pour l’interface interne reliée au routeur FAI).
Ce réseau a donc un masque de sous réseau correspondant à cette logique:
23 -2 = 6 ( 8 @ disponibles – 2 : @réseau et @diffusion) >= 6 (adresses nécessaires) > 22-2 = 2 (adresses utilisables) (Besoin de 3 bits pour avoir suffisamment d’adresses)
Masque CIDR correspondant: 32(tous les bits à 1) – 3(bits hôtes) = /29
Faciliter l’accès au site
Nous avons vu que normaliser l’adressage simplifie l’accès, mais il est également possible de laisser à chaque groupe la liberté d’adressage grâce à des règles NAT/PAT.
En effet, cette solution va permettre de consulter le site web via l’adresse IP externe du réseau de chaque groupe. Chaque réseau possède une adresse IP externe attribuée en fonction du groupe. Par exemple: Groupe X a l’adresse IPv4 externe 192.168.254.X
En suivant cet exemple, PC EXT peut accéder au site de StonksBox de 2 manières:
– Via l’IP locale 192.168.3.Y (toute requête http vers ce réseau sera redirigé vers cette ip )
– Via l’IP externe 192.168.254.3
Restreindre l’accès au site via du NAT/PAT sur le routeur de groupe présente aussi un intérêt en cybersécurité. Cela dissimule l’adresse interne (privée) du groupe et limite la possibilité d’attaques pirates.
Chaque groupe devra alors renseigner sur son routeur la règle NAT/PAT suivante :
iptables -t nat -A PREROUTING -i ens192 -p tcp --dport 80 -j DNAT --to-destination 192.168.254.X:80
Explication de la commande:
- iptables: commande qui gère les tables (filtrage, routage etc) sous linux
- -t nat PREROUTING: précise la table à gérer, ici on veut modifier les règles NAT avant le routage (PREROUTING) des paquets
- –i ens192: spécifie sur quel port agir
- –p tcp: protocole que l’on souhaite filtré, tcp pour les requêtes http
- —dport 80: à destination du port 80 (port par défaut du http)
- -j DNAT: cible de la règle
- –to-destination: 192.168.X.1:80: redirection vers l’IP:Port
Avec cette commande, tous les paquets Ipv4 à destination de l’interface ens192 sur le port 80 avec le protocole tcp seront redirigés vers 192.168.X.1:80 Cela signifie donc que seul le serveur à cette adresse est accessible en web depuis l’extérieur pour n’importe quelle requête http entrant dans le réseau 192.168.X.0/24
Conclusion
Au travers de cet article, nous avons vu comment l’entreprise StonksBox a pu se lancer dans la vente sur le Web et se faire connaitre. Nous avons vu comment gérer un projet en équipe (temps, répartition des tâches…), une initiation au code d’un site web, les différentes options d’hébergements disponibles, et comment faciliter l’accès au site au sein de notre réseau.
Toutes les notions essentielles au lancement d’un commerce en ligne non pas été abordés dans cet article. Des compléments seront apportés dans d’autres articles tels que le référencement.
Site accessible ici: stonksbox.clementgentil.fr