S3を使ったサーバーレスウェブサイトの作り方

S3
スポンサーリンク

自分のWEBサイトを公開するにあたって、
まず必要となるのがレンタルサーバー・・・という考えはもう古いです!

単純な静的WEBページ、つまりHTML、CSS、JavaScriptで作られたWEBサイトであれば、
実はS3だけでも簡単に公開できます。

そうです、WEBサイトを公開するのにサーバーは必要ないんです。
これをサーバーレスとも言います。

サーバーが必要ないから、料金は非常に安価になります。

今回は、S3だけでWEBサイトを公開するにはどのようにしたらよいのかを解説します。

S3だけでWEBサイトを公開するメリット・デメリット

EC2を使わずにS3だけでWEBサイトを公開するメリットは以下の3点です。

  1. サーバーへログインして行う作業が不要
  2. EC2で公開するよりも安価
  3. データの格納容量に制限がない

EC2を使うとWEBサイトを公開するためにApache等のミドルウェアをインストールしたり、
WEBページを置くといったサーバーにログインして行う作業が必要となります。

ですが、S3だけでWEBサイトを公開する場合はそのような作業は不要です。

また、EC2を使用しないため、EC2を使用してWEBページを公開するよりも安価にWEBサイトを公開できます

そしてS3はデータの格納容量に制限はありません

例えば高画質なイメージデータや動画データを扱ったWEBサイトを公開しようとした場合、
「どれだけのデータ量が保存できるか?」という点が心配ですが、
S3を使ったWEBサイトであれば、そのような心配は不要です。

一方、デメリットはというと、”利用できる言語(HTML、CSS、JavaScript)が限られる“という点くらいかと思います。

一番クリティカルな問題かもしれませんが、この問題がクリアできるのであれば、
EC2を利用せず、S3だけでWEBサイトを公開する方法をオススメします。

S3でWEBサイトを公開するためのアクセス権限の設定

WEBページを公開するには、S3バケットに格納されているデータ(オブジェクト)に対して誰もが読み取れるアクセス権の設定とする必要があります。

 

誰もが読み取れる、これをパブリック読み取り権限と言いますが、
それを設定するにはバケットポリシーによる設定を行う必要があります

※S3のアクセス権限について、より詳しい内容にご興味がありましたら、次の記事をお読みください。

EC2からS3へファイルを送受信する方法
「EC2上のアプリケーションからS3へファイルをアップロードしたい!」 S3はとても便利なサービスです。 耐久性が高く料金も安いので、 AWSのストレージ系サービスとしては、ぶっちぎりでNo1のサービスといえます。 そん...

 

以下より、S3でWEBサイトを公開するためのバケットポリシー設定方法をご説明いたします。

 

まずはじめにパブリックアクセス設定を解除する必要があります。
※パブリックアクセス設定とは、2018.11.15にS3へ新たに追加された機能です。(詳細はこちら

ACLやバケットポリシーより上位の権限設定となり、パブリックアクセスに関するACLやバケットポリシーの設定をできなくしたり、ACLやバケットポリシーによってアクセス可能となったパブリックアクセス自体をブロックしたりすることが可能です。

※要は、パブリックアクセスに関するACLやバケットポリシーの設定を無効化します

 

パブリックアクセス設定対象は、ACLとバケットポリシーに分かれております。

今回はバケットポリシーを使ったパブリック公開となりますので、
バケットポリシーに対するパブリックアクセス設定を変更することとなります。

(1)S3バケットの画面から、[アクセス権限]をクリックする

 

(2)[パブリックアクセス設定]→[編集]をクリックする

 

(3)「新規のパブリックバケットポリシーをブロックする」と、
「バケットにパブリックポリシーがある場合、パブリックアクセスとクロスアカウントアクセスをブロックする」のチェックを外します。

 

(4)[保存]→”確認”と入力して[確認]をクリックする

 

これでバケットポリシーに対するパブリックアクセス設定が許可できました。
次にバケットポリシーの設定となります。

 

(5)[アクセス権限]→[バケットポリシー]をクリックする

 

(6)次の文字列を”バケットポリシーエディター”へ入力します
※example-bucketの部分は、どのバケットを対象にするかを設定する箇所となります。
対象バケット名に置き換えて入力してください。私の場合は下記画像のようになります。

 

(7)[保存]をクリックする

以上で完了です。

成功すると、以下のようにバケットポリシータブに”パブリック”というアイコンが表示されるようになります。

 

S3をWEBサイト化する設定方法

S3バケットにパブリック読み取り権限が付与できたら、
次はS3バケットを静的WEBサイト化する設定へと変更します。

なにはともあれ、まずは表示できるページが存在しないとテストもできませんので、
以下のような簡単なHTMLコードを書いた”index.html”ファイルを作成し、S3へ保存しておきます。

準備が整いましたので、静的WEBサイト設定に進みます。

(1)S3バケットのプロパティを開きます

(2)[Static website hosting]をクリックします

(3)”このバケットを使用してウェブサイトをホストする”をチェックします

(4)エンドポイントが表示されますので、メモしておきます。
※このエンドポイントが静的WEBサイトのドメインとなります。

(5)インデックスドキュメント欄へ先ほど追加した”index.html”と入力して、[保存]をクリックします

これでS3バケットの静的WEBサイト化の設定が完了しました。

先ほどメモしたエンドポイントが、WEBサイトのドメインとなります。
ブラウザを立ち上げてエンドポイントURLにアクセスすると”いんでっくすぺーじ”が表示されると思います。

このドメインはバケット名とリージョン名を組み合わせた機械的な名前となってしまっておりますが、次回ご説明するCloudFront、Route53を利用すると独自ドメインを適用することが可能となります。

また、SSL化もCloudFront、Route53によって可能となります。

※CloudFrontを使ったSSL化については次の記事をお読みください

CloudFrontを使ってS3のWebサイトをSSL化してみよう
こんにちは、hidesanです。 今回は、以前ご紹介したS3の静的Webサイトに、CloudFrontを組み合わせ、WebサイトをSSL化する方法をご紹介致します。 昨今ではHTTPS通信できるWebサイトが当たり前となりました。 ...

 

本記事では、S3を使ったWEBサイトの公開方法をご説明させていただきました。
ぜひ試してみてくださいね。

以上、hidesanでした!

スポンサーリンク
S3
Tech Dive
タイトルとURLをコピーしました