ablog

不器用で落着きのない技術者のメモ

S3で jQuery を使って SSI 的なことをする

AWS

S3 で Server Side Include （SSI）的なことを jQuery でやってみた（Client Side Include）。

結果

  • 作成したバケットの [プロパティ]-[Static website hosting] を選択し、
  • [エンドポイント]の URL にブラウザでアクセスしてみると無事成功

手順

  • S3 にバケットを作成する
  • 作成したバケットの [プロパティ]-[Static website hosting]で以下の通り入力して保存
    • 「このバケットを使用してウェブサイトをホストする」を選択
    • インデックスドキュメント: index.html
    • エラードキュメント: error.html
  • 作成したバケットの[アクセス権限]-[バケットポリシー]-[バケットポリシーエディター ]に以下を入力して保存
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<バケット名>/*"
            ]
        }
    ]
    • 作成したバケットの[オブジェクト]で index.html と ssi.html をアップロードする。

ファイル

  • index.html
<html> 
  <head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script> 
    $(function(){
      $("#includedContent").load("ssi.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>
    • ssi.html
<font color="red" size="7">This is ssi content.</font>

参考