AWS ElasticBeanstalkで小さなPHP環境をホストしました。静的コンテンツ(.css
、.js
、.jpg
ファイルなど)はElasticBeanstalkから直接アクセスできず、別のソースから取得する必要があります。 S3をそのソースとして選択しましたが、いくつかの問題があります。
仮定:
<website_name>.<location>.elasticbeanstalk.com
です。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
として画像ファイルへのリンクを作成したい
私が試したもの:
最初に.htaccessでmod_rewrite
を試しました。これはload<website_name>.<location>.elasticbeanstalk.com/homepage.php
にアクセスしたときの画像/静的コンテンツではなく、リンク<website_name>.<location>.elasticbeanstalk.com/WebsiteData/images/img1.jpg
をクリックしたときにS3バケットにリダイレクトするだけです。これはサーバー上のリダイレクトなので、理にかなっていると思います。
次に、PHPソリューションを試してみました:<img src="<?php echo $aws_s3_folder; ?>/WebsiteData/images/img1.jpg" alt="My image"/>
。これは明らかに機能します。
最後に、すべてのリンクを/WebsiteData/
からs3.<location>.amazonaws.com/elasticbeanstalk-<location>-<id>/WebsiteData/
に変更するだけの小さなJavascriptスクリプトを作成しました。これも機能しますが、警告が表示されます。
最後の2つの方法は機能します(homepage.php
にアクセスするとJS/CSS/imagesを見ることができます)が、それは私にとっていハックのように感じます。この状況で静的コンテンツを取得する正しい方法は何ですか? AJAXまたはCloudFlareが正しい方法でしょうか?
- 最初に
.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がプロキシされたリクエストを許可すると仮定します。
- 次に、PHPソリューションを試してみました:
<img src="<?php echo $aws_s3_folder; ?>/WebsiteData/images/img1.jpg" alt="My image"/>
。これは明らかに機能します。
これは私にとって「 "いハック」のようには感じません。 (多分これがあなたがPHPを使用している唯一のものでない限り?)実際、これはおそらく私が思う私の好ましい解決策でしょう。ただし、短いエコー形式を使用します:<?=$aws_s3_folder?>
- すべてのリンクを変更するだけの小さなJavascriptスクリプトを書きました...
ただし、JavaScriptソリューションはハッキングのように感じます。また、コードが実行される前に、クライアント側のエラー(404)が発生する可能性があります。
BASE
要素別の解決策は、すべてのS3アセットへの相対パスを使用し、HTMLのbase
セクションにhead
要素を含めて、これらのアセットの場所をブラウザーに伝えることです。例えば:
src="WebsiteData/images/img1.jpg"
次に、base
タグに(NB:このパスに末尾のスラッシュを含めます):
<base href="<?=$aws_s3_folder?>/">