akiyoko blog

akiyoko の IT技術系ブログです

はじめての 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!');
    }
  });
});

 

1) ファイルアップロード

バケット名をクリックします。

f:id:akiyoko:20140522003346p:plain


「Upload」ボタンをクリック。

f:id:akiyoko:20140522003353p:plain


ファイルをドラッグ&ドロップするか、「Add Files」でファイルを選択し、「Start Upload」をクリックします。

f:id:akiyoko:20140522003359p:plain


これで完了です。

f:id:akiyoko:20140522003406p:plain


2) 動作確認

指定されたエンドポイント
http://www.akiyoko.info.s3-website-ap-northeast-1.amazonaws.com/
にアクセスすると、アップロードしたファイルが表示されています。

f:id:akiyoko:20140523021313p:plain


CSS や JavaScript もちゃんと動いてますね。


6. レジストラ側で CNAME を設定

最後に、AWS ではなくレジストラ側の設定です。

http://www.akiyoko.info/」にアクセスすると「http://www.akiyoko.info.s3-website-ap-northeast-1.amazonaws.com/」の内容が表示されるように、CNAME を設定します。

例として、「お名前.com」でドメインを管理しているものとします。






1) ドメインを購入

まずは、ドメインを購入するところから。

f:id:akiyoko:20140523022022p:plain


「お名前.com」では、ドメインの新規登録時に同時にWhois情報公開代行を申請すると無料になるキャンペーンをずっとやっているので、忘れずにチェックしておきます。

f:id:akiyoko:20140523022148p:plain


あとは省略。特に迷うことはないでしょう。


2) ドメインNaviにログイン

ドメインNaviにログインします。
https://www.onamae.com/domain/navi/domain.html

f:id:akiyoko:20140523022511p:plain


3) CNAME を設定

[ドメイン設定] から、[DNS関連機能の設定] -> [DNSレコード設定を利用する] の「設定する」をクリックします。

f:id:akiyoko:20140523022542p:plain

対象のドメインを選択した後、「入力画面に進む」をクリック。

f:id:akiyoko:20140523022756p:plain


以下のように入力して、「追加」ボタンをクリックします。

ホスト名 TYPE VALUE 状態
www.akiyoko.info CNAME www.akiyoko.info.s3-website-ap-northeast-1.amazonaws.com 有効


f:id:akiyoko:20140523023842p:plain


下段の「レンタルDNSレコード設定用ネームサーバー設定確認」のチェックボックスを入れることで、ネームサーバー変更の手間が省けます。

f:id:akiyoko:20140523023937p:plain


確認画面へ進みます。


「設定する」ボタンをクリックして、設定が反映されるのを待ちます。

f:id:akiyoko:20140523024535p:plain


4) 動作確認

http://www.akiyoko.info/ にアクセス

f:id:akiyoko:20140524004234p:plain


はい、OKでした。