[ハンズオン] ５分でAWS S3で静的ホスティングする

4960 ワード
ハンズオン S3 AWS AWS テキストリンク

経緯

現在のプロジェクトで静的ファイルをS３にホスティングして運用しているので、勉強がてら記録を残します。

AWS S3とは

基本的にストレージを提供するサービスになっています。
画像、動画、ファイルなど様々なデータを保存するサービスで、
例えば、icloudは写真や書類（メモアプリ、pdfなど）を保存するストレージサービスです。

S3は、他のAWSサービスと連帯して使うことができ、
EC2のスナップショット（バックアップ）の保存先、
ファイルアップロード時をイベントトリガーとして、Lambda関数を呼び出しをしたりと、
一般的なストレージサービスより多くの機能を兼ね備えています。

今回は、静的ホスティング機能について記載していこうと思います。

参照：S3ユースケース

静的ホスティングとは

静的なwebサイトをホスティング（一般公開）すること。

静的なwebサイトとはhtmlファイルをサーバにアップロードしておき、
リクエストに対してそのままそのファイルをレスポンスするサイトのこと。

例えば、PHPやJavaはアプリケーションサーバで動作させることにより、
ログイン情報によって処理を行うことができるためリクエストごとに
異なったレスポンスをするので、動的なwebサイトになります。

S3でホスティングする理由

１番の理由はコストが低いです。
料金は、S3 Standardのストレージクラスですと、
ストレージあたり0.025USD/GB、1000リクエストあたり0.00037USD
とレンタルサーバを借りてLPなどを運用するよりはるかに安いです。
また、 フルマネージドサービスなのでサーバのメンテナンス等は考えなくても良いです

参照：料金 - AWS S3

手順

1.index.htmlを作成

公開するhtmlファイルを準備

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>S3静的ホスティング</title>
</head>
<body>
  <h1>S3静的ホスティング</h1>
</body>
</html>

2.バケットを作成

AWSにログイン後、Amazon S3サービスに移動バケットを作成するを押下し、バケット名を入力してバケットを作成

3.バケットにindex.htmlをアップロード

作成したバケットに移動しアップロードを押下して、先程のhtmlファイルをアップロード

4.静的ホスティングを有効化

アップロードしたindex.htmlをクリックし、
「プロパティ」タブの「Static website hosting」項目の

「このバケットを使用してウェブサイトをホストする」を選択
インデックスドキュメントに静的ホスティングするindex.htmlを入力して保存

5.index.htmlを公開

バケットに戻り、index.htmlを選択してからアクションボタンを押下し、公開するをクリック


※バケット作成時に「パブリックアクセスをすべてブロック」を選択していた場合、
「公開」ボタンが非活性になっているので、その場合は「アクセス権限」タブの「ブロックパブリックアクセス」項目の
「パブリックアクセスをすべてブロック」のチェックを外す

6.静的ホスティングを確認

「プロパティ」タブの「Static website hosting」項目のエンドポイントからアクセス可能

表示を確認できました！

まとめ

公開するソースコードさえ準備していれば、簡単にホスティングできます。

Route53のサービスを使えば、独自ドメインも使うので近いうちに試してみたいと思います。

自己紹介ページやLPページを公開したい方はぜひお試しください！！