Remarques :

Configuration d'OCI Object Storage et d'Oracle API Gateway pour l'hébergement de site Web statique

Introduction

Si vous disposez d'une application Web que vous souhaitez héberger sur Oracle Cloud Infrastructure (OCI) et que vous souhaitez configurer l'hébergement de site Web statique, ce tutoriel présente la configuration de l'hébergement statique d'une application Web JavaScript compilée avec OCI Object Storage et Oracle API Gateway. La même approche peut être appliquée à tout scénario dans lequel vous souhaitez servir un fichier statique sur HTTP, que ce soit pour une application plus simple ou des pages Web statiques et fournir une expérience en ligne fiable à vos utilisateurs sur la plate-forme OCI, le tout à moindre coût.

Objectifs

Découvrez comment exploiter OCI Object Storage et Oracle API Gateway pour héberger des sites Web statiques afin de déployer et de gérer efficacement du contenu Web sur Oracle Cloud Infrastructure.

Prérequis

Tâche 1 : créer un bucket Oracle Object Storage

Commençons par créer un bucket dans OCI Object Storage. Ce bucket sera utilisé pour héberger votre site Web statique.

Bucket Object Storage

Tâche 2 : télécharger les fichiers de distribution dans le bucket

Téléchargez vos fichiers de distribution d'application vers le bucket créé dans la tâche précédente. Vos fichiers de distribution d'application se trouvent généralement dans le dossier /dist du répertoire d'application et constituent la sortie du build de package Web.

Distribuer les fichiers

Tâche 3 : création d'une demande avant authentification

Pour permettre à Oracle API Gateway de servir les fichiers de distribution sur Internet, vous devez créer une demande pré-authentifiée PAR pour le bucket de stockage d'objet dans lequel les fichiers de distribution sont stockés.

Nous l'utiliserons lors de la configuration de la passerelle d'API.

Tâche 4 : créer Oracle API Gateway

Le service Oracle API Gateway vous permet de publier des API avec des adresses privées accessibles à partir de votre réseau. Vous pouvez les exposer avec des adresses IP publiques si vous voulez qu'elles acceptent le trafic Internet. Les adresses prennent en charge la validation d'API, la transformation des demandes et des réponses, l'authentification et l'autorisation CORS, ainsi que la limitation des demandes. Pour plus de détails, reportez-vous à Présentation d'Oracle API Gateway.

  1. Accédez au menu OCI, aux services de développeur, à API Gateway et cliquez sur Créer.

Remarque : vous aurez besoin d'un réseau cloud virtuel pour déployer cette passerelle Oracle API Gateway, créez un VCN s'il n'est pas déjà créé.

Oracle API Gateway

Tâche 5 : configurer le déploiement d'Oracle API Gateway

Une fois qu'Oracle API Gateway a été créé, accédez à Déploiements et créez un déploiement.

  1. Sélectionnez Créer à partir de zéro et définissez le préfixe de chemin sur "/". Il s'agit du chemin de base de l'URL.

    Déploiement de passerelle

  2. Configurez TLS, CORS, etc. ici ou cliquez sur Suivant pour passer à l'étape suivante.

  3. Sélectionnez Aucune authentification et cliquez sur Suivant. Nous n'avons pas besoin d'ajouter d'authentification pour notre site Web Static.

    Autorisation de déploiement

Tâche 6 : ajouter des routages

Dans l'assistant Déploiement d'API, ajoutez des routages qui étendent le chemin de base de nos déploiements.

  1. Entrez /{req*} dans le champ Chemin.

    Chemin de déploiement

  2. Sélectionnez GET dans la liste déroulante Methods.

  3. Sélectionnez Modifier les back-ends multiples ajoutés.

    Déploiement de plusieurs back-ends

  4. Sélectionnez Chemin dans le champ du sélecteur.

    Chemin de déploiement

  5. Cliquez sur Définir un back-end.

  6. Créez une règle par défaut, entrez Nom comme valeur par défaut, Type de correspondance comme N'importe lequel, cochez la case Définir comme valeur par défaut, sélectionnez back-end comme HTTP et entrez l'URL de stockage d'objet de la page index.html dans le champ URL, puis cliquez sur Créer.

    définition de back-end

  7. Créez une règle de fichier js, entrez Name en tant que règle js, Match Type en tant que caractère générique et *.js en tant qu'expression générique, sélectionnez backend en tant que HTTP et entrez l'URL de bucket de stockage d'objet suivie de la page {request.path[request]} dans le champ Url et cliquez sur Create. Votre URL ressemblera à ceci :

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

  8. Cliquez sur Créer.

    définition de back-end

  9. Créez des règles similaires pour les fichiers css, html, txt, json selon vos besoins.

    définir tout

  10. Cliquez sur Suivant et terminez la création d'Oracle API Gateway et attendez qu'il soit mis à jour.

Tâche 7 : Test

Récupérez l'URL de déploiement et entrez-la dans votre navigateur Web, ce qui devrait afficher votre application.

Remarques :

  1. Si l'application n'est pas chargée, vérifiez que vous avez ajouté la stratégie appropriée pour qu'Oracle API Gateway accède au bucket Object Storage.

  2. N'oubliez pas d'ajouter tous les différents types de fichier de votre application dans la définition de back-end.

  3. Seules les applications compilées AOT (Ahead of Time) et les sites Web statiques peuvent être configurés à l'aide de cette technique. Assurez-vous que votre application est compilée en code Javascript natif.

Remerciements

Auteur - Mayank Kakani (architecte cloud OCI)

Ressources de formation supplémentaires

Parcourez d'autres ateliers sur docs.oracle.com/learn ou accédez à davantage de contenus de formation gratuits sur le canal Oracle Learning YouTube. De plus, rendez-vous sur education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

Pour obtenir de la documentation sur le produit, visitez Oracle Help Center.