【保存版】静的ウェブサイトホスティングの方法について〜HTMLファイルを外部公開してみよう。
こんにちは、CryptoGamesの高橋です。
クリスペというサービスを行っている会社です。
本日はAWSの公式チュートリアルに沿って、静的ウェブサイトのホスティングをやっていきます。
詳しくは公式をご参照ください。
はじめに
始める前に、AWSのS3にかかる費用を見てみましょう。
作成時点では、ストレージに対し最初の50TB/月までの間は１GBあたり、0.025USD／月が発生します。
また、この料金はリージョン（バケットを作成する場所のイメージ）によっても異なります。
他にも「データ転送時」などにも費用が発生するので、最新状況などを含め公式ページを確認した上で進んでください。
また、このように継続して費用がかかりますので、テストとして実行する場合は、必ず第８章の「クリーンアップ」を行い、以後費用が発生しないようにしてください。
０ S3のページに行く
AWSのアカウントがない場合はまずはアカウントの登録を行ってください。
それが完了しましたら、下のようにS3に進んでください。
１ バケットを作成する
では、S3のページに来ましたので、まずはオブジェクト（データなど）を保管するバケットを作りましょう。
「バケットを作成」を選択
次のページで「バケット名」と「AWSリージョン」を入力しましょう。
リージョンとは、このバケットが作られる場所のイメージです。
日本のリージョンは東京と大阪があります。
あとは、下に行って、「バケットを作成」を選択します。
すると、下のようにバケットができました！
２ 静的ウェブサイトホスティングを有効にする
では、バケットができたので、静的ウェブホスティングを有効にしましょう。
まずは作成したバケットを選択します。
「プロパティ」を選択し、下に行くと
「静的ウェブサイトホスティング」という項目があります。
現在は「無効」になっていますね。
「編集」を押します。
こんな画面にきました。
上のように設定していきます。
「インデックスドキュメント」には後で表示したいファイル名を入れます。
ただ、基本的には「index.html」になります。
設定ができましたら、下に行き、「設定の保存」を押します。
すると、上のように、無事に静的ウェブホスティングが有効になりました。
３ パブリックアクセスブロック設定を編集
実は、S3はバケット内のデータが誤って外部公開されないように、あらかじめ外部からのアクセスがブロックされています。
今回は、ウェブサイトなので、外部からアクセスできるようにします。
☆☆重要☆☆
そのため、実行する場合は、バケット内に公開したくない情報がないか十分に確認してください。
では、「アクセス許可」を選択します。
現在は、下のように非公開になっています。
「編集」を押します。
「パブリックアクセスをすべてブロック」のチェックを外して「変更の保存」を押します。
バケット内に公開したくない情報がないか十分確認し、問題なければ「確認」で進みます。
すると、下のように公開が可能な状態になりました。
４ バケットポリシーを追加する
では、公開可能な状態になったので、実際に公開してみましょう。
「アクセス許可」から「バケットポリシー」の「編集」を選択します。
ここでバケット内のオブジェクトに対するアクセスのルールを設定できます。
公式のチュートリアルにある下のコードをコピペします。
その際、「Bucket-Name」の部分を自分のバケットの名前に変更し、「変更の保存」を押します。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}コードの意味合いとしては次のようになっています。
これでバケット内のオブジェクトを取得できるようになります。
ちなみに、私がやった時は下のような「不明なエラー」が発生しました。
落ち着いてエラーを読むと解決すると思います。
この場合は「{」の前に余計な空白が入っていました。
また、バケット名の変更を忘れると、こんなエラーになります。
問題なければ下のようにバケットポリシーの保存が完了し、「公開」の状態になりました。
５ インデックスドキュメントを設定する
５ー１ 公開用の「index.html」の作成
では、Webページに設定する「index.html」を作りましょう。
今回は公式の参考コードを使っていきます。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Website Home Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>Now hosted on Amazon S3!</p>
</body>
</html>ローカルの「メモ帳」などでも大丈夫なので、上のコードをコピペして、デスクトップなどに「index.html」として保存します。
☆ファイル名は必ず「index.html」としてください。☆
５ー２ 「index.html」の登録
では、上でできた「index.html」をドラッグ＆ドロップでバケットに保存しましょう。
「アップロード」を押します。
下のようになれば成功です。
６ エラードキュメントを設定する
６ー１ エラードキュメントの設定
エラードキュメントも設定してみましょう。
やり方は前章と全く同じです。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Website Error Page</title>
</head>
<body>
<h1>Error Page</h1>
<p>This is error page!</p>
</body>
</html>上のような参考コードを用意し、「404.html」という名前でローカルに保存します。
あとは、前章と同様に下のようにアップロードして完了です。
６ー２ なんで「404.html」という名前なの？
この答えは第二章にあります。
下のように設定していました。
ここで、
インデックスドキュメント ⇨ 「index.html」
エラードキュメント ⇨ 「404.html」
と指定していたからこの名前だったのですね。
７ ウェブサイトエンドポイントにアクセスしてみる
さて、これで準備は完了です。
第２章でできました「バケットウェブサイトエンドポイント」にアクセスしてみましょう。
すると、このように表示がされました！
なお、AWSの「Route53」というサービスを使うと、「http://www.example.com」のようなURLを設定することもできるようになります。
これについては、また別の機会に書いていこうと思います。
８ クリーンアップする
では、テストが終わりましたら、最後に使ったデータを削除しましょう。
「はじめに」で触れたように、これを行わないと継続して費用が発生してしまいます。
８ー１ バケット内を空にする
バケットを削除する前にバケット内を空にします。
空にして問題ないかを確認の上、問題なければ下のように実行します。
８ー２ バケットを削除する
バケットを空にしたらバケットを削除します。
削除して問題ないかを確認の上、下のように実行します。
終わりましたら、最後にバケットが削除されているかを確認しましょう。
今回はこれで以上です。
最後までありがとうございました。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊