Guide ultime pour héberger des panoramas en gigapixels
Cet article concerne uniquement l'hébergement. Pour plus d'informations sur l'art de créer des panoramas et la photographie à 360°, consultez ces articles :
Le guide ultime de la photographie panoramique,
Base de nivellement pour la photographie panoramique,
Le guide ultime de la photographie à 360°
Meilleur logiciel pour la photographie 360
Configuration d'un serveur Web sur Amazon S3 et utilisation de Cloudfront pour mettre en cache le contenu
L'hébergement de panoramas Gigapixels est un problème pour les photographes depuis toujours. Vous pouvez utiliser une plateforme en ligne comme 360 Villes ou Kuula pour héberger des visites virtuelles, mais vous dépendez entièrement de la plateforme pour rester en activité et la plupart n'hébergeront pas vos panoramas. Le plugin WordPress Panopress n'a pas été mis à jour depuis 6 ans, mais vous pouvez l'utiliser Zoomer pour permettre les panoramas auto-hébergés. Mais il ne prend pas en charge les images à 350°. Pas la situation la plus satisfaisante !
J'ai essayé plusieurs hébergeurs en ligne avant d'être frustré par les limitations. Finalement, j'ai décidé de le faire moi-même et j'ai documenté l'ensemble du processus pour le rendre plus facile à gérer pour les personnes non techniques.
J'ai décidé d'utiliser Amazon S3 pour héberger les images et Front de nuage pour les mettre en cache.
Configurer un site web avec Amazon S3 et CloudFront n'est pas à la portée de tous. J'ai choisi cette solution avec un besoin spécifique : héberger des médias très volumineux sous forme de photographies panoramiques divisées en milliers de « tuiles » pour un transfert et un rendu rapides. Je n'utilise pas S3 pour héberger mon site web, simplement pour héberger des images, mais il est parfaitement possible d'héberger un site web et d'utiliser CloudFront comme solution CDN pour diffuser rapidement du contenu à des clients distants.
Lorsque vous utilisez Cloudfront comme proxy, votre contenu est diffusé à partir du serveur CloudFront le plus proche de l'emplacement de la demande. Mais vous devez d'abord configurer votre site dans Amazon S3. Ce didacticiel explique comment configurer Amazon S3 pour héberger un site Web. comment configurer CloudFront comme proxy de distribution de contenu pour le site Web et comment configurer un certificat SSL pour ce contenu.
Ce que vous apprendrez :
Pourquoi utiliser Amazon S3 et CloudFront
Facilité d'utilisation
Je suis désolé, mais c'était censé être ironique. L'hébergement WordPress est bien plus simple sur presque toutes les autres plateformes !
Coût
La plupart des sociétés d'hébergement Web facturent des frais réguliers basés sur l'espace ou les inodes (le nombre d'objets servis). Amazon facture les données transférées, ce qui les rend moins chères que la plupart des sociétés d'hébergement Web pour certains types de contenu, en particulier les panoramas où le volume est élevé et le nombre d'objets servis se chiffre en milliers pour un seul panorama.
Ce qui se passe en anglais simple
Si nous décrivons un site Web dans les termes les plus simples possibles, il se compose d’un ensemble de pages, souvent liées entre elles, contenant du texte et des images.
Le site Web le plus simple possible en code ressemble à ceci :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<p>Bienvenue sur mon fantastique nouveau site Web !</p>
</body>
</html>Il s'agit du code HTML brut créé à la main ou généré par un système de gestion de contenu comme WordPress, servi par un serveur Web et converti par le navigateur en quelque chose de plus agréable à l'œil humain.
Tous les sites Web fonctionnent de cette manière. Le serveur fournit un code au format HTML, le navigateur interprète ce code et le restitue sous forme de page visuelle. Les panoramas fonctionnent exactement de la même manière, l'image d'origine est divisée en tuiles et « enveloppée » dans un cadre HTML 5 qui est en fait un site Web.
Lorsque vous installez du code sur Amazon S3, Amazon fournit le serveur Web et diffuse ce contenu en réponse à une demande d'un navigateur. Le nom de domaine (domaine lisible par l'homme tel que mygreatcompany.com) est traduit en une référence à votre espace sur le serveur Amazon dans votre enregistrement DNS.
Si vous avez un site Web complexe avec beaucoup de contenu lu par des internautes du monde entier, il est judicieux d'utiliser un réseau de distribution de contenu (CDN) comme proxy pour diffuser ce contenu à partir d'un nœud proche de l'origine de la requête. Si j'ai une audience à San Francisco par exemple et que je suis basé en Espagne, mes pages Web mettront plus de temps à atteindre San Francisco depuis l'Europe que depuis un serveur aux États-Unis.
Nous utiliserons Amazon Cloudfront comme proxy pour diffuser notre contenu sans que la requête ne passe par notre installation S3. Cloudfront actualise périodiquement son cache à partir de l'installation S3 afin de maintenir le contenu à jour.
Amazon S3
Terminologie
Seau – Il s’agit de votre espace Web. Vous pouvez créer plusieurs compartiments à des fins différentes, mais pour créer un site Web simple ou proposer un panorama, nous n’en avons besoin que d’un seul.
Objet – dans le monde d’Amazon, tout est un objet, y compris votre bucket.
Point final – URL
Le tableau de bord S3
La première tâche consiste à créer un compte sur Amazon. N'utilisez pas votre identifiant d'achat, créez-en un nouveau spécialement pour utiliser les services techniques d'Amazon.
Ouvrir le Site Web Amazon S3 dans votre navigateur.
Cliquez sur le bouton Commencer.
Créez un nouveau compte. Vous devrez passer par plusieurs étapes de vérification d'identité, alors ayez votre téléphone portable à portée de main et un client de messagerie.
Une fois votre compte créé, connectez-vous à la console. Assurez-vous de sélectionner l'utilisateur Root.
Il s'agit de la console Web. Cliquez sur S3 dans la section Récemment visité.
Cliquez sur Créer un bucket
Créer un bucket pour le contenu
Cette page contient plusieurs paramètres importants que vous devez remplir soigneusement.
- Configuration générale
- Bloquer l'accès public
- Gestion des versions de buckets
- Cryptage par défaut
- Paramètres avancés
sont ceux dont il faut se méfier.
Nom du bucket – utilisez quelque chose de simple et reconnaissable. Considérez-le comme un nom de répertoire. Choisissez une région AWS adaptée à votre emplacement.
En faisant défiler la page, laissez ACL désactivés dans Propriété de l'objet, désactiver Bloquer l'accès public et cochez l’avertissement « Désactiver le blocage de tout accès public » – vous voulez que les gens voient le site Web. Gestion des versions de buckets reste désactivé pour nos besoins comme le fait Cryptage par défaut.
Dans les paramètres avancés, vérifiez que le verrouillage des objets est désactivé
Cliquez maintenant sur Créer un bucket
Vous serez redirigé vers un écran similaire à celui ci-dessus.
Maintenant que vous avez votre bucket, nous pouvons définir des autorisations et le remplir de contenu.
Définition des autorisations pour l'hébergement Web
Vous remarquerez sur l'image ci-dessus qu'il est indiqué « Les objets peuvent être publics » sous la colonne d'accès. Le paramètre par défaut est qu'ils ne sont pas publics, nous devons donc modifier cela.
Cliquez sur le nom de votre bucket. Et choisissez «P« propriétés » dans l’écran suivant.
Faites défiler cette page vers le bas et vous verrez Hébergement de sites Web statiques – cliquez sur Modifier.
Vous verrez ce dialogue
Activer Hébergement de site Web statique et assurez-vous que le type d'hébergement est défini sur Héberger un site Web statique. Définissez le document d'index sur index.html puis enregistrez vos modifications. Vous serez renvoyé vers la page Propriétés du bucket et si vous faites défiler vers le bas, vous verrez que l'hébergement de site Web statique est activé et qu'un point final
Le Point de terminaison du site Web Bucket est l'URL qui identifie votre bucket dans l'univers Amazon.
La tâche suivante consiste à définir explicitement votre politique d'accès. Cliquez sur Autorisations le menu principal.
Nous allons fournir une politique dans la fenêtre Politique de compartiment.
Presse "Modifier" en face de la Politique de compartiment. Nous devons fournir une politique qui permet à tout membre du public de charger n'importe quel objet (page ou image) contenu dans le bucket. C'est le code dont vous aurez besoin. Ne modifiez pas la date, elle indique une version à Amazon. La dernière ligne doit être modifiée : elle doit correspondre à votre propre ARN Bucket.
{ "Version": "2012-10-17", "Déclaration": [ { "Sid": "PublicReadGetObject", "Effet": "Autoriser", "Principal": "*", "Action": [ "s3:GetObject" ], "Ressource": [ "arn:aws:s3:::helterskeltertraining/*" ] } ] }L'ARN du Bucket est affiché dans l'écran d'édition, juste au-dessus de la fenêtre.
Enregistrez vos modifications. Si vous obtenez une erreur, il s’agit probablement du nom de l’ARN. Cette ligne doit correspondre exactement à votre propre ARN.
Téléchargement de votre site Web
Vous pouvez désormais télécharger votre contenu dans le bucket !
En utilisant le fil d'Ariane en haut de l'écran, revenez à votre panier.
Cliquez sur le Télécharger bouton.
Vous pouvez ajouter des fichiers ou des dossiers ici. J'utilise la zone Glisser-déposer car je n'ai qu'un seul fichier dans cet exemple. Notez que même si le nom du fichier apparaît dans la liste, il n'est pas téléchargé tant que vous n'avez pas appuyé sur le bouton Télécharger !
Vous devriez maintenant avoir un site Web ou un panorama, prêt à être servi par AWS.
Essai
Pour tester, revenez à l’écran des propriétés, faites défiler jusqu’à l’hébergement de site Web statique et cliquez sur l’URL. Si tous les paramètres sont corrects, il devrait s’afficher dans votre navigateur.
Mise à jour de votre enregistrement DNS
Vous ne souhaiterez probablement pas utiliser l'URL au format Amazon si vous possédez déjà un domaine. Pour utiliser votre propre domaine, vous devez modifier un paramètre DNS.
Il existe deux types de paramètres qui indiquent les points de terminaison dans votre DNS. Il s'agit des enregistrements A et des enregistrements CNAME. L'enregistrement A pointe vers une adresse IP. L'enregistrement CNAME est utilisé pour fournir des alias pour l'enregistrement A et peut pointer vers un autre serveur. Les exemples les plus connus sont mail.votredomaine.com et ftp.votredomaine.com.
Nous devons configurer un sous-domaine portant le même nom que votre bucket, puis fournir l'URL générée par Amazon comme destination.
Créez donc un nouvel enregistrement CNAME. Certains hébergeurs diffèrent sur la manière de procéder. Si vous saisissez le nom de votre bucket comme nom, CNAME comme type et votre URL Amazon comme valeur d'enregistrement, le système supprimera le reste de votre domaine dans le champ Nom. Cet enregistrement doit rediriger les requêtes vers le sous-domaine vers Amazon. Les modifications DNS peuvent prendre un certain temps, d'après mon expérience, entre un instant et un jour, pour être appliquées, donc cela peut ne pas fonctionner immédiatement. Testez avec votre nouvelle URL, par exemple http://bucketname.yourdomain.com
S'il s'agit de l'intégralité du site Web que vous hébergez sur Amazon, vous devez effectuer une redirection.
Front de nuage
Cloudfront est le réseau de distribution de contenu d'Amazon et si votre site contient beaucoup de contenu susceptible d'intéresser un public mondial, il peut être judicieux d'utiliser le CDN pour mettre en cache du contenu dans différents emplacements plus proches de votre public.
Aller à la Services en haut à gauche de votre écran Amazon et choisissez Cloudfront dans le menu déroulant. Si ce n'est pas le cas, tapez simplement Front de nuage dans la zone de recherche.
Récapitulatif en anglais simple
À ce stade, vous avez créé votre site Web dans Amazon S3. Si votre public est géographiquement éloigné de l'hébergement de votre site (vous avez choisi la géographie de l'hôte au début du processus S3), vous pouvez bénéficier de l'utilisation d'un CDN.
Mise en garde – si votre trafic est faible, un CDN peut en fait provoquer un décalage car le contenu conservé dans le cache expire entre les requêtes des utilisateurs. Dans ce cas, le CDN doit revenir à S3 pour récupérer le contenu, ce qui vous permet d'ajouter une deuxième itération au processus de requête/diffusion.
Terminologie
Distribution – Une distribution représente votre partie du cache CDN. Elle est mappée sur votre compartiment Amazon S3.
Créer une distribution
Dans CloudFront, cliquez sur le Créer une distribution CloudFront bouton.
Vous serez redirigé vers un très long formulaire que nous allons parcourir section par section.
Le Domaine d'origine peut être sélectionné dans la liste déroulante de ce champ. Déplacez simplement votre curseur vers le champ vide et cliquez. Cela affichera les buckets que vous avez créés.
Le Chemin d'origine ne doit être rempli que si votre contenu se trouve dans un sous-répertoire du bucket. Par exemple, si votre bucket contient un seul fichier appelé index.html, laissez ce champ vide. S'il contient un répertoire au niveau supérieur, contenant votre index.html, saisissez le nom du répertoire ici.
Ignorer Ajouter un en-tête personnalisé et partir Activer le bouclier d'origine désactivé.
La section suivante est Comportement du cache par défaut.
Politique du protocole de visualisation devrait être réglé sur Rediriger HTTP vers HTTPS.
Méthodes HTTP autorisées devrait être GET, HEAD
Restreindre l'accès des spectateurs doit être défini sur Oui si vous êtes sûr que tous les spectateurs doivent passer par CloudFront.
Faites défiler vers le bas pour Paramètres
Choisissez votre Catégorie de prix – cela devrait être intuitif, le premier est le plus cher.
Cliquez sur Demande de certificat pour obtenir un nouveau certificat SSL.
Les noms de domaine alternatifs doivent inclure toutes les variantes que vous pourriez avoir besoin de sécuriser. Par exemple bucketname.votredomaine.com, *.bucketname.votredomaine.com sécuriserait tout sous-répertoire créé sous bucketname.votredomaine.com
Objet racine par défaut
Entrer index.html comme nom de l'objet racine (afin que les utilisateurs n'aient pas à l'inclure dans l'URL).
Configuration d'un certificat SSL
La demande d'un certificat SSL est simple. Pour plus de clarté, ce certificat crypte le trafic entre le navigateur et Cloudfront.
Choisissez le certificat public et dans l'écran suivant, la validation DNS.
Le système vous fournira ensuite les données dont vous avez besoin pour créer un nouvel enregistrement CNAME. Il s'agit simplement de valider votre propriété du domaine et cela paraîtra très obscur. Copiez-le et collez-le dans vos paramètres DNS comme indiqué.
Une fois le DNS propagé, le système validera votre certificat SSL. Le mien a pris environ 5 secondes, mais selon l'emplacement où votre DNS est configuré, cela peut prendre jusqu'à quelques jours.
Une fois le certificat émis, la distribution peut être publiée. CloudFront vous fournira une nouvelle URL se terminant par cloudfront.net cela doit remplacer la valeur S3 dans votre DNS existant.
Mise à jour de votre enregistrement DNS (encore une fois)
Accédez à l'enregistrement CNAME que vous avez créé dans la configuration S3 et remplacez la valeur cloudfront.net par la valeur S3 de votre sous-domaine. Cela a pour effet de pointer toutes les demandes pour bucketname.votredomaine.com vers Cloudfront au lieu de S3. Vous avez déjà indiqué à CloudFront les détails de votre bucket afin qu'il s'active et remplisse le cache et diffuse votre contenu à partir de là au lieu de S3.
Configurer un site Web avec Amazon S3 et CloudFront est en fait assez simple une fois que vous connaissez la terminologie. Nous avons utilisé ici un exemple trivial, mais les étapes pour déployer un site Web plus complexe ou un panorama avec un wrapper HTML 5 sont identiques.
Et si vous utilisez déjà un CDN ?
Si vous utilisez déjà un CDN mais que vous souhaitez utiliser Amazon S3 pour héberger des médias volumineux, vous pouvez créer l'enregistrement CNAME dans les paramètres DNS de votre CDN. N'oubliez pas que lorsque vous configurez un CDN avec un hébergeur Web conventionnel, vous échangez généralement les serveurs de noms avec ceux du CDN et que la modification des enregistrements DNS au niveau de l'hébergement ne fonctionnera pas. Effectuez plutôt le même processus au niveau du CDN.
Voici un lien vers un panorama J'ai préparé une série d'enregistrements de la vallée de Lecrin, au sud de Grenade. J'ai utilisé S3 et CloudFront exactement comme je l'ai indiqué ici, le site Web est hébergé séparément des panoramas et j'utilise Quic.cloud comme CDN pour le site Web et CloudFront pour servir les panoramas. Toutes les modifications DNS ont donc été effectuées dans Quic.cloud. Le fichier original pour un seul panorama fait environ 850 Mo. Il est presque impossible de le servir en utilisant des serveurs http conventionnels.
Conclusion
La mise en place d'un site Web avec Amazon S3 et CloudFront est certainement une tâche réservée aux techniciens compétents. Elle n'est pas du tout adaptée aux petits sites Web faciles à entretenir. Cependant, elle fonctionne très bien pour le cas d'utilisation de la diffusion de médias volumineux tels que des panoramas en gigapixels.
S'abonner...
Je vous tiendrai au courant avec des mises à jour mensuelles régulières sur les ateliers, les cours, les guides et les revues.
Inscrivez-vous ici et obtenez des tarifs spéciaux sur tous les cours et promenades photo en 2026
3 commentaires