North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
TECH

【ハンズオン】5分でAmazon S3で静的ホスティングする

はじめに

現在のプロジェクトで静的ファイルをAWSのAmazon S3(以下 S3)にホスティングして運用しているので、
自分でも動かしてみました。
思いのほか低コストでできたので、手順をまとめてみました。
LPやポートフォリオなどの静的ファイルのホスティング先をどうするか迷っている人の参考になればと思います。

AWS S3とは

基本的にストレージを提供するサービスになっています。
ストレージとは画像、動画、ファイルなど様々なデータを保存できるもので、例えば、iCloudは写真や書類(メモアプリ、pdfなど)を保存するクラウドストレージサービスです。

S3は、他のAWSサービスと連携して使うことができ、Amazon EC2のスナップショット(バックアップ)の保存や、ファイルアップロード時をイベントトリガーとしてLambda関数を呼び出しをしたりと、様々な使い方ができます。

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

参照:S3ユースケース

静的ホスティングとは

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

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

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

S3はアプリケーションサーバではないため、このような動的サービス(WordPressなどのCMS)のホスティングはできないです。

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

1番の理由はコストが低いです。

料金は、容量・リクエスト数・データ転送によって決まります。
一般的なストレージクラスの`S3 Standardですと、
容量が2.58円/GB。
1,000リクエスト(GETの場合)あたり0.038円。
データ転送(S3 からインターネット)が9.3円/GB(1GB/月まで無料)。

仮に1ヶ月運用した下記の条件で運用した場合、約80円/月になります。レンタルサーバを借りてLPなどを運用するよりはるかに安いです。
【条件】
・トップページの容量 800KB
・ページのアクセス月10,000アクセス(1リクエストあたり10GETとする)
【計算式】
月額 = 容量 + リクエスト数 + データ転送
78.2円= 約0円 + ((10000×10/1000)×0.038) + (10000×0.0008×9.3)

また、 フルマネージドサービスなのでサーバのメンテナンス等は考えなくても良いです。

参照:料金 - AWS S3

手順

1.index.htmlを作成

公開する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サービスに移動バケットを作成するを押下し、バケット名を入力してバケットを作成

s3-static-hosting.png

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

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

O 774LOER.png

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

アップロードしたindex.htmlをクリックし、「プロパティ」タブの「Static website hosting」項目の
「このバケットを使用してウェブサイトをホストする」を選択。
インデックスドキュメントに静的ホスティングするindex.htmlを入力して保存

Static website hosting.png

5.index.htmlを公開

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

s3-static-hosting.png

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

T. ENGORERIONT FEROTHUAMSHEOAdRE3. AWHIL7 THURSD  ALTS⅝ULUIFlNThMSOD.png

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

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

Static website hosting.png

表示を確認できました!

bianTlNGE s3-static-hosting.s3-website-ap-northeast-1.amazonaws.com.png

まとめ

S3を利用することで簡単に静的ホスティングできます。
Amazon Route 53を使えば、独自ドメインも使うので近いうちに試してみたいと思います。
自己紹介ページやLPページを公開したい方はぜひお試しください!!

daichi.sugiyama
WRITER:daichi.sugiyama
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001