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

Présentation

Si vous disposez d'une application Web que vous voulez héberger sur Oracle Cloud Infrastructure (OCI) et que vous voulez configurer l'hébergement de sites Web statiques, dans ce tutoriel, nous étudions la configuration de l'hébergement statique d'une application Web JavaScript compilée à 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 servir un fichier statique par 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 à un coût moindre.

Objectifs

Découvrez comment tirer parti d'OCI Object Storage et d'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.

Conditions requises

Accès à une location Oracle Cloud.
Une application AOT respectée (les frameworks et bibliothèques pris en charge sont Angular 2+, ReactJs, NestJs, VueJs, Ionic, etc.).

Tâche 1 : Créer un seau de stockage d'objets Oracle

Commençons par créer un nouveau seau dans le service de stockage d'objets pour OCI. Ce seau sera utilisé pour héberger votre site Web statique.

Seau de stockage d'objets

Tâche 2 : Charger les fichiers de distribution dans le seau

Chargez vos fichiers de répartition d'application dans le seau créé lors de 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 sont la sortie de la compilation webpack.

Fichiers de répartition

Conseil : Si vous voulez utiliser oci-cli pour charger vos fichiers, veillez à spécifier le paramètre --content-type auto pour vous assurer que le type de contenu est défini correctement.

Tâche 3 : Créer une demande préauthentification

Pour permettre à Oracle API Gateway de servir les fichiers de distribution sur Internet, vous devez créer un paramètre de demande préauthentifiée pour le seau de stockage d'objets dans lequel les fichiers de répartition 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 points d'extrémité privés qui sont accessibles depuis votre réseau, et que vous pouvez exposer avec des adresses IP publiques si vous souhaitez qu'elles acceptent le trafic Internet. Les points d'extrémité prennent en charge la validation, la transformation des demandes et des réponses, la CORS, l'authentification et l'autorisation, ainsi que la limitation des demandes pour les API. Pour plus de détails, voir Aperçu d'Oracle API Gateway.

Naviguez jusqu'au menu OCI, aux services de développement, au service de passerelle d'API et cliquez sur Créer.

Note : Vous aurez besoin d'un réseau en nuage virtuel pour déployer cette passerelle 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 qu'Oracle API Gateway a été créée, naviguez jusqu'à Déploiements et créez un nouveau déploiement.

Sélectionnez Créer à partir de zéro et réglez le préfixe de chemin à "/". Il s'agit du chemin de base de l'URL.
Configurez TLS, CORS, etc. ici ou cliquez sur Suivant pour passer à l'étape suivante.
Sélectionnez Aucune authentification et cliquez sur Suivant. Nous n'avons pas besoin d'ajouter d'authentification pour notre site Web statique.

Tâche 6 : Ajouter des parcours

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

Entrez /{req*} dans le champ Chemin.
Sélectionnez GET dans la liste déroulante Méthodes.
Sélectionnez Modifier les serveurs dorsaux multiples ajoutés.
Sélectionnez Chemin dans le champ de sélection.
Cliquez sur Définir un serveur dorsal.
Créez une règle par défaut, entrez Nom comme valeur par défaut, Type de correspondance comme Au choix, et cochez la case Définir comme valeur par défaut, sélectionnez l'élément dorsal comme HTTP et entrez l'URL de stockage d'objets pour la page index.html dans le champ URL et cliquez sur Créer.
Create a js file rule, enter Name as js-rule, Match Type as Wildcard and *.js as the wildcard expression, select backend as HTTP and enter the object storage bucket URL followed by ${request.path[req]} page in the URL field and click Create. Votre URL ressemblera à ceci
```
https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}
```
Cliquez sur Créer.
Créez des règles similaires pour les fichiers css, html, txt et json, si nécessaire.
Cliquez sur Suivant et terminez la création d'Oracle API Gateway et attendez qu'elle soit mise à jour.

Tâche 7 : Tester

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

Notes :

Si vous ne voyez pas l'application chargée, vérifiez si votre liste de sécurité ou votre groupe de sécurité de réseau dans votre VCN autorise le trafic vers Oracle API Gateway.

N'oubliez pas d'ajouter tous les différents types de fichier dont dispose votre application dans la définition dorsale.

Seules les applications compilées et les sites Web statiques AOT (Ahead of Time) 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 en nuage pour OCI)

Ressources d'apprentissage supplémentaires

Explorez d'autres laboratoires sur le site docs.oracle.com/learn ou accédez à plus de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

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

Titre et informations sur les droits d'auteur

Set Up OCI Object Storage and Oracle API Gateway for Static Website Hosting

G50312-01

Oracle et/ou ses sociétés affiliées.