Cours 5¶

Serveur, domaine et hébergement¶

Le concept de serveur, de domaine et d'hébergement se traduit bien par l'analogie du lopin de terre.

GitHub Pages¶

GitHub Pages transforme gratuitement un dépôt Git en site Web.

Méthode rapide¶

La façon la plus simple de le faire est avec un index.html à la racine du repo.

Créer un nouveau repository public sur GitHub.
Créer un index.html avec une structure de base et du contenu dans le <body>
Clic sur Settings > Pages
Source = Deploy from a branch
Branch = main, clic Save
Attendre le déploiement (quelques minutes). On peut voir quand c'est fait dans l'onglet Actions.

L'adresse de votre site est normalement construite ainsi :

https://USERNAME.github.io/NOM-DU-REPOSITORY/

Déployer manuellement un build vite¶

Après avoir exécuté npx vite build, un dossier /dist est créé avec le code à déployer à l'intérieur.

Il suffit alors de mettre le contenu du dossier /dist à la racine du repo GitHub pour que GitHub Pages l'affiche.

Exemple du repo GitHub

📂 assets
  - index-BJN94h4U.css
  - poppins-latin-700-normal-BVuQR_eA.woff
  - ...
📄 index.html

Méthode automatisée¶

Il est possible d'automatiser tout ça avec GitHub Actions.

Ainsi, on a le code source sur GitHub, et quand on fait un git push, ça exécute en arrière-plan un npx vite build et ça déploie automatiquement sur GitHub Pages !

Hébergement avec cPanel¶

Abréviation de « Control Panel », cPanel est un panneau de gestion d’hébergement Web qui permet de gérer des serveurs et des sites Web.

Il existe plusieurs alternatives comme Plesk, DirectAdmin ou Webmin, mais dans le cadre du cours, nous utiliserons cPanel.

L'entreprise qui héberge les sites Web s'appelle HostPapa et le nom de domaine qui sera utilisé sera tim-momo.com.

Connexion¶

La connexion se fait à l'adresse suivante :

https://SOUSDOMAINE.tim-momo.com:2083

Remplacez SOUSDOMAINE par votre nom de famille

Exemple : https://tremblay-rivard.tim-momo.com:2083

Le nom d'utilisateur est votre prénom sur colnet, en minuscule, sans accents.

Spécificités

Si vous avez plusieurs prénoms, ce sera simplement le premier. (ex: pour Charlie Charlotte, le username est charlie)
Si c'est un prénom composé, le trait n'est pas conservé. (ex: pour Pier-Olivier, le username est pierolivier)

Pour Alexandre, ajoute les initiales de ton nom de famille (ex: pour Alexandre Tremblay-Rivard, le username est alexandretr)

Le mot de passe est le numéro de DA à 9 chiffres. (ex: 201234567)

Tableau de bord¶

Informations générales et statistiques¶

Changer son mot de passe¶

Il est fortement recommandé de changer son mot de passe pour quelque chose de plus sécuritaire.

Dans le tableau de bord, cliquer sur « Mot de passe et sécurité »
Changer le mot de passe

Gestionnaire de fichiers¶

Dans le tableau de bord, cliquer sur « Gestionnaire de fichiers »

📁 public_html : C’est la racine Web : tout ce que vous y ajouterez sera visible sur internet

Exemples : - public_html/index.html : visible par https://xxxxxx.tim-momo.com/ - public_html/tp2/index.html : visible par https://xxxxxx.tim-momo.com/tp2/
- Je recommande de faire un répertoire par projet pour le moment. Rien à la racine directement. Pour le moment ;)
- Petit truc. Téléverser un .zip pour l'extraire ensuite permet de faciliter le processus.

📁 public_ftp : Sert pour partager des fichiers via FTP anonyme.
- Si activé, n'importe qui pourrait télécharger son contenu via une adresse comme : ftp://xxxxxx.tim-momo.com

📁 mail : Contient les boîtes de réception de vos courriels
📁 logs : contient les erreurs serveur au format compressé (ex. : 404, 500)
📁 ssl : stocke les certificats pour activer la notion HTTPS
📁 tmp : fichiers temporaires
📁 etc : contient des fichiers de configuration globaux

403 Forbidden

S'il n'y a pas de fichier index.html à la racine du dossier public_html, vous devriez logiquement voir cette page :

Exercice - cPanel
Publier un build Vite

Courriels¶

Votre cPanel vient avec une gestion de courriels, un peu comme si vous aviez votre propre Gmail.

Créer une boîte de courriel¶

Dans le tableau de bord, cliquer sur « Comptes de messagerie »
Cliquer sur « Créer »
Ajouter un nom d'utilisateur. Ce sera le nom de votre courriel. Par exemple : contact@xxxxxx.tim-momo.com
Ajouter un mot de passe
Cliquer sur « Créer »

Boîte de courriel¶

Dans le tableau de bord, cliquer sur « Comptes de messagerie »
Cliquer sur « Check Email » de la boîte de courriel précédemment créée.
- Si le lien ne fonctionne pas, vous y avez accès par votre url en spécifiant webmail (ex: https://webmail.xxxxxx.tim-momo.com/)
Cliquer sur « Open »
Tester l'envoi et la réception d'un courriel.

Gestion du serveur à distance avec ftp-simple¶

ftp-simple est une extension qui permet de travailler sur le serveur directement dans VSCode !

Configuration¶

Dans VSCode, appuyer sur la touche F1 (ou Ctrl+Shift+P)
Chercher « ftp-simple »
Choisir l'option « ftp-simple: Config ... »

Cela ouvre le fichier de configuration ftp-simple-temp.json

Entrer les informations de connexion de votre cPanel :

Exemple

[
  {
    "name": "xxxxxx.tim-momo.com",
    "host": "xxxxxx.tim-momo.com",
    "port": 21,
    "type": "ftp",
    "username": "picard",
    "password": "201234567",
    "path": "/public_html",
    "autosave": true,
    "confirm": true
  }
]

Sauvegarder et fermer le fichier de configuration.

Ouvrir une session¶

Dans VSCode, ouvrir une nouvelle fenêtre
Appuyer sur la touche F1
Chercher « ftp-simple »
Choisir l'option « ftp-simple: Remote directory ... »
Choisir le site sur lequel se connecter (normalement celui configuré plus tôt)
Choisir le dossier à ouvrir (. Current directory : /public_html)

Exercices¶

Exercice - Préparation à l'examen
Carré