Configurer OCI Object Storage et Oracle API Gateway pour l'hébergement de sites Web statiques

Introduction

Si vous disposez d'une application Web à héberger sur Oracle Cloud Infrastructure (OCI) et que vous voulez configurer l'hébergement de sites Web statiques, dans ce tutoriel, nous vous expliquons comment configurer l'hébergement statique d'une application Web JavaScript compilée en avance riche à l'aide d'OCI Object Storage et d'Oracle API Gateway. La même approche peut être appliquée à tout scénario dans lequel vous souhaitez traiter 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 utiliser 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éation d'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 dans 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 de votre répertoire d'application et constituent la sortie du build de package Web.

Fichiers distants

A savoir : Si vous souhaitez utiliser la commande oci-cli pour télécharger vos fichiers vers le serveur, veillez à spécifier le paramètre --content-type auto pour vous assurer que Content-Type est correctement défini.

Tâche 3 : création d'une demande pré-authentifiée

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

Nous allons l'utiliser lors de la configuration de API Gateway.

Tâche 4 : créer Oracle API Gateway

Le service Oracle API Gateway vous permet de publier des API avec les adresses privées accessibles à partir de votre réseau. Vous pouvez rendre ces API accessibles avec les 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, la spécification CORS, l'authentification et l'autorisation, ainsi que l'autorisation des demandes. Pour plus de détails, reportez-vous à Présentation d'Oracle API Gateway.

  1. Accédez à Menu OCI, Services de développeur, Passerelle API et cliquez sur Créer.

Remarque : vous aurez besoin d'un réseau cloud virtuel pour déployer Oracle API Gateway. Créez un VCN si aucun n'est déjà créé.

Oracle API Gateway

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

Une fois la passerelle Oracle API Gateway créée, 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 statique.

    Autorisation de déploiement

Tâche 6 : ajouter des routages

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

  1. Entrez /{req*} dans le champ de 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 le back-end.

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

    définition back-end

  7. Créez une règle de fichier js, entrez Nom en tant que règle js, Type de correspondance en tant que caractère générique et *.js en tant qu'expression générique, sélectionnez le back-end en tant que HTTP et entrez l'URL du bucket de stockage d'objets suivie de la page ${request.path[req]} dans le champ URL, puis cliquez sur Créer. 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 back-end

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

    back-end définition

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

Tâche 7 : tester

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 si votre liste de sécurité ou votre groupe de sécurité réseau dans votre VCN autorise le trafic vers Oracle API Gateway.

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

  3. Seules les applications compilées par 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 dans le code Javascript natif.

Accusés de réception

Auteur - Mayank Kakani (architecte cloud OCI)

Ressources de formation supplémentaires

Explorez d'autres ateliers sur le site docs.oracle.com/learn ou accédez à d'autres contenus d'apprentissage gratuits sur le canal Oracle Learning YouTube. En outre, visitez le site education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

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