ネットワークエンジニアが学ぶAWS

ネットワーク構築のインフラSEがAWSについて学んでいく過程を記事にしていきます!

【安くて速い】S3で静的webサイトの作成

約 9 分
【安くて速い】S3で静的webサイトの作成

こんにちは、カワタンです。

クレジットカード引き落としがある時期ですね。一気に銀行残高が減ってちょっとげんなりしてます笑
決済項目の中にある「レンタルサーバ利用料」これを見てふと思うことがありました。

「最安でwebサイト構築する方法って何なんだろうな?」

そこでレンタルサーバやwebサーバの利用料を確認して行く中で、AWSを使っためちゃくちゃ安いwebサイト構築方法を見つけました。
それが「Amazon S3を使った静的webホスティング」です。場合によっては月10円程度で自分のwebサイトを持てます
そこで今回は「webサイトをインターネット上に公開する」という基本的なところの説明から、S3を使ってどのようにwebサイト構築をするかの手順を紹介していきます。

webサイトの種類

まずはじめに、インターネット上に公開されているwebサイトは大きく分けて2種類があります。「静的webサイト」「動的webサイト」です。
静的webサイトとは、「静的」と名の付く通り表示する内容が決まっているサイトです。webページは、htmlファイルを使ってどんな内容で閲覧者に公開するかを決めています。

htmlファイルによるwebサイト表示の仕組み

上記の図のように、あらかじめ作っておいたhtmlファイルをサーバで公開することでページを表示しています。静的webサイトの場合は、表示したい分だけhtmlファイルをサーバに直接置き、それをインターネットに公開しています。ただこの作り方だと、公開したいページが増えれば増えるほどhtmlファイルを準備してサーバに置く必要があります。ちょっと面倒ですよね(^^;

そこで出来たのが、アクセスされるたびにサーバ上で処理をして場合に応じてwebページを作る方法が一般的になっていきました。これが動的webサイトです。サーバでアクセスがある度にページ作成が行われることから、「動的」と名付けられています。現在インターネットに公開されるwebサイトはほとんどが動的webサイトで、最近よく使われるwordpressもこちらに分類されます。
しかし、動的webサイトにも難点はあります。それがwebページを表示するまでの速さです。静的webサイトはサーバに置いてあるhtmlファイルを公開するだけのに比べて、動的webサイトはアクセスされる度にサーバで処理が行われます。その分、webページを表示するまでには時間がかかってしいます。

静的webサイトと動的webサイトの違い

以上が動的webサイトの静的webサイトの違いになります。両方にメリット/デメリットがありますが、初心者にも使いやすい動的webサイトが現在は主流になっています。しかし、静的webサイトはコストを抑えて表示速度が速いメリットがあります。

S3によるwebサイトホスティング

静的webサイトを作るために、AWSのストレージサービスである「Amazon S3」を使います(S3について詳しく知りたい方はこちら)。
S3では、保存しているデータをインターネット上に公開できる機能(webサイトホスティング)があります。これを使って静的webサイトをインターネット上に公開します。webサイトを作ると聞くと、AWSであればAmazon EC2を使ってサーバ作成を考える方がほとんどだと思います。しかし、S3を使うことには2つの大きなメリットがあります。

・安くwebサイトを公開できる
・アクセスが集中してもサイトが落ちない

まず、S3はEC2と比較しても利用料金が安く、コストを抑えることができます。実際にどれくらいの料金がかかるか試算したい方は、Amazonが提供している料金見積もりサイトで見積もりをしてみてください。
また、S3を使うことでダウンしにくいwebサイトを作ることができます。仮にアクセスが大量に来たとしても、S3であればサーバが落ちる心配がありません。S3は、管理をAmazonが代わりにやってくれるマネージドサービスに分類されています(マネージドサービスについて詳しくはこちら)。そのため、アクセス数が増加してもAmazon側で即時に対応が行われるため、アクセスが急増して負荷が急に高くなった時でも、webサイトが落ちる心配がありません。
それでは実際にS3でwebサイトを作っていきましょう。

S3でのwebサイトホスティング手順

今回は、アクセスすると「Hello world」と表示されるwebページを公開します。手順としては、大きく分けて下記の2ステップに分けられます。

① インターネット公開用のS3バケットを作成
② htmlファイルを作ってインターネットに公開

それでは順を追って実際にwebページを作ってみましょう。

インターネット公開用のS3バケットを作成

まずはインターネット公開用にS3バケットを作成します。
まずは、Amazon S3でデータを保存するための「バケット」を作成します。
[Amazon S3 コンソール] (https://console.aws.amazon.com/s3/) を開きます。
IAMユーザによるAWSサインイン画面『S3 コンソール』画面に移るので、 [バケットを作成する] ボタンをクリックします。
『名前とリージョン』画面に移るので、下記を入力して[次へ]をクリックします。

入力項目
バケット名:(命名には制限事項があるため、確認した後にバケット名を入力してください)
※バケット名は他のAWSアカウントが作成したものも含めて重複はできません。詳細な名称設定のルールはこちらをご確認ください。

リージョン:東京(反応が早いので東京をオススメしますが、好きな地域で問題ないです。「リージョンって何?」という方はこちら

S3バケット作成画面(バケット名とリージョンの決定)『オプションを設定』 画面に移るので、下記を入力して[次へ]をクリックします。(追加料金が発生する項目は選択しておりません。必要な方は要望に応じて入力項目を変更してください。)

入力項目
・バージョニング #1
  同じバケット内でオブジェクトのすべてのバージョンを保持します。:☑
・サーバアクセスのログ記録

  バケットへのアクセスリクエストを記録します。:☑
   ターゲットバケット:(入力したバケットを選択してください。)
・デフォルト暗号化 #2
  S3 に保存されるオブジェクトを自動的に暗号化します。:☑
   AES-256:●

#1 バージョニングとは、S3に保存するデータを上書きする際に、上書きする前のデータ保存しておくかの設定です。誤って上書きしてしまった時のために有効にしておきましょう。
#2 S3バケットに保存するデータを暗号化して保存します。

S3バケット作成画面(バージョニングと暗号化の決定)『アクセス許可の設定』画面に移るので、次の項目を入力して[次へ]をクリックしてください。
※まずはインターネットに公開している状態にして、アクセス制限を適用していきます。

入力項目
・このバケットのパブリックアクセスコントロールリスト(ACL)を管理する #3
  新規のパブリックACLと ~ :☑ 
  パブリックACLを通じて ~ :☑ 
・このバケットのパブリックバケットポリシーを管理する #4
  新規のパブリックバケットポリシーを ~ :☑
  バケットにパブリックポリシーがある ~ :□
・システムのアクセス許可の設定: ~ を付与する

#3、#4 ACL及びバケットポリシーは、バケットへのアクセスルールを決めるためのものです。

S3バケット作成画面(アクセス許可設定_ACLなし)
[確認] 画面に移るので、内容を確認して[バケットを作成] をクリックします。S3バケット作成画面(設定確認_ACLなし)S3バケット一覧(公開用バケット確認)

続けて作成したバケットに「バケットポリシー」というアクセスするルールを決めます。現在の状態では、インターネットから誰でもファイルをアップロードしたりできる状態になっています。そこで、アクセス制限をかけて閲覧のみできる状態に変更しましょう。

『バケット名リスト』画面に移るので、[作成したバケット]をクリックします。

S3バケット一覧(公開用バケットの選択)

『バケットの概要』画面に移るので、[アクセス権限]をクリックします。S3バケットトップ画面

『アクセス権限』画面に移るので、[バケットポリシー]をクリックします。S3バケット(アクセス権限_ACLなし)

『バケットポリシー』画面に移るので、[エディタ]部分に下記をコピペして[保存]をクリックしてください。
※「myBucketName」の部分を設定したバケット名に変換してください。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<span style="font-size: 12pt;"><span class="b"><span class="red">「myBucketName」</span></span></span>/*"
            ]
        }
    ]
}

htmlファイルを作ってインターネットに公開

次に、webページを公開するためにhtmlファイルを準備します。自分のPCで「メモ帳」を開いて、下記の3行を丸々コピーして貼り付けてください。ファイル名を「index.html」として保存します。

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello world !&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
Hello world !
&lt;/body&gt;
&lt;/html&gt;

このファイルを先ほど作成したS3バケットにアップロードします。作成したバケットの『概要』ページから[アップロード]をクリックします。

S3バケットへのアップロード
『ファイルの選択』画面に移るので、[ファイルを追加]をクリックします。

S3バケットへのファイルアップロード画面

先ほど作成した「index.html」ファイルを選択して[次へ]をクリックします。
S3バケットへのファイルアップロード(ファイルの選択)
『アクセス許可を設定する』画面に移るので、他の設定はデフォルトのままで以下のように変更して[次へ]をクリックします。

・パブリックアクセス許可を管理する: このオブジェクトにパブリック読み取りアクセス権限を付与する
S3バケットへのファイルアップロード(アクセス権の設定)
『プロパティを設定する』画面に移るので、以下のように設定して[次へ]をクリックする。
・ストレージクラス: 標準IA(好みで選択は変えてください。)
・暗号化: Amazon S3 マスターキー(好みで選択は変えてください。)
S3バケットへのファイルアップロード(ストレージタイプの選択)S3バケットへのファイルアップロード(暗号化の選択)
『確認』画面に移るので、設定が間違っていないことを確認して[アップロード]をクリックします。
S3バケットへのファイルアップロード(ファイルの確認)アップロードしたファイルをクリックすると、『概要』画面が表示されます。表示されたエンドポイントのURLにアクセスしてください。S3バケット内index.htmlファイルの概要

下記の画面のように「Hello World」とwebブラウザに表示されれば成功です。

Hello world

簡単なページですが、これで自分のwebぺージをインターネットに公開することができました。

まとめ

S3を使って爆速で安価なwebサイト構築方法を説明しました。今回は1行表示するだけのwebページ作成だったので、効果がよくわかりませんね笑
次回は、wordpressで作ったwebサイトをS3でインターネットに公開してみます。wordpressで作ったwebサイトであれば、表示される内容も多いので爆速の効果もわかりやすいです。それではお楽しみに(*^-^*)

エンジニア向けの資産形成情報を発信中!

将来にお金を残していくための情報発信をしています。友だち登録をしてくださった方には、資産形成の記事を閲覧するためのパスワードもお教えてしてますので、気になる方は下記から登録お願いします(^^)
AWSの資格を取りたい方向けに僕が合格した過去問レポートもプレゼントしています!

友だち追加

About The Author

カワタン
3年半インフラエンジニアとしてネットワーク運用/構築に携わってきましたカワタンです^_^AWSのことを知ってから、このサービスが大好きになって現在猛勉強中です(*^^*)
AWS専門家になって月収150万目指してます!!!
Follow :

Leave A Reply

*
*
* (公開されません)