web-dev-qa-db-fra.com

Quelle est la "bonne façon" de gérer le contenu statique de mon compartiment AWS S3 sur mon déploiement ElasticBeanstalk?

J'ai hébergé un petit environnement PHP sur AWS ElasticBeanstalk. Le contenu statique (.css, .js, .jpg fichiers, etc.) est inaccessible directement à partir d'ElasticBeanstalk et doit provenir d'une autre source. J'ai choisi S3 comme source, mais j'ai quelques problèmes.

Supposer:

  • Mon site Web sur EB est <website_name>.<location>.elasticbeanstalk.com.
  • Mon compartiment S3 est s3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>. Le compartiment et tous ses sous-dossiers sont publics.
  • À l'intérieur de ce compartiment, j'ai les dossiers /WebsiteData/images/, /WebsiteData/css/, /WebsiteData/js/etc, qui stocke les fichiers pertinents.

Je ne parviens pas à charger les fichiers statiques lorsque je visite <website_name>.<location>.elasticbeanstalk.com/homepage.php.

Je ne souhaite pas coder en dur le lien vers mon compartiment S3 pour chaque fichier statique que je référence (car je pourrais le transférer ultérieurement sur un autre CDN). Par exemple, je préfère avoir mon lien vers un fichier image en tant que /WebsiteData/images/img1.jpg, plutôt que s3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>/WebsiteData/images/img1.jpg

Choses que j'ai essayées:

  1. J'ai d'abord essayé mod_rewrite dans mon .htaccess; cela ne fait pas charger le contenu statique/d'images lorsque je visite <website_name>.<location>.elasticbeanstalk.com/homepage.php, il redirige uniquement vers le compartiment S3 lorsque je clique sur le lien <website_name>.<location>.elasticbeanstalk.com/WebsiteData/images/img1.jpg. Je suppose que cela a du sens puisqu'il s'agit d'une redirection sur le serveur.

  2. Ensuite, j'ai essayé une solution PHP: <img src="<?php echo $aws_s3_folder; ?>/WebsiteData/images/img1.jpg" alt="My image"/>. Cela fonctionne, évidemment.

  3. Enfin, j’ai écrit un petit script Javascript qui modifie tous les liens de /WebsiteData/ à s3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>/WebsiteData/. Cela fonctionne aussi, mais je reçois des avertissements.

Les deux dernières méthodes fonctionnent (je peux voir le JS/CSS/images lorsque je visite homepage.php), mais cela me semble être un mauvais coup. Quelle est la bonne façon de récupérer du contenu statique dans cette situation? Est-ce que AJAX ou CloudFlare serait la bonne solution?

phpamazon-awsamazon-ec2static-contentamazon-s3
3
Abhishek Divekar
  1. J'ai d'abord essayé mod_rewrite dans mon .htaccess ...

Vous pourriez peut-être utiliser mod_rewrite avec mod_proxy pour créer un proxy inverse sur votre CDN. Cela a l'avantage de cacher l'emplacement de votre CDN. Par exemple, dans votre code HTML, référencez vos ressources dans un sous-répertoire (ou sous-domaine) "virtuel", par exemple. /cdn.

src="/cdn/WebsiteData/images/img1.jpg"

(Un sous-domaine pourrait être préférable pour contourner toute limite de demande par domaine imposée par le navigateur?)

Ensuite, utilisez mod_rewrite/mod_proxy pour envoyer par proxy toutes les demandes de /cdn/.... à votre CDN (S3):

RewriteRule ^cdn/(.*) https://s3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>/$1 [P]

En d’autres termes, en supposant que votre serveur ait les modules nécessaires chargés (mod_proxy, mod_proxy_http) et que S3 autorise les demandes envoyées par proxy.

  1. Ensuite, j'ai essayé une solution PHP: <img src="<?php echo $aws_s3_folder; ?>/WebsiteData/images/img1.jpg" alt="My image"/>. Cela fonctionne, évidemment.

Cela ne me semble pas être un "hack laid". (Sauf peut-être que c'est la seule chose que vous utilisez PHP pour?) En fait, ce serait probablement ma solution préférée, je pense. Je voudrais cependant utiliser le format d'écho court: <?=$aws_s3_folder?>

  1. J'ai écrit un petit script Javascript qui change juste tous les liens ...

Cependant, la solution JavaScript ressemble à un hack. Et pourrait entraîner des erreurs côté client (404) avant que le code ne soit exécuté.

BASE Elément

Une autre solution pourrait consister à utiliser des chemins d'accès relatifs à tous vos actifs S3 et à inclure l'élément base dans la section head de votre code HTML pour indiquer au navigateur où se trouvent ces actifs. Par exemple:

src="WebsiteData/images/img1.jpg"

Ensuite, dans votre balise base (NB: incluez la barre oblique finale sur ce chemin):

<base href="<?=$aws_s3_folder?>/">
1
MrWhite