【まとめ】AWSのS3上で静的なウェブサイトを構築する手順

ウェブ制作・運用

2015.04.222022.07.17

本ページはプロモーションが含まれています

AWSのS3を使えば安く静的なウェブサイトを構築できますよ。
いまやどの会社も持っているウェブサイト。
個人でもブログを含めて運用している方は多い方は多いかと思います。
しかし、そんなウェブサイトを運用するには下記のような悩みがでてきます。
「ウェブサイトを運用すると月額が結構かかる」
「プログラムはいれないから安く済ませたい」
そんな悩みはAWSのS3を使えば解決します。
http://aws.amazon.com/jp/s3-hosting/
なにしろ安い。
AWSで運用するには多少知識が必要になります。
今回はS3上で静的なサイトを構築する手順をまとめます。

AWSのS3で格安にウェブサイトを運用する方法
1. S3での設定
2. Route53での設定
まとめ

AWSのS3で格安にウェブサイトを運用する方法

この後手順をまとめますが、S3で運用をするにはAWSにアカウントを持つ必要があります。
http://aws.amazon.com/jp/
アカウントを持ってログインした状態から下記手順を進めてください。
【参考サイト】
http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html

S3での設定

S3 Management Console 起動

AWSにログインし “Management Console”を開く
サービス一覧から、S3を選択

2つのBucketの作成 (www有りとwww無し)

画面左上の”Create Bucket”をクリック
“Create a Bucket”というダイアログがでてくるので、”Bucket Name”と”Region”を設定する。
※Bucket Nameはwwwのサブドメイン名と同じ名称　ここでは”www.foo.com”
※RegionはTokyo
入力ができたら”Create”をクリック
続けて画面左上の”Create Bucket”をクリック
“Create a Bucket”というダイアログがでてくるので、”Bucket Name”と”Region”を設定する。
※Bucket Nameはドメイン名と同じ名称　ここでは”foo.com”
※RegionはTokyo
入力ができたら”Create”をクリックこの段階で”www.foo.com”と”foo.com”というBucketがコンソールに表示されます。※ここから先の設定は、wwwありで公開したい場合はwwwありで、wwwなしで公開したい場合はwwwなしで設定してください。
ここでは、wwwなしのfoo.comを公開する手順で進めます。

データのアップロード

コンソールに表示されたBucketの一覧からfoo.comを開く
※名称をクリックする
ページ左上の”Upload”をクリックすると、Upload用のダイアログが開く
“Add Files”を選択して、アップロードする
※”Add Files”を使用すると、フォルダのアップロードはできない。
フォルダ毎アップロードする場合、”Enable Enhanced Uploader (BETA) “を使用するか、Cyberduckなどソフトを利用する形になる

公開するための承認の設定

“All Buckets”をクリックしてBucketの一覧に戻り、foo.comを選択し、ページ右にあるタブから”Properties”を開き、”Permissions”を展開する。
※名称をクリックすると中が展開されてしまうので、名称の横をクリックする
“Add bucket policy”をクリックすると、”Bucket Policy Editor”が起動するので、下記のコードを記述する。
```
{
  "Version":"2008-10-17",
  "Statement":[{
    "Sid":"AddPerm",
    "Effect":"Allow",
    "Principal": {
    "AWS": "*"
    },
    "Action":["s3:GetObject"],
    "Resource":["arn:aws:s3:::foo.com/*"]
  }]
}
```
※コード内のfoo.comの箇所は、その都度設定したいドメイン名に変更

ウェブサイトのホスティングのための設定

引き続き、foo.comの”Properties”の”Static Website Hosting”を展開し、”Enable website hosting”を選択する。
Index Documentを入力する欄が展開されるので、インデックスとなるファイル名（index.htmlなど）を入力し、Saveをクリック。

リダイレクトの設定

※www有りを公開したい場合は、www無しからwww有りへのリダイレクト、 www無しを公開したい場合は、www有りからwww無しへのリダイレクトの設定をします。
ここでは後者の形になります。

コンソールに表示されたBucketの一覧からwww.foo.comを選択し、ページ右にあるタブから”Properties”を開き、”Static Website Hosting”を展開する。
“Redirect all requests to another host name”を選択し、”Redirect all requests to:”の欄にfoo.comと入力し、Saveをクリック。
※foo.comの箇所は、その都度設定したいドメイン名に変更

Route53での設定

Hosted Zoneを作成する

サービス一覧から、Route53を選択
Route53のコンソールに移動したら、ページ左の”Hosted Zone”を選択
“Route 53: Hosted Zones”にあるタブから”Create Hosted Zone”を選択
“Domain Name:”の欄にドメイン名（例：foo.com）を記入し、”Create Hosted Zone”をクリック
ドメイン一覧に登録したドメインが表示されます。

Hosted ZoneにA (エイリアス)レコードを作成する

ドメイン一覧から、登録したドメインを選択
“Route 53: Hosted Zones”にあるタブから”Go to Record Sets”を選択
続いて、”Create Record Set”を選択
入力に移るので、下記のように入力
・Name = サブドメイン（wwwなど）を公開する場合は記入（※ここでは入力無し）
・Type = A – IPv4 address
・Alias = Yes
・Alias Target = 記入欄にフォーカスすると選択肢が表示されるので、その中から”S3 Website Endpoints”にある先程作成したBucketのEndpointを選択（例：foo.com(s3-website-ap-northeast-1)）
・Routing Policy = Simple
・Evaluate Target Health = No
入力が出来たら、入力画面下の”Create Record Set”をクリックして完了

Hosted ZoneにCNAMEレコードを作成する

引き続き、”Create Record Set”を選択
入力に移るので、下記のように入力
・Name = Aレコードで設定したNameではないほうのNameを入力（※ここではwww）
・Type = CNAME – Canonical name
・Alias = No
・TTL = 300（デフォルトのまま）
・Value = Endpointを記述する。
記載場所は、S3コンソールの”Properties”内、Static Website Hostingを展開すると記載されている（例：www.foo.com.s3-website-ap-northeast-1.amazonaws.com）
・Routing Policy = Simple
入力が出来たら、入力画面下の”Create Record Set”をクリックして完了