Création d'un site Web statique
Ce tutoriel montre comment héberger un site Web statique sur IBM Cloud® Object Storage, y compris la création d'un compartiment, le téléchargement de contenu et la configuration de votre nouveau site Web.
L'hébergement de sites Web statiques avec IBM Cloud Object Storage offre un contenu statique pour un accès public offrant aux utilisateurs une flexibilité, une facilité de distribution et une haute disponibilité. Ce tutoriel contient des instructions pour l'utilisation de cURL, de l'interface de ligne de commandeAWS, ainsi que de la console. Choisissez votre chemin d'accès à ce tutoriel en utilisant les liens permettant de basculer entre les instructions situées au-dessus du titre de cette rubrique.
Scénario
Le scénario de ce tutoriel simplifie l'hébergement Web à l'essentiel pour mettre en évidence les étapes impliquées. Bien que toutes les options de configuration ne soient pas abordées dans ce tutoriel, l'exécution correcte de ce tutoriel génère un contenu accessible sur le Web.
Avant de commencer
Vérifiez que vous disposez des éléments dont vous avez besoin pour démarrer:
- Une instance de IBM Cloud Object Storage
- Contenu sous forme fixe, comme du texte (HTML serait parfait) et des fichiers image
Vérifiez que vous disposez de l'accès approprié à l'instance de IBM Cloud Object Storage que vous utiliserez ou des droits appropriés pour les compartiments que vous utiliserez pour ce tutoriel.
Pour utiliser l'interface de ligne de commandeIBM Cloud avec ce tutoriel, vous devez configurer le plug-in Object Storage afin de spécifier l'instance de service que vous souhaitez utiliser et la région par défaut dans laquelle vous souhaitez créer votre nouveau compartiment.
Créer un compartiment configuré pour l'accès public
La création d'un compartiment pour un site Web statique nécessite un accès public. Il existe un certain nombre d'options pour configurer l'accès public. En particulier, l'utilisation du rôle IAM ObjectReader empêche la liste du contenu du compartiment tout en autorisant l'affichage du contenu statique sur Internet. Si vous souhaitez autoriser l'affichage de la liste des contenus, utilisez le rôle IAM ContentReader pour votre compartiment.
Créer un compartiment
Après avoir configuré le plug-in d'interface de ligne de commande, remplacez le contenu de la marque de réservation comme indiqué dans l'exemple de commande pour créer un compartiment:
ibmcloud cos bucket-create --bucket <bucketname>
Une fois que vous vous êtes connecté à la console et après avoir créé une instance de IBM Cloud Object Storage, vous pouvez créer un compartiment. Cliquez sur le bouton intitulé "Créer un compartiment" et choisissez l'une des options indiquées à la figure 1. Sélectionnez la carte qui indique "Personnaliser votre compartiment".
Le conteneur des fichiers statiques de votre site Web se trouve dans un compartiment que vous pouvez nommer. Le nom que vous créez doit être unique, ne doit pas contenir d'informations personnelles ou d'identification, ne peut pas comporter deux points, points ou traits d'union dans une ligne et doit commencer et se terminer par des caractères alphanumériques (éléments du jeu de caractères ASCII 3-63). Voir la figure 2 pour un exemple.
Définition de l'accès public
Dans tous les scénarios de ce tutoriel, vous souhaiterez utiliser l'interface utilisateur sur la console pour autoriser l'accès public à votre nouveau site Web.
Lors de la création d'un compartiment pour l'hébergement de contenu de site Web statique, il existe une option permettant d'activer l'accès public dans le cadre du processus de création de compartiment. Voir la figure 3 pour l'option permettant d'activer l'accès public à votre compartiment. Pour plus d'informations sur les options du "document d'index" et du "document d'erreur", voir la section Configuration des options de votre site Web. Vous pouvez effectuer la configuration de base avec cette étape, avant de télécharger du contenu dans votre compartiment, comme indiqué à l'étape suivante.
Télécharger du contenu dans votre compartiment
Le contenu de vos fichiers de sites Web statiques hébergés se concentre naturellement sur les informations et les médias. Les générateurs open source répertoriés à l'adresse StaticGenconstituent une approche populaire pour la création de contenu pour les sites Web statiques. Pour les besoins de ce tutoriel, nous n'avons besoin que de deux fichiers:
- Une page d'index, généralement écrite en HTML et nommée
index.html
, qui se charge par défaut pour les visiteurs de votre site - Une page d'erreur, également en HTML et ici nommée
error.html
; généralement, la page d'erreur est chargée lorsqu'un visiteur tente d'accéder à un objet qui n'est pas présent ou qui n'a pas d'accès public
D'autres fichiers, tels que des images, des fichiers PDF ou des vidéos, peuvent également être téléchargés dans votre compartiment (mais ce tutoriel se concentrera uniquement sur un ensemble minimal d'exigences).
Pour les besoins de ce tutoriel, placez les pages HTML de l'index et le traitement des erreurs dans un répertoire local. Remplacez le contenu de la marque de réservation comme indiqué dans l'exemple de commande pour télécharger vos fichiers HTML:
ibmcloud cos object-put --bucket BUCKET_NAME --key KEY [--body FILE_PATH]
Vous avez peut-être déjà terminé la configuration de base pour l'hébergement de votre site Web statique. Les fichiers peuvent être téléchargés directement dans la console une fois que vous avez nommé et configuré votre compartiment. Notez que l'étape est facultative, comme illustré à la figure 4, et qu'elle peut se produire à tout moment avant le test de votre nouveau site Web hébergé.
Pour le reste du tutoriel, nous supposerons que la clé d'objet de la page d'index est index.html
et que la clé du document d'erreur est error.html
, bien que tout nom de fichier approprié puisse être utilisé pour le
suffixe ou la clé.
Configurez les options de votre site Web
Il existe plus d'options que ce tutoriel ne peut décrire, et pour les besoins de ce tutoriel, il suffit de définir la configuration pour commencer à utiliser la fonction de site Web statique.
Créez un fichier JSON avec les informations de configuration appropriées:
{
"ErrorDocument": {
"Key": "error.html"
},
"IndexDocument": {
"Suffix": "index.html"
}
}
Remplacez le contenu de la marque de réservation comme indiqué dans l'exemple de commande pour configurer le site Web:
ibmcloud cos bucket-website-put --bucket BUCKET_NAME --website-configuration file://<filename.json>
Vous avez peut-être effectué cette étape lors de la création de votre compartiment, car la configuration de base de votre site Web statique hébergé détermine quand et comment le contenu est affiché. Pour les visiteurs de votre site Web qui ne parviennent pas à fournir une clé ou une page Web, le fichier par défaut s'affiche à la place. Lorsque vos utilisateurs rencontrent une erreur, la clé de la page d'erreur détermine le contenu que les visiteurs recevront. Les options de configuration des pages par défaut et d'erreur sont répétées pour référence.
Test et visite de votre nouveau site Web
Une fois que vous avez configuré votre compartiment pour fournir des en-têtes HTTP à l'aide de l'exemple de commande, tout ce que vous avez à faire pour tester votre nouveau site est de visiter l'URL du site. Notez le protocole affiché (http), après avoir remplacé les marques de réservation par vos propres choix effectués précédemment dans ce tutoriel:
http://<bucketname>.s3-web.<endpoint>/
Avec le test réussi de votre nouveau site, vous pouvez désormais explorer d'autres options et ajouter du contenu.
Etapes suivantes
La description détaillée des options de configuration pour les sites Web statiques hébergés par IBM Cloud Object Storage est disponible dans la documentation d'API.