Amazon s3 で静的ファイルを Web ホスティングするためにやったこと #AWS

静的ファイルを Amazon s3 で Web ホスティングしてみました。

環境

Mac OS X
ファイル転送には Transmit を使用

バケット作成

適当にバケットを作ったら Properties → Static Website Hosting と進んで、 Enable website hosting にしましょう。 Index Document には index.html と入力しました。

IAM ユーザ作成

最近は s3 への権限の設定は IAM 経由で行うようです。 IAM の管理画面から Create New Users してユーザを作成します。そして転送に使うので Access Key ID と Secret Access Key を控えておきます。そのユーザを選択し、 Permissions から Manage Policy → Custom Policy と進んで下記を貼り付けます。 {{bucket_name}} は適宜変更してください。これはユーザに s3 の特定バケットの権限を与える定義らしいです。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::{{bucket_name}}",
                "arn:aws:s3:::{{bucket_name}}/*"
            ]
        }
    ]
}

バケットポリシーの設定

s3 ではファイルごとに公開設定をもっているらしく、この状態でファイルを転送しても Web からは見えません。そのため、ファイルを選択して Make Public してやる必要があります。ただ、ファイルを更新するたびに実施するのは大変なので、バケットを選択して Properties → Permissions → Edit bucket policy と進み下記のように入力するとよいそうです。

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{{bucket_name}}/*"
        }
    ]
}

Transmit 転送設定

転送するにあたり、上記の権限の IAM ではバケット一覧を表示する権限がありません。なので、リモートパスを空欄にして接続しようとすると失敗します。リモートパスにバケット名を入力すると、初期値でそのパスを表示するようになるため、このバケットには権限をつけたのでエラーは出なくなります。

いよいよ転送したものの、私の環境では CSS がうまく動きませんでした。 s3 上にある CSS ファイルを見てみると、 Content-Type: application/octet-stream となっていました。これも s3 上でファイルごとに属性をもっていて、ファイルいっこいっこ選択してMetadata から Content-Type を変更することもできますが、 Transmit のデフォルト設定をしておくと拡張子を見て Metadata をセットしてくれるようになります。 Transmit の環境設定 → クラウドと進み、拡張子 css に対して Content-type text/css と設定してやれば OK でした。