実践
第1回 Amazon S3の利用方法と料金

さまざまな場面で利用されるAmazon Web Services。このサービスの中から、フロントエンド・エンジニアにとっても扱いやすいAmazon S3を利用して静的なWebサイトを公開する方法を紹介します。まずはそのサービス概要と料金形態について詳しく見てみましょう。

2016年03月10日発行

目次

はじめに

最近は、さまざまな場面で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には無料利用枠があるので*、制限枠内なら無料で試すことができます。

*注:AWS 無料利用枠

S3のAWS 無料利用枠では、5GBの標準ストレージ、20,000件のGETリクエスト、2,000件のPUTリクエストが1年間無料で利用できます。詳しくは無料利用枠の使用を参照してください。なお、アカウントには無料制限を超えて課金が開始されると通知される請求アラーム無料利用枠の使用量の追跡など、さまざまな設定が行えるので安心して利用できます。

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

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

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

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

バケットの作成
バケット名を入力し、リージョンで「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のソフトウェアで例を挙げるとTransmitForkliftなど、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までの料金)
【2016年11月28日追記】Amazon S3の料金改定

AWSは、2016年12月1日からAmazon S3とAmazon Glacierのストレージ料金値下げ行うことを発表しました。これにより、記事執筆時の上記の表の「ストレージ料金」は、次のように変更になります(為替レートは記事中と同様に1米ドル=113円として円に換算しています)。なお、料金体系も、これまでの6段階から3段階(0-50TB、50TB-500TB、500TB以上)に変わりました。そのため、ストレージ料金は「最初の1TB/月」ではなく、「0〜50TB/月)」になっています。

ストレージ料金1GBあたり、2.825円(0〜50TB/月)

なお、このあと記事ではCodeGridのサイトを例にトップページのストレージ料金例を計算していますが、料金改定後でも「ほぼ0円」ですので、そちらの金額の記事修正は行っていません。

たとえば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をオフにしているなどといった環境の場合には解析できません。

*注:S3のサーバーアクセスのロギング機能

S3の機能としては、サーバーアクセスのロギング機能は提供されています(デフォルトでは無効になっています)。内容は、リクエスタ、バケット名、リクエスト時刻、リクエストアクション、応答ステータス、およびエラーコード(存在する場合)です。なお、ログ作成機能はベストエフォートなので、確実にログが記録される保証はないとされています。

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

まとめ

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

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

中村 享介
中村 享介
フロントエンド・エンジニア

デザイン事務所のWebデザイナー、Web制作会社のWebディレクターを経て、フリーランスのFlash・JavaScriptエンジニアとして独立後、株式会社ピクセルグリッドを設立。 多数のリニューアル、新規立ち上げを取り仕切った経験をもち、情報設計、デザイン、フロントエンド、サーバーサイド、ネットワークといったひと通りのWebサイト制作技術に精通する。Web制作の他にも経営、講演、執筆など幅広く活動している。

著書に『WebクリエイティブのためのDOM Scripting』(単著:毎日コミュニケーションズ、2007年4月20日)、『jQuery逆引きマニュアル』(共著:インプレス、2010年12月17日)などがある。