Amazon S3を使用して静的ウェブサイトを作成する方法

Amazon Simple Storage Service (S3)は、Amazon Web Services (AWS)が提供するウェブサービスで、インターネットを介してオブジェクトを保存およびアクセスするためのものです。S3は、ウェブサイト、ウェブサービス、モバイルアプリケーションにデータをアップロードし、米国のサーバーに保存する機能を提供します。これは、TCPベースのプロトコルを使用してHTTP/S経由で動作します。S3の使用は、PUT操作（ストレージ）とGETリクエスト（取得）の両方に対して無料です。

オブジェクトを受信または保存するためのバケットを開くには、特別な暗号化キーだけでなく、アカウントが作成された後にAmazonが提供する共有キーも必要です。ユーザーは、毎月5GBのストレージスペースを提供する無料のアカウントにサインアップできますが、バケットに保存できる量に制限はありません。

Amazon S3は、データが冗長性のために複数の施設に保存されることで99.999999999%の耐久性を提供します。Amazon S3は、データの可用性を確保するためにAmazonが使用するのと同じレプリケーション技術を使用しています。このサービスは、使用されるアプリケーションと保存されるデータの量に基づいてスループットとコストを最適化し、データ損失からの保護を提供することを目的としています。

また、ユーザーがS3を介してどれだけのデータがアップロードまたはダウンロードされているかを分析し、使用される帯域幅を制御したり、モバイル対応のソリューションを活用したりする機能もあります。Amazon S3は、ユーザーに対してインターネット経由で無料で提供されます。データ転送速度に制限はありません。データは、レイテンシが低く、1秒未満でどこからでも取得できるため、ほぼリアルタイムでリソースにアクセスできます。また、リソースをホストするために常に資本投資を必要としない代替のクラウドストレージオプションを提供することで、ホスティング料金やキャパシティプランニングを排除します。

Amazon S3は、あらゆるタイプ、サイズ、形式のオブジェクトをサポートしています。オブジェクトは任意のバケットに保存できますが、オブジェクトの名前を介してアクセス可能でなければなりません。ユーザーは、社内システムや公共のシステムからHTTPまたはHTTPSを介して、NFS（Network File System）またはPOSIXファイルシステム機能の統合をサポートするバケットにファイルやフォルダーをアップロードできます。ユーザーは、Amazon S3にアカウントを持つ別のユーザー（AWSを介して作成された）と最大70GBのストレージスペースを共有することで、誰がバケットにアクセスできるかを直接制御できます。

ウェブサイトを作成することは、圧倒されるほどの選択肢が多く、 dauntingな作業です。しかし、ホスティング、ドメイン名、サーバーの設定を心配せずにウェブサイトを作成できるとしたらどうでしょうか？Amazon S3を使用すれば、コンピュータとインターネット接続だけで簡単に静的ウェブサイトを作成できます。このブログ投稿では、Amazon S3を使用して独自の静的ウェブサイトを設定する方法を示します。また、ウェブサイトにAmazon S3を使用する利点についても説明します。それでは始めましょう！

前提条件

Amazon S3を使用して静的ウェブサイトを作成するには、次のものが必要です：

• Amazon S3でウェブサイトを構成するためのAmazon AWSアカウント。このデモでは、無料のAmazonアカウントを使用します。このアカウントは無料で、Amazon S3の静的ウェブサイトと組み合わせると大きな利点があります。

何をするのか？

このガイドでは、Amazon S3を使用してシンプルな静的ウェブサイトを作成および構成します。また、その静的ウェブサイトをカスタムエラーページで構成する方法も説明します。このガイドでは、メンテナンスが容易で非常にコスト効果の高いHTML、CSS、JavaScriptのウェブサイトを作成する方法を示します。

静的ウェブサイトは、静的ページのみで構成されるウェブサイトです。php、asp、nodejsなどのサーバーサイドスクリプト言語は含まれていません。すべてのウェブページが保存されている1つのhtmlファイルのみで構成されています。静的ウェブサイトホスティングは新しいものではなく、長い間存在しています。

静的サイトを使用すると、ハッカーを心配する必要がなく、ウェブページを提供する能力だけが必要です。Amazon S3と組み合わせると、コストは非常に少なく、サイトごとに1ドルまたは2ドル程度です。そこから、数百万の読者を持つオーディエンスのニーズに応じてウェブページをスケールできます。

静的ウェブサイトをホストするには、Amazon S3バケットを作成します。

次に、そのバケットにコンテンツをアップロードします。

S3バケットの公開読み取りアクセスは意図的でなければなりません。誰でもどこでもバケットを読むことができることが重要です。このガイドの後半で、バケットポリシーについて説明します。

ウェブサイトは、AWS S3エンドポイントで利用可能になり、以下のようなURLになります。

このステップバイステップガイドを完了するために必要なすべてのファイルをダウンロードして使用するためのGitHubリポジトリへのリンクがあります。準備はできましたか？良いですね。AWSコンソールにログインしてください。

S3バケットの作成

静的ウェブサイトを作成する前に、最初にS3バケットを作成して構成する必要があります。Amazon S3を使用して静的ウェブサイトを作成すると、そのサイトはそのバケット内に保存されます。

1. AWSコンソールで、S3ダッシュボードに移動し、バケットを作成します。

2. ユニークなバケット名(my-howtoforge-bucket-7Vftzchzw)を提供します。バケット名がユニークであることを確認してください。バケット名には小文字の文字、数字、ハイフンのみを含めることができます。S3バケット名は、他の誰かが同じ名前のバケットを作成してウェブサイトを上書きするのを防ぐために、Amazon S3全体でユニークでなければなりません。また、パスはDNS準拠である必要があります。同じ名前のドメインは2つ存在できません。

3. すべての公開アクセスをブロックするチェックボックスの選択を外します。ウェブサイトをプライベートに保ちたい場合は、このチェックボックスを選択します。選択されている場合、認証されたAWSアカウントのみがウェブサイトにアクセスできます。この場合、例を公開にするためにこのチェックボックスの選択を外します。これにより、誰でもS3バケットからhtmlファイルを取得し、ウェブページを見ることができます。現在の設定を認識する…のチェックボックスを選択します。

4. ページの下部にあるバケットを作成をクリックします。

5. バケットを正常に作成しましたという緑のメッセージが表示され、新しいS3バケットの詳細が表示されます。バケット名をクリックし、ARNをコピーします。Amazonリソース名（ARN）は、AWSリソースのユニークな識別子です。S3バケットを作成すると、Amazonは新しいバケットのためにユニークなARNを生成します。AWSリソースを安全に保つために、Amazonはリソースを作成または変更する際に、独自のユニークな識別子またはAmazon生成のものを使用することを要求します。このARNを使用して、バケットを追跡し、静的ウェブサイトを作成します。

6. アップロードをクリックし、ファイルを追加をクリックし、以前にダウンロードしたファイルを選択し、アップロードします。

ウェブサイトのアップロードは、Amazon S3を使用して静的サイトを設定する最も簡単な部分です。アップロードプロセスは完了するまで数分かかる場合があります。完了すると、緑の成功メッセージが表示されます。

静的ウェブサイトホスティングの有効化

ウェブサイトがAmazon S3にアップロードされたので、ウェブサイトを表示できるようにする必要があります。静的ウェブサイトホスティングを使用すると、静的コンテンツ用に設計されたウェブサーバーから静的HTML、CSS、JavaScriptページを提供できます。動的ウェブページ（例：PHPやASP）よりもコスト効率が良いです。

静的ウェブサイトホスティングは、画像、CSS、JS、その他の静的ファイルなど、さまざまな種類のファイルを提供するために使用できます。これらのファイルは非常に頻繁に変更されず、非常に低コストで提供することができます。

1. プロパティをクリックし、静的ウェブサイトホスティングをクリックし、編集をクリックして有効化します。

2. 有効化をクリックし、ホスティングタイプを静的ウェブサイトをホストとして選択します。インデックスドキュメントをindex.html、エラードキュメントをerror.htmlとして入力します。下にスクロールし、変更を保存をクリックします。

ウェブサイトホスティングを有効にすると、インデックスドキュメントをアップロードする必要があります。インデックスドキュメントは、ユーザーがルートドメイン名を使用してウェブサイトにアクセスしたときに最初に表示されるファイルです。たとえば、http://my-bucket.s3.amazonaws.com/です。

インデックスドキュメントを作成しない場合、または後で削除した場合、Amazon S3は404エラーページまたはデフォルトのインデックスファイルを返します。デフォルトのインデックスファイルには、バケット名、最終アクセス日、その他の一般的な情報が表示される場合があります。インデックスドキュメント名は大文字と小文字を区別し、サイトのルートにアップロードしたインデックスドキュメントの名前と正確に一致する必要があるため、インデックスドキュメント名が正しく綴られていることを確認してください。

エラードキュメントは、ウェブサイトにアクセスしようとしたときにエラーが発生した場合にユーザーが見るページです。このファイルはオプションですが、推奨されます。独自のカスタムエラードキュメントをアップロードしない場合、Amazon S3はデフォルトの404エラーページまたはインデックスドキュメント（存在する場合）を返します。エラードキュメント名も大文字と小文字を区別するため、アップロードするエラードキュメントの名前が正しく綴られていることを確認してください。

3. バケットの静的ウェブサイトホスティングを正常に有効化すると、AWS S3パネルに緑の静的ウェブサイトホスティングを正常に編集しましたが表示されます。また、サイトのバケットエンドポイントも表示されます。これは、バケット名の後にs3.website.yourregion.amazonaws.comが続きます。

4. お気に入りのブラウザでそのURLを開くと、403 Forbiddenメッセージが表示されます。これは、適切なポリシーが割り当てられていないためです。次のステップで、バケットにアクセスするための適切なポリシーを設定します。

適切なバケットポリシーの設定

Amazon S3でウェブサイトホスティングを有効にしたので、アクセスするためのバケットポリシーを設定する必要があります。バケットポリシーは、Amazon S3バケットへのアクセスに関する一連の権限です。一般からウェブサイトにアクセスするには、バケットへの公開アクセスを許可するバケットポリシーを追加する必要があります。

1. S3ダッシュボードで、権限タブをクリックし、編集をクリックします。

2. このJSONファイルから行をコピーしてJSONエディタに貼り付けます。を、以前に保存した実際のARNに置き換えます。

• バージョン：2012-10-17はバケットポリシーのバージョンです。
• ステートメント：PublicReadGetObjectは、指定されたバケット内のすべてのオブジェクトに対して実行されるアクションです。
• プリンシパル：プリンシパル要素は、指定されたアクションをオブジェクトに対して実行することが許可されているAWSアカウント、IAMユーザー、またはグループを指定します。ステートメントに複数のプリンシパルが特定されている場合、アクション要素を許可または拒否に設定することで、どのプリンシパルが「アクションを実行できるか」を指定する必要があります。
• アクション：アクション要素は、許可されるアクセスの種類を指定します。
• リソース：リソース要素は、権限が適用されるオブジェクトを指定します。
• この場合、PublicReadGetObjectルールを設定し、誰でもバケットにアクセスしてバケット内の任意のオブジェクト（s3:GetObject）を取得できるようにします。したがって、プリンシパル行のアスタリスク*。リソースのアスタリスク*は、S3バケットポリシーがバケット内のすべてのオブジェクトに適用されることを示します。ポリシーを編集した後、アスタリスクが最後にあることを確認してください。

3. 完了したら、変更を保存をクリックします。

これで、バケットは公開にアクセス可能になりました。ポリシーが即座に適用されることがわかります。

静的ウェブページのテスト

バケットポリシーを設定したので、ブラウザでエンドポイントURLを開くことで静的ウェブページにアクセスできます。

1. 以前に開いたS3バケットエンドポイントURLに戻ります。S3バケットエンドポイントURLを再読み込みすると、今回は404エラーが消えているはずです。404エラーが表示される場合は、バケットポリシーに問題があります。ブラウザに静的ウェブページが表示されるはずです。以下のように、ページの整形されたHTMLバージョンが表示されるはずです。

2. 存在しないURLにアクセスすることでエラーページをテストすることもできます。以前にアップロードしたエラーページが表示されるはずです。

結論

このガイドでは、Amazon S3で静的ウェブサイトを無料でホストする方法を説明しました。このガイドでは、ウェブサイトのアップロード、適切なバケットポリシーの設定、静的ウェブサイトホスティングの有効化の全プロセスもカバーしました。このガイドは、低コストで無料でウェブサイトをホストするためのシンプルな方法です。Amazon S3が請求するコストは、他のサービスと比較して非常に少ないです。

この記事は役に立ちましたか？理解しやすかったですか？下にコメントを残して意見を共有できます。この新たに得た知識を活用して、Amazon S3への静的ウェブサイトのデプロイを自動化できます。