はじめに

最近は、さまざまな場面でAmazon Web Services（以下、AWSと表記します）が利用されるケースが増えてきました。しかし、多くのサービスから構成されるAWSはどのように使ったらよいか、わかりづらいと思っている方も多いのではないでしょうか。

今回はAWSが提供しているサービスの一つであり、フロントエンド・エンジニアにとっても扱いやすい Amazon Simple Storage Service（Amazon S3、以下S3と表記します）を利用した静的なWebサイトの公開方法をご紹介します。高度なサービスを作るわけではなく、ちょっとWebサイトを公開したい、といった用途にも使えます。

AWSのAmazon S3とは

S3は、基本はファイルを保存したり取り出したりというシンプルなストレージサービスです。重要なデータを取り扱うことも想定して設計されていて、データを保存するとAmazonの複数の施設および施設内の複数のデバイスにコピーして保管される仕組みです。これにより、Amazon内の複数の施設でデータが失われたとしても、他の施設からデータが復元できるように設計されているようです。

S3に保存したデータのアクセス方法として、Webブラウザからのアクセスを用意しています。東京リージョンからであれば、国内でもかなり高速なレスポンスでアクセスできます。Webからのアクセスには独自ドメインを設定することもでき、静的なWebサイトの公開インフラとして利用しやすいものになっています。

AWSを使わない、通常の1台のレンタルサーバーではそのサーバーが障害を起こすとデータが失われてしまう場合があります。そのために、大事な公開サーバーでは複数台のサーバーを借りて同期したりしますが、安全に気を遣うほど、コストがかかることになってしまいます。また、レスポンスに関してもS3のレベルの速度を出すのはなかなか困難です。

S3でのWebサイトの公開は、レンタルサーバーでの公開に比べ、フロントエンド・エンジニアにとってメリットとなる部分が多くあります。その一つに、S3で公開する場合、管理はすべてAWSに任せることができる点があります。フロントエンド・エンジニアは通常、サーバーの設定やセキュリティ、負荷の管理などは専門ではないはずです。フロントエンド・エンジニアだけで管理するサイトなら、この部分を任せられるのは必須の要件になるかと思います。

また、S3のメリットとしては、アクセスが増えても負荷対策を考えなくて良いこと、容量が無制限なため、お金さえ払えば容量を気にしないで済むということがあります（従量課金）。

最近では動画ファイルの公開が必要になると、まれにサーバー容量や転送容量が問題になることがあります。そういった場合、動画ファイルだけでもS3から配信するという選択肢もありではないかと思います。そのほか、具体的な課金システムについては、本記事の後半で詳しく解説しますので、まずは利用する流れを見てみましょう。

AWS S3の利用方法

アカウントの作成

利用するには、まずはAWSのアカウントを作成する必要があります。AWSのWebサイトにアクセスし、「サインアップ」（または「まずは無料で始める」と表示されています）をクリックします。

「AWSアカウントを作成」画面になりますので、「私は新規ユーザーです」をクリックしてアカウント作成を進めましょう。本人認証、クレジットカードの登録など、少々手間がかかりますが、説明の通りに作成すれば、難しくはないかと思います。なお、AWSには無料利用枠があるので*、制限枠内なら無料で試すことができます。

アカウントを作成できたら、AWSマネジメントコンソールへアクセスします。多くのWebサービスが表示されていますが、「ストレージ ＆ コンテンツ配信」の中の「S3」を選んでください。

AWSコンソールでホスティング用バケットを作成

S3ではバケットという大元のフォルダのようなものを作る必要があります。「バケットの作成」ボタンからバケットを作成しましょう。バケット名は命名ルールに従えば自由に付けることができますが、すでに他の人が使っているものと、かぶらない必要があります。

また、ドメインを設定したい場合はバケット名をドメイン名にする必要があります。www.example.comを公開するにはwww.example.comという名前のバケットでないといけないのです。リージョンについては日本で公開するのなら、通常「Tokyo」を選んでおけばよいでしょう。

次にWebサイトとして公開できるように設定します。今作成したバケットの名前の左側のアイコン（ドキュメントに虫眼鏡）をクリックすると、プロパティが開きます。その中の「静的ウェブサイトホスティング」を開いてください。公開したいバケットはここで、「ウェブサイトのホスティングを有効にする」を選びます。

設定項目が表示されるので、「インデックスドキュメント」にファイル名を入力します。「index.html」としておくと慣れた感じで使いやすいでしょう。設定が終わったら、忘れずに「保存」ボタンを押します。なお、「エンドポイント」で表示されている「xxxx.s3-website-ap-northeast-1.amazonaws.com」が公開されるドメインになります。ちなみにまだ公開する設定になっていない状態なので、この状態で上記ドメインにアクセスすると「404 Not Found」とWebサイト公開設定がされていないというエラーが出ます。

なお、バケット名をドメイン名にした場合は、ドメインのDNS設定でCNAMEレコードを設定することで表示が可能です。

CNAMEレコード設定例

cname www www.example.com.s3-website-ap-northeast-1.amazonaws.com.

テストファイルをアップロードする

バケット一覧からアップロード先のバケット名をクリック、「アップロード」ボタンをクリックすると簡単にファイルをアップロード可能です。なんでもよいですが、ここではindex.htmlをアップしてみます。

アップしたファイルはそのままでは表示権限がないので、「xxxx.s3-website-ap-northeast-1.amazonaws.com」にアクセスしても「403 Forbidden」が表示されます。表示権限を変更するには、ファイルを選択し、「プロパティ」にある「アクセス許可」より、全員に「開く/ダウンロード」の権限を与える必要があります。権限を与えて保存すればこれで、ドメインにアクセスするだけで表示されるはずです。

なお、S3へのアップロードはMacのソフトウェアで例を挙げるとTransmit、Forkliftなど、FTPに対応している多くのGUIのソフトウェアでも可能です。

このように簡単にアップロードできますが、毎回Webブラウザから行うのは少々面倒です。次回は、gulpのタスクとしてアップロードする方法とGitHubとCircle CIを使った方法を解説します。

料金とフロントエンド・エンジニアにできること

S3は通常のレンタルサーバーを借りるのに比べ、料金体系が少し複雑です。月額いくらと決まっているのではなく、使った分だけの従量制となっているからです。

これは、容量が少なく、アクセスが少ないサイトであれば格安で使えるというメリットもありますが、逆にアクセスが多いサイトは高くなるということです。たとえばYahoo!ニュースに掲載されるなど、予期せぬ大量のアクセスが来た場合を考えてみましょう。レンタルサーバーであれば大量のアクセスで遅くなったり、表示できなくなったりしますが、S3の場合は問題なく表示できる代わりに、課金されることにもなるわけです（こういった場合に備えて、上限を設定したり通知をするような仕組みもS3にはあります）。

フロントエンド・エンジニアとしては、表示高速化のための対策と同じようなことで、S3のコスト削減に貢献できます。

• リクエスト数により金額が変わるため、フロントエンドの施策である、JSをまとめる、CSSをまとめるといったことで、コストの削減に影響
• ダウンロード容量での課金もあるため、表示高速化のための画像ファイルの軽量化といった施策もコストの削減に影響

では、S3を使って公開した場合、実際どれぐらい料金がかかるのか、計算してみましょう。

東京リージョンでの価格は次の通りです。ドルだとわかりづらいので為替レートを1米ドル＝113円として円に換算します。静的なWebサイトで大容量になることは少ないかと思いますので、容量が多い場合の割引価格は考慮しません。

• ストレージ料金：1GBあたり、3.729円（最初の1TB/月）
• リクエスト料金：10,000GETあたり、0.4181円
• データ転送料金：最初の1GBは無料、その後1GBあたり15.82円（10TBまでの料金）

たとえばCodeGridの場合、「トップページの容量 800KB」「GETの数 20」としてアクセス数別に計算してみます。

トップページだけを置いているとすると、ストレージ料金は月額0.0029832円、ほぼ0です。サイト全体を置いても月額1円になるかどうかでしょう。ページのアクセスが10,000アクセスだとすると、GETリクエストは200,000になります。これで、月額8.362円、10,000アクセス分の8GBの転送で月額110.74円。

合計で、月額119円*となります。

ちなみにCodeGridの場合、トップページでは414KBのthree.jsのライブラリを読み込んでいます。three.jsを使わない、もしくは外部のCDNを利用するなどすると転送料金はだいたい半額になります。

このようにフロントエンド・エンジニアが判断するようなことで料金に影響があるのが特徴となります。さらに、AWSのアカウントを作ってから1年間は無料利用枠がありますので、上記ぐらいでは無料の範囲に収まってしまいます。正確な料金が知りたい場合は、S3の料金ページで確認してください。

AWS S3でできないこと

S3は簡単に公開でき、レスポンスも速く値段も安い、すばらしいコンテンツ配信環境に思えますが、いくつかできないことがあります。

まず、単純に静的なコンテンツ（HTML、CSS、JS、画像ファイルなど）を配信するものであるため、サーバーサイドのプログラム（php、Rubyなど）は一切使えません。普通のWebサイトであれば問題ないと思いがちですが、アクセス解析を行いたいといった場合に、サーバーサイドでログを取ることができなくなるので注意してください*。もちろんGoogla Analyticsのようなクライアントサイドでの解析は可能ですが、JavaScriptをオフにしているなどといった環境の場合には解析できません。

また、ちょっとしたことですが、Basic認証をかけるといったこともできません。公開前のクライアントの確認など、いまでも簡単な認証として使われることがあると思いますが、これができないのも不便だと感じるかもしれません。

まとめ

サーバーのセキュリティ対策、急なアクセスへの備えといった面でS3でのサイトの公開は非常に強力です。また、フロントエンド・エンジニアの設計によって料金が変わるため、きれいに作ればコスト面で有利になります。

次回はより実践的に、Webブラウザからアップロードするのではなく、gulpのタスクとしてアップロードする方法とGitHubとCircle CIを使った方法を解説します。