batchiです。
S3では静的ウェブサイトをホスティングできます。
それは知っています。よく聞きます。
ソリューションアーキテクトの取得に向けて、
ちまちま勉強をしている時にもよく目にしました。
ただ、「知っている」というのは、
「S3では静的ウェブサイトをホスティングできる。Yes or No？」
の問いに対して、
「yes!」
とこれみよがしに元気よく答えられるというだけで、
それ以上のことはまったくちんぷんかんです。
というわけで、実際に手を動かしてみることにします。
そもそも静的ウェブサイトとは
htmlファイルや画像ファイルなど、
あらかじめ作成されたファイルをサーバにアップロードしておき、
ブラウザからのリクエストに対して
そのままレスポンスとして返すようなサイトのことです。
それに対して動的ウェブサイトとは
リクエストをプログラムが受け取り、
必要な処理を行った後にレスポンスを返すサイトのことです。
WordPressは動的ウェブサイトです。
このブログも動的ウェブサイトなので、
S3でホスティングは出来ません。残念。
とりあえずやってみる
http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html
ドキュメントを見ればそれはもうバッチリできると思いますが、
折角なので手探りでやってみます。
●バケットの作成
「バケット名はドメイン名と同じにして…」
というどこかで聞いたフレーズが頭をよぎりますが、今回は気にしないことにします。
- バケット名：test-batchi-hoge
- リージョン：Tokyo
この時点でエンドポイントが作成されます。
もちろん現時点では見に行ってもエラーが返ってきます。
●ウェブサイトのホスティングを有効にする
バケットのプロパティから「静的ウェブサイトホスティング」を選択し、
ラジオボタンで「ウェブサイトのホスティングを有効にする」を選択します。
以下の項目が出てきます。
| インデックスドキュメント | ファイル名を指定せずにアクセスした時に表示されるページ。 空欄不可。 |
| エラードキュメント | ファイルが存在しないなど、エラーが発生した時に表示されるページ。 空欄可。一応設定してみる。 |
| リダイレクトルールを… | リダイレクトしたい時に。 空欄可。今回はスルー。 |
●バケットポリシーを追加する
バケットを作成したままの状態では、
バケットに対するアクセス権を持つのは当事者(※)のみのため、
下記のポリシーを追加します。
※AWSのroot(契約)アカウントのこと。IAM Userではない。
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadForGetBucketObjects",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::test-batchi-hoge/*"
]
}
]
}
●ファイルをアップロードする
ひとまず先ほどインデックスドキュメントとして指定した、
usagi.htmlというファイルを作成して、
バケット直下にアップロードします。
今さらですが、一般的にはindex.htmlという名称で作成するそうです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>うさぎ</title> <meta name="viewport" content="initial-scale=1"> <body> usagi.htmlの中身です。 </body></html>
先ほどのエンドポイントにアクセスすれば、
見事ページが表示されます。
↓何の前触れもなく消すかもしれませんが、よろしければどうぞ。
test-batchi-hoge.s3-website-ap-northeast-1.amazonaws.com
●エラードキュメントのファイルをアップロードする
ここまででほぼ目的は達したようなものですが、
一応設定したのでエラードキュメントnezumi.htmlも用意しておきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ねずみ</title> <meta name="viewport" content="initial-scale=1"> <body> nezumi.htmlの中身です。<br> エラーが出た時にはもれなくこの画面を表示します。 </body></html>
存在しないページなどを開こうとすると、このhtmlファイルが表示されます。
↓何の前触れもなく消すかもしれませんが、よろしければどうぞ。
test-batchi-hoge.s3-website-ap-northeast-1.amazonaws.com/azarashi
●画像もアップロードしてみる
バケット直下にフォルダを作成し、
その中に画像をアップロードしてみました。
URLは”<エンドポイント>/<フォルダ名>/<ファイル名>”となります。
オブジェクトのプロパティから確認できます。
↓何の前触れもなく（以下略）
https://s3-ap-northeast-1.amazonaws.com/test-batchi-hoge/koara/sugoi-kawaii-usagi.jpg
（出典：www.flickr.com）
次回は独自ドメインを使用してのホスティングにチャレンジ
静的ウェブサイトのホスティング自体は、
やってみたら意外と簡単にできたので、
次は今回見ないふりをしていた部分を洗ってみたいと思います。
（次回更新未定）
ひとまずこちらからは以上です。
