Host a static website by using an MSE cloud-native gateway and Alibaba Cloud OSS - Microservices Engine

Dans une architecture découplant le frontend du backend, les ressources statiques (HTML, CSS, JavaScript) sont stockées dans un service de stockage d'objets, tandis que les services backend s'exécutent de manière indépendante. Si votre application utilise déjà une passerelle cloud-native Microservices Engine (MSE) pour router le trafic des API, vous pouvez ajouter Object Storage Service (OSS) en tant que service backend sur la même passerelle. Cette approche offre un point d'entrée unique pour le contenu statique et les API backend, tout en appliquant à l'ensemble du trafic des règles de réécriture d'URL, de manipulation des en-têtes et de routage au niveau de la passerelle.

Ce tutoriel explique comment stocker des fichiers statiques dans un compartiment OSS et configurer une passerelle cloud-native MSE pour les diffuser. Une fois la configuration terminée, la passerelle achemine les requêtes telles que example.com/index.html vers les fichiers présents dans OSS, et les requêtes telles que example.com/app vers les services backend.

Quand utiliser cette approche

Privilégiez l'utilisation d'une passerelle cloud-native MSE pour diffuser du contenu statique depuis OSS lorsque :

Votre application exploite déjà une passerelle cloud-native MSE pour le routage des API backend et vous souhaitez disposer d'un point d'entrée unique pour les ressources statiques comme pour les API.
Vous avez besoin de réécrire les URL, de manipuler les en-têtes ou d'appliquer d'autres stratégies au niveau de la passerelle pour le contenu statique.

Pour un site web statique autonome ne reposant sur aucun service backend, hébergement de sites web statiques OSS constitue une alternative plus simple.

Fonctionnement

Le schéma ci-dessous illustre le flux des requêtes :

Client request
     |
     v
MSE cloud-native gateway
     |
     |-- /index.html, /style.css, ...  -->  OSS bucket (static files)
     |
     +-- /app, /api/...               -->  Backend services

La passerelle fait correspondre chaque requête entrante à ses règles de routage. Les requêtes visant des fichiers statiques sont dirigées vers le endpoint interne du compartiment OSS, avec une réécriture de l'en-tête host afin qu'OSS résolve le bon compartiment. L'en-tête de réponse content-disposition est supprimé pour que les navigateurs affichent les fichiers directement plutôt que de les télécharger.

Prérequis

Avant de commencer, assurez-vous de disposer des éléments suivants :

Une passerelle cloud-native MSE. Pour plus d'informations, consultez la rubrique Créer une passerelle cloud-native MSE

Étape 1 : Créer un compartiment OSS et y importer une page statique

Créez un compartiment OSS doté d'un accès en lecture public et importez-y un exemple de page HTML.

Connectez-vous à la console OSS.
Dans le volet de navigation de gauche, cliquez sur Buckets, puis sur Create Bucket.

Dans le panneau Create Bucket, configurez les paramètres suivants et conservez les valeurs par défaut pour tous les autres champs. Cliquez ensuite sur OK.

Une liste de contrôle d'accès (ACL) en lecture public permet à toute personne de lire les objets contenus dans ce compartiment. Pour les environnements de production, évaluez si une ACL plus restrictive associée à des URL signées répond mieux à vos exigences de sécurité.

Parameter	Value
Bucket Name	Saisissez un nom de compartiment. Ce tutoriel utilise `static-demo-0`.
Storage Class	Sélectionnez Standard.
ACL	Cliquez sur Public Read. Lorsque la confirmation Are you sure you want to select Public Read? s'affiche, cliquez sur Continue.

Sur la page Buckets, cliquez sur le nom du compartiment que vous venez de créer. Dans le volet Objects, cliquez sur Upload Object.

Définissez le paramètre Object ACL sur Inherited from Bucket et importez le fichier index.html suivant :

   <html>
      <head>
          <title>Hello OSS!</title>
          <meta charset="utf-8">
      </head>
      <body>
          <p>Configure static website hosting for Alibaba Cloud OSS.</p>
          <p>This is the index page.</p>
      </body>
   </html>

Cliquez sur Upload Object. Une fois l'importation terminée, le nom du fichier, sa taille et sa classe de stockage apparaissent dans le répertoire de destination.

Étape 2 (facultative) : Définir une page d'accueil par défaut et une page d'erreur 404

Configurez une page d'accueil par défaut afin que les requêtes adressées à / renvoient index.html. Vous pouvez également définir une page 404 personnalisée pour les chemins non trouvés.

Définir une page d'accueil par défaut

Dans la console OSS, accédez aux paramètres de votre compartiment et définissez index.html comme page d'accueil par défaut.

Set homepage

Définir une page 404 personnalisée

Importez un fichier 404.html dans le compartiment :

   <html>
      <head>
          <title>The page you visited does not exist</title>
          <meta charset="utf-8">
      </head>
      <body>
          <p>The page you visited does not exist.</p>
          <p>You can try to visit the homepage.</p>
      </body>
   </html>

Dans les paramètres d'hébergement de site web statique du compartiment, définissez 404.html comme page d'erreur.

Pour obtenir des instructions détaillées, consultez la rubrique Configurer l'hébergement de sites web statiques.

Étape 3 : Récupérer le endpoint interne du compartiment OSS

Chaque compartiment OSS possède un nom de domaine par défaut. Vous aurez besoin du endpoint interne pour configurer le service de passerelle à l'étape suivante.

Dans la console OSS, ouvrez la page Overview du compartiment et repérez le endpoint interne dans la section Port. Le endpoint respecte le format suivant : <bucket-name>.oss-<region>-internal.aliyuncs.com.

Bucket endpoint

Pour plus d'informations, consultez la rubrique Accéder à OSS depuis une instance ECS via un endpoint interne.

Étape 4 : Ajouter le compartiment OSS en tant que service de passerelle

La passerelle cloud-native MSE traite chaque compartiment OSS comme un service découvert via DNS. Enregistrez le endpoint interne du compartiment en tant que service sur la passerelle.

Connectez-vous à la console MSE.
Dans le volet de navigation de gauche, choisissez Cloud-native Gateway > Gateways. Cliquez sur le nom de votre passerelle.
Dans le volet de navigation de gauche, cliquez sur Routes. Sur la page qui s'affiche, sélectionnez l'onglet Services.

Cliquez sur Add Service et configurez les paramètres suivants dans le panneau Add Service. Cliquez ensuite sur OK.

Parameter	Value
Service Source	Sélectionnez DNS Domain Name.
Service Name	Saisissez un nom pour le service. Ce tutoriel utilise `static`.
Service Port	Saisissez `80`.
Domain Names	Saisissez le endpoint interne récupéré à l'étape 3, par exemple `static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com`.
TLS mode	Sélectionnez Disabled.

Étape 5 : Créer une route et configurer les stratégies

Créez une route qui transfère les requêtes de fichiers statiques vers le service OSS, puis ajoutez une stratégie de réécriture et une stratégie d'en-tête.

Créer la route

Connectez-vous à la console MSE.
Dans le volet de navigation de gauche, choisissez Cloud-native Gateway > Gateways. Cliquez sur le nom de votre passerelle.
Dans le volet de navigation de gauche, cliquez sur Routes, puis sélectionnez l'onglet Routes.
Cliquez sur Add Route. Définissez la règle de correspondance sur Prefix, le chemin d'accès sur / et le service de destination sur static. Pour plus d'informations, consultez la rubrique Créer une route.

Ajouter une stratégie de réécriture

La stratégie de réécriture modifie l'en-tête host afin qu'OSS résolve le bon compartiment lorsque la passerelle transfère la requête.

Sur l'onglet Routes, cliquez sur le nom de la route que vous avez créée. Sélectionnez l'onglet Policies.
Dans le volet de navigation de gauche de l'onglet Policies, cliquez sur Rewrite. Saisissez le endpoint interne du compartiment OSS (par exemple, static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com) dans le champ Destination Host, puis cliquez sur Save. Pour plus d'informations, consultez la rubrique Configurer une stratégie de réécriture.

Supprimer l'en-tête de réponse content-disposition

Par défaut, OSS définit un en-tête content-disposition qui force les navigateurs à télécharger les fichiers au lieu de les afficher. Supprimez cet en-tête pour que les pages statiques s'affichent correctement dans le navigateur.

Dans le volet de navigation de gauche de l'onglet Policies, cliquez sur Edit Header. Ajoutez une stratégie pour supprimer l'en-tête content-disposition des réponses OSS, puis activez-la. Pour plus d'informations, consultez la rubrique Configurer une stratégie de définition d'en-tête.

Vérifier le résultat

Testez la configuration en visitant les URL suivantes dans un navigateur. Remplacez example.com par votre nom de domaine de service.

URL	Expected result
`example.com`	Renvoie `index.html` (la page d'accueil par défaut configurée à l'étape 2).
`example.com/index.html`	Renvoie directement `index.html`.
`example.com/test`	Renvoie `404.html` (la page d'erreur personnalisée configurée à l'étape 2).

Considérations pour la production

Une fois les fonctionnalités de base validées, prenez en compte les éléments suivants avant de mettre en production :

HTTPS : Configurez un certificat SSL sur la passerelle cloud-native MSE pour diffuser le contenu statique via HTTPS.
Mise en cache : Placez Alibaba Cloud CDN devant la passerelle ou configurez des stratégies de cache sur la passerelle elle-même afin de réduire la latence et les coûts d'accès à OSS.
Contrôle d'accès : Renforcez l'ACL du compartiment et utilisez des URL signées ou une authentification au niveau de la passerelle plutôt qu'un accès en lecture public.