Amazon S3を利用して、サーバなしでWebページを公開してみる

2016/12/07 2017/04/21

今回は、Amazon S3というサービスを利用した、静的Webページの公開方法についてです。

「静的Webページ」とは、特定のURLにアクセスすると、いつでも誰でも全く同じ情報を見ることができるページのことです。
情報をを提供する人が作成したHTMLやCSSを利用して作成したページがそのまま表示されるようなページです。
静的ページは最初から用意されているものをそのまま表示するだけなので、ユーザーがアクセスしてきたときにより高速で表示させることができるというメリットがあります。

Webページを公開する方法としては、Webサーバを構築して、ここにWebページのコンテンツをアップロードする方法が一般的ですが、今回はWebサーバを使わずにWebページを公開する手順となります。
EC2サービスを利用して仮想サーバを構築して運用すれば、運用する時間の分だけ料金がかかりますが、この料金も積みあがれば意外にバカになりません。
今回ご紹介する Amazon S3 というサービスを利用すると、1GB、月あたり0.033米ドル(=4円くらい、記事執筆時点)～という超低コストで運用することが可能となります。
画像とか動画といった大容量コンテンツの提供もこわくありませんね。

それでは、早速やってみましょう！　(｀・ω・´)

まずは、AWSのマネジメントコンソールにログインします。
メニューから「S3」をクリックします。
Amazon S3をこれまでに利用したことがない場合には、下のような画面になります。
まずは、Webコンテンツを放り込む入れ物を準備します。
この入れ物を「バケット」と呼びます。
バケットというとちょっとなじみが薄いですが、いわゆる「バケツ」のことです。
「バケットの作成」をクリックします。
新しく作るバケットの名前を決めます。
バケット名はリージョン全体で一意（要は早いもの勝ち）となります。
バケット名と作成するリージョンを選択したら「作成」をクリックします。
※希望するバケット名を入力してみてエラーとなったら残念っっ！、運が悪かったとあきらめて別のバケット名を試してみてください。
バケットの作成に成功すると下のような画面となります。
引き続き、バケットの中に公開するWebコンテンツファイルをアップロードします。
作成したバケット名のリンクをクリックします。
バケットの中身が表示されます。
今はバケットを作成しただけで中身はなにもないので、「空です」と表示されます。もちろん"sky"の「空」ではありません。
「アップロード」をクリックします。
ファイルアップロードのポップアップが表示されます。
「ここにアップロードするファイルとフォルダーをドラッグアンドドロップします。」の枠のところに公開したいHTMLファイルとかCSSファイルとかのWebコンテンツファイルをドラッグ＆ドロップします。
終わったら「アップロードの開始」をクリックします。
アップロードが成功すると下のような画面になります。
「完了」の表示を確認してください。エラーが発生するとここにエラー表示がされます。
画面例では、「index.html」というファイルを1つだけアップロードしてます。
次にアップロードしたファイルをインターネットに公開するための設定をしていきます。
「すべてのバケット」のリンクをクリックします。
「プロパティ」をクリックします。
画面右側になにやらいろいろ出てきます。
ここでのポイントは2点です。
まず、Webページとして公開するには、公開URLの情報が必要となります。これを確認します。
「静的ウェブホスティング」をクリックすると内容の詳細が展開されます。
この中に「エンドポイント：」という項目があり、"****.s3-website-***.amazon.com"といった内容が表示されます。
この内容が、公開URLのドメイン名となります。
下の画面例ですと、"http://hogehoge201610.s3-website-ap-northeast-1.amazonaws.com/"のURLでアクセスすることになります。
もう一つ、デフォルトの状態ではWebページとして公開する設定になっていないため、これを公開するように設定する必要があります。
「静的ウェブホスティング」の詳細で「ウェブサイトのホスティングを有効にする」を選択することで公開する設定となります。
さらに「インデックスドキュメント：」の入力欄には"index.html"と入力します。
これにより、"http://hogehoge201610.s3-website-ap-northeast-1.amazonaws.com/"のURLでアクセスしたときに、"index.html"のコンテンツを表示するようになります。
この2点を確認＆設定したら「保存」ボタンをクリックします。
さて、これで公開開始・・・とはなりません。もう1つ作業が必要です。
何かというと、「どの範囲に(誰に)公開するか」という設定をしなければなりません。
今回の設定に限らずAWSの各サービスを利用する上で大前提として意識する必要があるのですが、AWSって「基本的にデフォルトではアクセス拒否、必要に応じてアクセス許可を追加する」というのが基本的なセキュリティポリシーなんです。
今回においても、「（作成した本人のIAMアカウント以外の）デフォルトはアクセスさせない」となっております。なので、一般公開させるためには、みんなにコンテンツファイルを参照することを許可させる設定をする必要があります。
これを設定していきます。
「アクセス許可」をクリックするとこの詳細が展開されます。
この中の「バケットポリシーの追加」をクリックします。
バケットポリシーエディターというポップアップが表示されます。
このテキストエリアにアクセス許可の設定を投入します。
ただ、このバケットポリシー設定の内容なんですが、フォーマットが決まっておりまして、いわゆる「JSON(=「ジェイソン」の読みます。斧とかを振り回すアレとは何の関係もありません(・_・;)」形式で設定しなければなりません。
でも記述が難しいので、この支援ツールとして「ポリシージェネレーター」なるものが準備されております。
左下に「AWS Policy Generator」のリンクがありますのでこれをクリックします。
新たなウィンドウで下のような画面が表示されます。これがポリシージェネレーターです。
英語ですが(´・ω・｀)ここでひるんではいけません。大丈夫です、失敗して斧で襲われたりとかないので、落ち着いて操作してください。
次のように設定していきます。
・Select Type of Policy：　「S3 Bucket Policy」を選択します。
・Effect：　「Allow」を選択します。
・Principal：　「*」を入力します。
・AWS Service：　「Amazon S3」を選択します。
・Actions：　「GetObject」にチェックする。
・Amazon Resource Name (ARN)：　「arn:aws:s3:::バケット名/*」と入力する（画面例では「arn:aws:s3:::hogehoge201610/*」となります）。
ざっくりとした設定内容としては、「すべての閲覧者に対してS3バケット内のWebコンテンツの参照を許可しますよ～♪」って感じです。
入力し終わったら「Add Statement」ボタンをクリックします。
画面の下のほうに何やら表が表示されます。
内容を確認して「Generate Policy」ボタンをクリックします。
「Policy JSON Document」というポップアップが表示され、何やら設定らしきものがテキストエリアに表示されます。
これがJSON形式で作成されたバケットポリシーとなります。
このテキストエリアの内容をマウスで選択して、コピーします。
コピーしたJSONを、先ほど表示された「バケットポリシーエディター」のポップアップのテキストエリアにペーストします。
ペーストしたら「保存」ボタンをクリックします。
これでバケットポリシーの設定は完了、このURLにアクセスするすべての人が、このバケット内のコンテンツにアクセスできるようになりましたヽ(^。^)ノ
では実際に指定URLにアクセスしてみましょう。
無事Webコンテンツは表示されましたか？
お、表示されましたか！こんな感じで、サーバを準備することなく、サクッとWebサイトを公開できます。
やり方さえわかってしまえば非常にお手軽かつ安価ですね。