web-dev-qa-db-ja.com

ElasticBeanstalkデプロイでAWS S3バケットから静的コンテンツを提供する「正しい方法」とは何ですか？

AWS ElasticBeanstalkで小さなPHP環境をホストしました。静的コンテンツ（.css、.js、.jpgファイルなど）はElasticBeanstalkから直接アクセスできず、別のソースから取得する必要があります。 S3をそのソースとして選択しましたが、いくつかの問題があります。

仮定：

  • EBの私のウェブサイトは<website_name>.<location>.elasticbeanstalk.comです。
  • 私のS3バケットはs3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>です。バケットとそのすべてのサブフォルダーはパブリックです。
  • このバケット内には、関連ファイルを保存するフォルダー/WebsiteData/images/、/WebsiteData/css/、/WebsiteData/js/etcがあります。

これで、<website_name>.<location>.elasticbeanstalk.com/homepage.phpにアクセスしたときに静的ファイルをロードできなくなりました。

参照する静的ファイルごとにS3バケットへのリンクをハードコーディングしたくない（後で別のCDNに移動する可能性があるため）。たとえば、/WebsiteData/images/img1.jpgではなくs3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>/WebsiteData/images/img1.jpgとして画像ファイルへのリンクを作成したい

私が試したもの：

  1. 最初に.htaccessでmod_rewriteを試しました。これはload<website_name>.<location>.elasticbeanstalk.com/homepage.phpにアクセスしたときの画像/静的コンテンツではなく、リンク<website_name>.<location>.elasticbeanstalk.com/WebsiteData/images/img1.jpgをクリックしたときにS3バケットにリダイレクトするだけです。これはサーバー上のリダイレクトなので、理にかなっていると思います。

  2. 次に、PHPソリューションを試してみました：<img src="<?php echo $aws_s3_folder; ?>/WebsiteData/images/img1.jpg" alt="My image"/>。これは明らかに機能します。

  3. 最後に、すべてのリンクを/WebsiteData/からs3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>/WebsiteData/に変更するだけの小さなJavascriptスクリプトを作成しました。これも機能しますが、警告が表示されます。

最後の2つの方法は機能します（homepage.phpにアクセスするとJS/CSS/imagesを見ることができます）が、それは私にとっていハックのように感じます。この状況で静的コンテンツを取得する正しい方法は何ですか？ AJAXまたはCloudFlareが正しい方法でしょうか？

phpamazon-awsamazon-ec2static-contentamazon-s3
3
Abhishek Divekar
  1. 最初に.htaccessでmod_rewriteを試しました...

おそらくmod_rewriteをmod_proxyとともに使用して、CDNへのリバースプロキシを作成できます。これには、非表示 CDNの場所の利点があります。たとえば、HTMLで、「仮想」サブディレクトリ（またはサブドメイン）内のアセットを参照します。 /cdn。

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

（ブラウザによって課されるドメインごとの要求制限を回避するために、サブドメインが望ましい場合がありますか？）

次に、mod_rewrite/mod_proxyを使用して、/cdn/....に対するすべてのリクエストをCDN（S3）にプロキシします。

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

つまり、サーバーに必要なモジュール（mod_proxy、mod_proxy_http）がロードされ、S3がプロキシされたリクエストを許可すると仮定します。

  1. 次に、PHPソリューションを試してみました：<img src="<?php echo $aws_s3_folder; ?>/WebsiteData/images/img1.jpg" alt="My image"/>。これは明らかに機能します。

これは私にとって「 "いハック」のようには感じません。 （多分これがあなたがPHPを使用している唯一のものでない限り？）実際、これはおそらく私が思う私の好ましい解決策でしょう。ただし、短いエコー形式を使用します：<?=$aws_s3_folder?>

  1. すべてのリンクを変更するだけの小さなJavascriptスクリプトを書きました...

ただし、JavaScriptソリューションはハッキングのように感じます。また、コードが実行される前に、クライアント側のエラー（404）が発生する可能性があります。

BASE要素

別の解決策は、すべてのS3アセットへの相対パスを使用し、HTMLのbaseセクションにhead要素を含めて、これらのアセットの場所をブラウザーに伝えることです。例えば：

src="WebsiteData/images/img1.jpg"

次に、baseタグに（NB：このパスに末尾のスラッシュを含めます）：

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