Object Storage Service:Static Website Hosting

Étape 1 : Configurer l'hébergement de site web statique

Configurez une page d'accueil par défaut et une page d'erreur pour définir les règles d'accès de base.

1. Accédez à la page Compartiments, cliquez sur le nom du compartiment cible, puis dans le volet de navigation de gauche, cliquez sur Data Management > Static Page.

2. Cliquez sur Settings et configurez les paramètres suivants :

   • Default Homepage : définissez la valeur sur index.html.

   • Subfolder Homepage : choisissez d'activer ou non une page d'accueil distincte pour les sous-dossiers en fonction de la structure de votre site web.

     • Disabled (Default) : convient aux sites web simples ne nécessitant pas de pages d'accueil distinctes pour les sous-dossiers. Avec cette option, tout chemin d'URL se terminant par une barre oblique (/) renvoie la page d'accueil par défaut du répertoire racine.

     • Enabled : convient aux sites web complexes comportant plusieurs sections de contenu indépendantes, telles que /blog/ ou /docs/, où chaque section possède sa propre page d'accueil. Lorsque cette option est activée, vous devez également configurer la Subfolder 404 Rule pour définir la réponse du système lorsqu'un utilisateur demande un fichier inexistant :

       • Redirect (Default) : Redirige vers l'URL du répertoire. Si le fichier demandé n'existe pas, le système vérifie la présence d'une page d'accueil dans le répertoire correspondant. Si une page d'accueil existe, le système renvoie une réponse de redirection 302 et la barre d'adresse du navigateur est mise à jour avec le chemin du répertoire. Par exemple, .../subdir devient .../subdir/.

       • Index : Renvoie directement le contenu de la page d'accueil. Similaire à Redirect, mais si une page d'accueil est trouvée, le système renvoie son contenu avec un code d'état 200. La barre d'adresse du navigateur reste inchangée.

       • NoSuchKey : Renvoie directement une erreur 404. Il s'agit de la règle la plus stricte. Si le fichier demandé n'existe pas, le système renvoie une erreur 404, indépendamment de l'existence d'une page d'accueil dans le répertoire correspondant.

         Règle 404 pour les sous-dossiers

         Lorsque la fonctionnalité de page d'accueil pour les sous-dossiers est activée, cette règle définit la réponse du système aux demandes concernant un objet inexistant, garantissant ainsi une gestion correcte des routes de votre site web.

         Mécanisme principal : requêtes d'objet vs requêtes de répertoire

         Le comportement de la règle dépend de la structure de l'URL, notamment si elle se termine par une barre oblique (/) :

         • Requête d'objet : l'URL ne se termine pas par /, par exemple .../subdir. Le système interprète cela comme une demande d'un objet nommé subdir.

         • Requête de répertoire : l'URL se termine par /, par exemple .../subdir/. Le système interprète cela comme une demande de la page d'accueil par défaut du répertoire subdir.

         La règle 404 pour les sous-dossiers n'est déclenchée que lorsqu'une requête d'objet échoue (c'est-à-dire que l'objet n'existe pas).

         Comportement de la règle

         Le tableau suivant explique le comportement de chaque règle lorsqu'une demande est effectuée pour un objet inexistant, tel que http://example.com/subdir.

         Règle	Comportement principal	Flux de traitement	Résultat final (dépend de l'existence de subdir/index.html)
         Redirect (Default)	Redirige vers l'URL du répertoire : le système vérifie la présence d'une page d'accueil dans le répertoire correspondant. S'il en trouve une, il renvoie une réponse de redirection 302.	L'objet subdir est introuvable, ce qui déclenche la règle. Le système vérifie si subdir/index.html existe. S'il existe, une réponse 302 Found est renvoyée avec l'en-tête Location pointant vers .../subdir/. Sinon, une réponse 404 Not Found est renvoyée.	S'il existe : le contenu de la page d'accueil s'affiche et la barre d'adresse du navigateur est mise à jour vers .../subdir/. S'il n'existe pas : la page d'erreur 404 s'affiche.
         Index	Renvoie directement le contenu de la page d'accueil : le système vérifie la présence d'une page d'accueil dans le répertoire correspondant. S'il en trouve une, il renvoie le contenu avec un code d'état 200.	L'objet subdir est introuvable, ce qui déclenche la règle. Le système vérifie si subdir/index.html existe. S'il existe, le contenu du fichier et un statut 200 OK sont renvoyés. Sinon, une réponse 404 Not Found est renvoyée.	S'il existe : le contenu de la page d'accueil s'affiche et la barre d'adresse du navigateur reste .../subdir. S'il n'existe pas : la page d'erreur 404 s'affiche.
         NoSuchKey	Renvoie directement une erreur 404 : le système n'effectue aucune vérification supplémentaire du répertoire ou de la page d'accueil.	L'objet subdir est introuvable, ce qui déclenche la règle. Une réponse 404 Not Found est renvoyée immédiatement.	Qu'il existe ou non : renvoie toujours une page d'erreur 404.

   • Default 404 Page : définissez la valeur sur error.html.

   • Error Page Status Code : sélectionnez 404.

3. Cliquez sur Save.

Étape 2 : Télécharger les fichiers du site web

Téléchargez vos fichiers HTML préparés dans le compartiment pour fournir du contenu à votre site web.

1. Téléchargez et extrayez le fichier d'exemple html.zip, ou utilisez vos propres fichiers de projet.

2. Dans le volet de navigation de gauche, cliquez sur Object Management > Objects.

3. Faites glisser les fichiers d'exemple ou vos fichiers de projet existants vers la fenêtre de téléchargement. Une fois les fichiers ajoutés à la liste, cliquez sur Upload Object.

   Remarque

   Lorsque vous mettez à jour le contenu du site web, le téléchargement d'un objet portant le même nom écrase directement l'objet existant. Vous n'avez pas besoin de supprimer l'ancien objet au préalable. Un écrasement remplace l'intégralité de l'objet et le contenu précédent n'est plus conservé. Si le versioning est activé pour le compartiment, l'écrasement conserve la version précédente, que vous pouvez utiliser pour effectuer un retour arrière. Si le versioning n'est pas activé, l'écrasement est irréversible.

Étape 3 : Définir les autorisations du compartiment

Configurez les autorisations de lecture publique pour rendre le contenu de votre site web accessible aux internautes.

1. La fonctionnalité Block Public Access est activée par défaut lors de la création d'un compartiment OSS. Cette fonctionnalité vous empêche de définir la liste de contrôle d'accès (ACL) du compartiment sur public-read ou public-read-write. Vous devez d'abord désactiver cette fonctionnalité.

   1. Dans le volet de navigation de gauche, cliquez sur Permission Control > Block Public Access.

   2. Cliquez sur le commutateur Block Public Access. Dans la boîte de dialogue qui s'affiche, saisissez I confirm that I want to disable Block Public Access, puis cliquez sur OK.

2. Définissez les autorisations d'accès du compartiment sur lecture publique.

   1. Accédez à l'onglet Access Control List et cliquez sur Set.

   2. Définissez Bucket ACL sur Public Read. Dans la boîte de dialogue qui s'affiche, cliquez sur Continue.

   3. Cliquez sur Enregistrer.

Étape 4 : Vérifier la configuration du site web

Testez votre site web pour confirmer que la fonctionnalité d'hébergement de site web statique fonctionne correctement.

• Vérifier l'accès à la page d'accueil : dans un navigateur, accédez à votre nom de domaine personnalisé, par exemple http://example.com, pour afficher le résultat.

  Si la page affiche la page d'accueil par défaut de l'hébergement de site web statique OSS, intitulée Welcome to OSS avec le sous-titre This is a static homepage, et comporte trois boutons (Product Details, Product Console et Product Documentation) en bas, la configuration de votre hébergement de site web statique fonctionne.

• Vérifier la page 404 : dans un navigateur, essayez d'accéder à un fichier inexistant, par exemple http://example.com/missing-object.

  Si la page affiche le titre Welcome to OSS et le message This is a 404 page, votre page d'erreur 404 est correctement configurée.

Étape 1 : Configurer l'hébergement SPA

Configurez les paramètres d'hébergement pour garantir le bon fonctionnement du routage côté client.

1. Accédez à la page Compartiments, cliquez sur le nom du compartiment cible, puis dans le volet de navigation de gauche, cliquez sur Data Management > Static Page.

2. Cliquez sur Settings et configurez les paramètres suivants :

   • Default Homepage : définissez la valeur sur index.html.

   • Subfolder Homepage : sélectionnez Disabled. Avec ce paramètre, toute demande adressée au domaine du site web statique ou à toute URL sous ce domaine se terminant par une barre oblique (/) renvoie la page d'accueil par défaut du répertoire racine.

   • Default 404 Page : définissez la valeur sur index.html (configuration critique : redirige toutes les routes vers le point d'entrée de l'application).

   • Error Page Status Code : sélectionnez 200 (garantit que les transitions de route renvoient le code d'état correct).

3. Cliquez sur Save.

Étape 2 : Télécharger les fichiers de l'application

Téléchargez vos fichiers SPA dans le compartiment pour terminer le déploiement.

1. Téléchargez et extrayez l'application d'exemple demo.zip, ou utilisez vos propres fichiers d'application.

2. Dans le volet de navigation de gauche, cliquez sur Object Management > Objects.

3. Faites glisser tous les fichiers du répertoire demo ou vos propres fichiers d'application vers la fenêtre de téléchargement. Une fois tous les fichiers ajoutés à la liste, cliquez sur Upload Object.

Étape 3 : Définir les autorisations du compartiment

Configurez les autorisations d'accès public afin que votre SPA soit accessible aux utilisateurs.

1. Désactivez Block Public Access pour le compartiment.

   1. Dans le volet de navigation de gauche, cliquez sur Permission Control > Block Public Access.

   2. Cliquez sur le commutateur Block Public Access. Dans la boîte de dialogue qui s'affiche, saisissez I confirm that I want to disable Block Public Access, puis cliquez sur OK.

2. Définissez les autorisations d'accès du compartiment sur lecture publique.

   1. Accédez à l'onglet Access Control List et cliquez sur Set.

   2. Définissez Bucket ACL sur Public Read. Dans la boîte de dialogue qui s'affiche, cliquez sur Continue.

   3. Cliquez sur Enregistrer.

Étape 4 : Vérifier le déploiement de l'application

Testez votre site web pour confirmer que le SPA gère correctement les transitions de route.

• Vérifier l'accès à la page d'accueil : dans un navigateur, accédez à votre nom de domaine personnalisé (par exemple, http://example.com) pour accéder au SPA. Le résultat est illustré dans la figure suivante.

  

• Vérifier le comportement 404 : dans un navigateur, essayez d'accéder à un fichier inexistant, par exemple http://example.com/missing-object. La demande est redirigée vers le point d'entrée de l'application et un code d'état 200 OK est renvoyé.

Bonnes pratiques

• Transport sécurisé : activer l'accès HTTPS

  Les navigateurs modernes affichent des avertissements « non sécurisé » pour les sites web HTTP et les moteurs de recherche classent mieux les sites HTTPS. Imposez l'accès HTTPS pour votre nom de domaine personnalisé en suivant le guide pour accéder à OSS via HTTPS. HTTPS utilise TLS/SSL pour chiffrer les données en transit, empêchant ainsi le vol ou l'altération des données.

• Optimisation des performances : configurer l'accélération CDN

  Si votre site web statique dessert un public mondial ou gère un trafic à forte concurrence, configurez l'accélération CDN pour mettre en cache le contenu sur des nœuds périphériques dans le monde entier. Cela améliore la vitesse d'accès et réduit les coûts de trafic OSS.

  Une fois l'accélération CDN activée, les pages sont servies à partir du contenu mis en cache sur les nœuds périphériques. Après avoir écrasé un fichier, les demandes peuvent toujours renvoyer la version précédente jusqu'à l'expiration du cache. Par conséquent, après avoir mis à jour le contenu du site web, actualisez le cache CDN pour les fichiers ou répertoires mis à jour, et vérifiez le site web uniquement après la fin de l'actualisation. Cela évite qu'une page obsolète ne soit confondue avec un échec de déploiement.

• Partage de ressources cross-origin (CORS) : configurer les règles CORS

  Les SPA appellent souvent des API backend ou accèdent à des ressources tierces, ce qui peut être restreint par la politique de même origine du navigateur. Configurez les règles CORS pour spécifier les origines, méthodes et en-têtes autorisés afin que votre application puisse accéder aux API et ressources externes nécessaires.

• Gestion des versions : implémenter les déploiements et les retours arrière

  Activez le versioning OSS et intégrez-le à des outils d'automatisation tels que Jenkins pour créer un flux de travail CI/CD permettant des déploiements rapides et des retours arrière d'urgence.

Atténuation des risques

• Prévention du vol de bande passante : configurer la protection contre le hotlinking

  Les autres sites web qui créent des liens directs vers vos ressources statiques augmentent les coûts de trafic et la charge du serveur. Configurez la protection contre le hotlinking basée sur le Referer pour créer une liste blanche des domaines autorisés et empêcher l'utilisation non autorisée de la bande passante.

• Surveillance de l'accès : activer les journaux d'accès

  Activez la requête de journaux en temps réel pour enregistrer toutes les demandes d'accès. Cela vous aide à identifier les modèles d'accès inhabituels, à analyser le comportement des utilisateurs et à optimiser les performances du site web.

Erreur 404 lors de l'actualisation d'une page SPA

Dans une application monopage, toutes les routes sont gérées par JavaScript côté client. Lorsque vous accédez directement ou actualisez une route autre que la racine, le serveur ne trouve pas de fichier physique correspondant. Pour résoudre ce problème, définissez la Default 404 Page sur index.html et le Error Page Status Code sur 200. Cette configuration redirige tous les chemins « introuvables » vers le point d'entrée de l'application, permettant au routeur côté client de les gérer correctement.

Désactivation de l'hébergement de site web statique

1. Accédez à la page Compartiments, cliquez sur le nom du compartiment cible, puis dans le volet de navigation de gauche, cliquez sur Data Management > Static Page.

2. Cliquez sur Settings, effacez les paramètres Default Homepage et Default 404 Page, puis cliquez sur Save pour désactiver la fonctionnalité d'hébergement de site web statique.

Prise en charge du contenu dynamique

L'hébergement de site web statique prend uniquement en charge les fichiers statiques tels que HTML, CSS et JavaScript. Les langages côté serveur tels que PHP, Python ou Java ne sont pas pris en charge. Pour les fonctionnalités dynamiques, utilisez le rendu côté client avec un framework frontend ou appelez des API backend via des services serverless tels que Function Compute.