はじめての S3 （Amazon S3 を使って Webサイトを公開する）

Amazon S3 に静的ファイルを保存し、それを Webサイトとして公開する手順メモです。

「はじめての S3」と題した割には多少詰め込み過ぎ感は否めませんが、そのへんはご愛嬌ということで。

やりたいこと

Amazon S3 に保存した静的ファイルを Webサイトとして公開
お名前.com で登録した独自ドメイン「www.akiyoko.info」で公開

今回は、

Route53 は使わず、レジストラ（お名前.com）側で CNAMEレコードを設定（「www.akiyoko.info」の別名を S3 の Endpoint にする）
S3 のバケット名は、Webサイトの FQDN（www.akiyoko.info）で指定

という方針で進めます。

S3 のバケット名を FQDN にした理由は、以下を読むと理解しやすいです。

以下2点の制約からドメイン名ではなくFQDN（www.yoshidashingo.comなど）でバケット名を指定する必要があります。

DNSの一般的な制約：CNAMEにドメインのルート名（yoshidashingo.com）は登録できない。

　※お名前.comのDNSもAmazon Route53も同様。
　※ELBを使えばできるらしいが今回は考慮しない。

S3の制約：FQDNとバケット名が同一である必要がある。

「Amazon S3で激安Webサイト運用(CDP No.19 Direct Hostingパターン) - yoshidashingoの日記」より

ここで用語をおさらい。

レジストラ	ドメインの登録をするところ。「お名前.com」や「VALUE DOMAIN」あたりが有名
FQDN	Fully Qualified Domain Name。サブドメインなどをすべて省略しない形式のドメイン名。「www.akiyoko.info」はFQDNだが、「akiyoko.info」はFQDNではない（特にこの形式は「ネイキッドドメイン」と呼ばれたりする）
Aレコード	ドメイン名とIPアドレスの関連付けを設定するためのレコード
CNAMEレコード	ドメイン名とドメイン名の関連付けを設定するためのレコード。エイリアスとも呼ばれる。関連元のドメインはFQDNでなければいけない

独自ドメインについては、

あたりも参照していただければ。

1. AWS Management Console へのログイン

1) AWS Management Console

http://aws.amazon.com/jp/console/
から「サインアップ」をクリックします。

f:id:akiyoko:20140520004636p:plain

AWS用のアカウントでログインします。

f:id:akiyoko:20140520004900p:plain

2) S3 サービスを選択

[Services] -> [S3] を選択します。

f:id:akiyoko:20140520004943p:plain

2. バケットを作成

S3 の画面から「Create Bucket」ボタンをクリックして、バケットを作成します。

f:id:akiyoko:20140520005120p:plain

バケット名は、URLの一部になることを考慮して、英数字と「.」「-」を組み合わせた、S3全体で一意になる文字列を入力します。
今回は、Webサイトの FQDN で指定するので、「www.akiyoko.info」とします。

Regionは、レイテンシを考慮して「Tokyo」を選択します。

f:id:akiyoko:20140522002954p:plain

バケットが作成されました。

f:id:akiyoko:20140522003152p:plain

3. Permissions を変更

バケットを作成した直後のデフォルトの状態では、アップロードしたファイルに誰もアクセスできない権限設定になっているため、バケット単位でのパーミッションを変更しておきます。
（アップロードしたファイルごとに右クリック -> [Make Public] とするか、あるいはファイルごとに [Properities] -> [Permissions] の設定を変更することでパーミッションを変更することもできますが、複数のファイルのアクセス権をまとめて変更できないので、ちょっと現実的な運用じゃないですよね。。）

1) バケットの Permissions を変更

バケット名を右クリック -> [Properties] を選択して、

f:id:akiyoko:20140522003205p:plain

[Permissions] タブから、「Add bucket policy」をクリックします。

f:id:akiyoko:20140522003213p:plain

「Sample Bucket Policies」をクリックします。

f:id:akiyoko:20140522003222p:plain

「Granting Read-Only Permission to an Anonymous User」のサンプルをコピペして、「Resource」のところを対象のバケット名に書き換えます。
f:id:akiyoko:20140520010823p:plain

{
  "Version":"2012-10-17",
  "Statement":[{
    "Sid":"AddPerm",
        "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::www.akiyoko.info/*"
      ]
    }
  ]
}

「Save」ボタンをクリックします。

f:id:akiyoko:20140522003239p:plain

4. Webサイトホスティング設定を変更

同じく、バケットの [Properties] から [Static Website Hosting] を選択し、「Enable website hosting」をクリックします。

f:id:akiyoko:20140522003249p:plain

「Index Document」に「index.html」などと入力して、「Save」ボタンをクリック。

これで設定は完了。

以下に表示されている Endpoint URL でホスティングされるようになります。

f:id:akiyoko:20140522003311p:plain

5. ファイルをアップロード

いよいよファイルをアップロードします。
例として、次のような 3つのファイルをアップロードすることにします。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>akiyoko info</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link rel="stylesheet" href="test.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="test.js"></script>
</head>
<body>
  <form id="index-form">
    <span class="required">名前</span> : <input type="text" id="name" name="name" />
    <button type="button" id="index-button">送信</button>
  <form>
</body>
</html>

test.css

span.required:after {
  margin-left: 0.5em;
  content: "*";
  color: #ff0000;
  font-weight: bold;
}

test.js

$(function() {
  $('#index-button').on('click', function() {
    var form = $('#index-form');
    if (!($('#name').val().match(/^test$/))) {
      alert('NG!');
    } else {
      alert('OK!');
    }
  });
});