AWS Amazon S3を使ってWEBサイトホスティングしてみたので使い方メモ

2014/02/05 | WEBサービス ,

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 162 follow us in feedly

まえがき

今日は学校の授業が暇だったのでこそこそAmazonS3について調べたり試したりしていたので簡単な使い方をメモ。

PHPやRubyを使った動的なWEBサイト運用はできないけれど、HTML CSS Javascriptなんかで作る静的なページの運用には持ってこいな感じです。

WEBサイト運用に使うだけでなく、ファイルサーバー的な使い方だったり、外部アプリケーションのログを貯めるために使ったりと色々な用途で使えるのも嬉しい。

EC2で運用しているWEBアプリの静的なコンテンツ(画像ファイル)なんかをS3に置いたりするケースなんかもよく見られますね。

S3をはじめる

まず、あたりまえだけれど、AmazonWebService(AWS)のアカウントは取得しておく必要があります。その辺に関しては今回は割愛。

まず、AWSのManagementConsoleから”S3”を選択。初めてBucketを登録するときはBucketの入力を促されると思うので、付けたい名前を入力しましょう。後々ドメインを割り当てることを考えると。サイトのドメイン名にしておくといいでしょう。

ドメイン名でBucketを作らないとドメインを割り当てることができないようなので

amazon-s3-startup-1

bucket policyを編集する

AmazonS3のBucketのデフォルトの設定だと、管理者以外ファイルにアクセスする権限がなく、WEBサイトとしてファイルを閲覧することができない。

なので、すべてのユーザーがサイトを閲覧できるように最初に『bucket policy』を編集しておく。

ここで設定しなくてもアップロードしたファイルのプロパティから権限を追加することですべてのユーザーに公開できるが、1つ1つ設定するとなると面倒なのでここでばちっと終わらせておく。

Bucketを選択している状態で’Properties’タブのなかの『Permissions』を開き、その中にある『Edit bucket policy』を選択する。そこのテキストボックスにポリシーを記述する。

amazon-s3-startup-3

あらかじめAmazonがドキュメントページでサンプルになるポリシーを公開しているので、さらっと読んでおくといいかも

Example Cases for Amazon S3 Bucket Policies

Example Cases for Amazon S3 Bucket Policies

自分の場合はこんな感じで記述した

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "AddPerm",
			"Effect": "Allow",
			"Principal": {
				"AWS": "*"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::@@@@@@@@@@@@@@@/*"
		}
	]
}

『@@@@@@@@@@@@@@@』の部分を自分のbucket名にしてあげれば大丈夫。

S3ではベーシック認証が使えないので、特定のユーザーに対してページを公開したい場合このポリシーを設定してあげて認証を実装するようだ。

WEBサイトホスティングの設定を行う

↑で『Permissions』を選択して、ポリシーを設定したが、その下に『Static Website Hosting』があり、そこでWEBサイトホスティング用の設定をしてあげる。

amazon-s3-startup-4

『Enable website hosting』にチェックを入れて、『Index Document』に『index.html』と記述する。この設定をしておくことで『http://domain.com/』みないなアドレスでindex.htmlのページを表示できるようになる。

ファイルのアップロード

では、実際にファイルをアップロードしてみようと思う。今回はMacのFTPクライアント『Transmit』を使ってファイルをアップロードする。TransmitではAmazonS3用のFTP機能が用意されているのが便利です。

Transmit App
カテゴリ: ユーティリティ
価格: ¥3,400

FTPクライアントを使わなくてもAWSのWEB管理画面からもアップロードはできる。ただ、フォルダをアップロードするためにはJavaアプレットを動かせる環境が必要だったり少々面倒くさい。なのでまだ試せていない。

アクセスキーの取得

TransmitでファイルをアップロードできるようにするにはAWSのアクセスキーとシークレットキーをあらかじめ取得必要がある。

以下のページから取得できるはず。

https://console.aws.amazon.com/iam/home?#security_credential

https://console.aws.amazon.com/iam/home?#security_credential

Transmitで接続

TransmitのS3接続に必要なのは以下の項目

amazon-s3-startup-5

  • サーバ:bucketのプロパティの『Static Website Hosting』の項目から取得できる『Endpoint』のURLがあるが、そのURLのbucket名を除いたものを入力。自分の場合は『s3-website-ap-northeast-1.amazonaws.com』これはみんな共通なのかな?
  • アクセスキーID:↑の説明で書いた取得してきたアクセスキーを入力
  • シークレット:アクセスキーと同じように↑の説明で取得したシークレットキーの文字列を入力
  • パス:パスに関しては入力しなくて良い。

これで接続ができるようになるはず。ファイルのアップロードはTransmitだとドラッグドロップで簡単にアップデートできるようになる。

TransmitのContent-Typeを設定する

これでファイルをアップロードして、WEBサイトを見に行くと、見事にHTMLにCSSが効いていなくてむちゃくちゃになってた・・

どうやらアップロード時にContent-Typeを設定する必要があるようだ。TransmitではカスタムS3アップロードヘッダというのを設定できる機能があって、これに.cssの拡張子のファイルをアップロードするときに、Content-Typeを追加してもらうよう設定する。

設定画面は、Transmitの環境設定を開き『クラウド』のタブを開いてイカの画像のようにアップロードヘッダを追加する

amazon-s3-startup-6

amazon-s3-startup-7

  • Content-Type: text/css
  • x-amz-storage-class: REDUCED_REDUNDANCY

『x-amz-storage-class: REDUCED_REDUNDANCY』に関してはデフォルトにも設定している。

これを設定しておくことで、少しS3の可用性は下がるけれど、33%安く利用することができるようです。気に入らない人は設定しなくても問題ありません。ここのサイトでわかりやすく書かれていました。

Amazon S3を33%安く使う方法

Amazon S3を33%安く使う方法

さて、これで面倒な設定が全部出来たのでがんがんアップロードしましょう!!

アップロードしたサイトをみてみる

bucketのURLはAmazonS3のWEB管理画面の『Propertiesタブ』の『Static Website Hosting』内の『Endpoint』のアドレスになるので、クリックして見てみましょう。

あとがき

AmazonS3、思っていたより設定しておく項目などが多くて大変でした。

ただ、単純にWEBサイトを公開するという用途では今回のメモの内容で補えると思います。

独自ドメインの割り当て・ログ管理・スクリプトからのアップロードなど今後試してみたいと思います。

S3はAWSのサービスの中でも、かなり安価で個人でも色々弄り倒せそうなのでいいですよ。EC2とかRDSとかちょっとの手違いで請求狂いそうで怖いです。。(;´∀`

おすすめ書籍

Amazon Web ServicesではじめるWebサーバ (I・O BOOKS)
大澤 文孝
工学社
売り上げランキング: 108,518

2014/02/05 | WEBサービス ,

関連記事

【AWS】AmazonSNSをRubyスクリプトから叩いてプッシュ通知をしてみる

まえがき 最近iPhoneアプリのプッシュ通知を色々と試しているので...

記事を読む

octopress-on-amazons3-1octopress-on-amazons3-1.png

OctopressブログをAmazonS3にデプロイしてみるの巻【s3cmd】

まえがき AmazonS3×s3cmd×Octopressで静的ブログ...

記事を読む

aws-ses-1aws-ses-1.png

【AWS】AmazonSESでメール送信をやってみた時のメモ

まえがき 先日SendGridを使ってメールの送信を試してみたけど、今...

記事を読む

aws-ruby-4aws-ruby-1.png

AWSのEC2インスタンスをRubyで操作するスクリプト

まえがき 夏休み最後の週末を迎えることになりました、私です。 休み...

記事を読む

Phing×JenkinsでビルドされたレポートをAmazonS3に自動アップロードする

まえがき JenkinsのPublish HTMLプラグインなんかを使...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑