SONICMOOV Googleページ

【AWS入門】S3でWebページをちょっとの設定で公開してみる

【AWS入門】S3でWebページをちょっとの設定で公開してみる

  • このエントリーをはてなブックマークに追加

S3は素敵

AWS S3はシンプルストレージサービスの略です。じゃんじゃんファイルを置いとけます。
低コストだし、定番すぎて忘れがちだけど超絶クールですよね。
しかもちょっとの設定で、そのままwebページとして公開できるとのこと。
早速やってみましょう!(AWSアカウントがなければこの辺参考に取得してね)

目標

S3を使って、webページを公開する。

用語(適当)

  • オブジェクト: ファイルのこと
  • バケット: ファイルの入れ物のこと(≒バケツ)

手順

1. バケットの作成

AWSコンソールで S3 を開いて、公開したいバケットを作成しましょう。

バケットの作成

バケット名の入力とリージョンを選択します。
バケット名とリージョンの選択

はいできました。

2. バケットのウェブサイト設定

1. 作成したバケットの「プロパティ」を選択

プロパティの選択

2. 「静的ウェブサイトホスティング」のメニューを開く

静的ウェブサイトホスティング

3. 「ウェブサイトのホスティングを有効にする」を選んで、ファイル名を2ヶ所指定

ウェブサイトのホスティングを有効にする

  • インデックスドキュメント
    ユーザがファイル名なしにアクセスした時に表示するファイルを指定します。
    例えば、http://example.com/ のようなアクセスの際に使用されます。
    参考: インデックスドキュメントのサポート

上の部分に「エンドポイント」という項目がありますが、これがこのバケットにアクセスする際のURLになります。

バケット名.s3-website-ap-northeast-1.amazonaws.com(東京リージョンの場合)

4. 先ほど指定したファイルをアップロード

指定したファイルをアップロード

ちなみにそれぞれのソースの中身はこんな感じです。

index.html

13

4xx.html

14

3. ページにアクセスして確認!!

08

ダメですね。

これはオブジェクトが「パブリックに読み取り可能」でないことが原因です。
参考: ウェブサイトアクセスに必要なアクセス許可

4. バケットのアクセス許可設定

1.「アクセス許可」のメニューを選んで、「バケットポリシーを追加」を選択

バケットのアクセス許可設定

「バケットポリシー」とは、S3のバケット、オブジェクトへのアクセス権限を設定するものになります。
ひとまず先に進みましょう。

2. バケットポリシーを貼り付けて保存

オフィシャルにサンプルがありましたので、そいつを使ってみましょう。

バケットポリシーを貼り付けて保存

「PublicReadFor…」の文字がありますね。
「バケット内のオブジェクトをパブリックに読み取り可能にする」設定になります。
この他にも様々な設定が可能です。
参考: バケットポリシーの例

あとは、忘れずに今回試すバケット名に書き換えておきましょう。

5. 再度ページにアクセスして確認!!

再度ページにアクセスして確認

いけましたね!
ファイル名を指定していないので、インデックスドキュメントで設定した index.html が表示されています。

あとは存在しないURLにアクセスした際に 4xx.html が表示されるかも確認してみましょう。
エラーの確認

大丈夫そうですね!

おまけ

アクセスログも残せるよ(ベストエフォートだけど)

バケットへのアクセスをログに残すこともできます(デフォルトでは無効)。ベストエフォートだけど。
ロギング設定自体では追加料金は発生せず、
ログファイルのストレージ料金だけが別途かかる形のようです。

設定自体は簡単です。

1. アクセスログを保存するバケットを作成
2. ロギング対象のバケットに設定を追加(1.で作成したバケットを指定)
3. 設定が反映されるまでしばし待つ

参考: サーバーアクセスのロギング

独自ドメインも使えるよ

使えます。

参考: 独自ドメインを使用して静的ウェブサイトをセットアップする

バケットにリダイレクトの設定ができるよ

特定のオブジェクトに対するリクエストを、
同じバケットの別のオブジェクトや、外部URLにリダイレクトするよう設定することができます。

参考: ウェブページリダイレクトの設定

地味に注意!S3のバケット内は階層構造にないよ

参考: インデックスドキュメントとフォルダ

という訳で以下の点に注意です。

http://example.com/fuga

というアクセスがあった時、
S3はまず、バケット内のfugaオブジェクト(fugaファイル)を探します。
fugaオブジェクトがなければ、

http://example.com/fuga/

このように末尾にスラッシュをつけてリダイレクトして(302 Found)、
インデックスドキュメントを探します。

まとめ

S3は素敵。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

ikechan(システムエンジニア)

受託開発案件をメインにエンジニアをやってます!

関連するSONICMOOVのサービス

システムエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
システムエンジニア募集中!

新着の記事

mautic is open source marketing automation