Amazon S3で子供たちが作ったWEBサイトやアプリを公開するスペースを準備しました!

コーダー道場西宮では最近Scratch以外にもHTMLコードを書く道場も始めました。将来は簡単なWEBアプリなんかも作れたらなぁと思っています。子供たちが頑張って作ったWEBサイトやアプリを公開する場所としてAmazon S3でホスティングしたので、その手順を書きます。

概要

Amazon S3ではBucketという、データを保存するバケツを作成して、そのバケツ単位でデータを管理できます。
独自ドメインを割り当てたい場合はBucket単位にドメインを割り当てれるみたいです。

mydomain.com = xxxxxバケット

生徒1人1人にサブドメインを割り当てるのも大変なので、今回は「site.corderdojo-nishinomiya.info」のサブドメインを1つ設定し、その中にユーザー毎にディレクトリを作成し、自分のディレクトリの中だけコントロールできるようにしました。

Amazon S3でBucketの作成

「site.corderdojo-nishinomiya.info」のドメインを割り当てるようのBucketを作成します。

AWSマネジメントコンソールでS3を選択

AWS_Management_Console

Create Bucket でバケット「site.corderdojo-nishinomiya.info」を作成

バケット名には次のような制約があります。

  • アルファベットの小文字、数字、ピリオド (.)、アンダースコア (_)、ハイフン (-)を使用可能です。
  • 数字か文字ではじまらなければいけません。
  • 3から255文字でなければなりません。
  • IPアドレスのようなフォーマットはいけません。(例、192.168.5.4)

S3でウェブサイトを運用する場合、バケット名がホスト名の一部として使用されますので、ドメイン名のルールに従うように、以下のガイドラインに沿って、バケット名をつけることを推奨します。

  • アンダースコア (_) を含まないようにする。
  • 3から63文字にする。
  • 終わりをハイフン(-)にしない。
  • ピリオドを2つ続けて使用しない。
  • ピリオドとハイフンをつなげない。 (だめな例 my-.bucket.comやmy.-bucket)

http://aws.typepad.com/aws_japan/2012/08/hosting-website-on-s3.html

S3_Management_ConsoleS3_Management_Console 2

パーミッションの設定

site.coderdojo-nishinomiya.infoにアップロードされたファイルは全て公開ファイルになるようにパーミッションの設定をします。
この設定をしないとアップロードしたファイルは非公開ファイルとなり外部から見れません。

S3_Management_Console 4

 

S3_Management_Console 5

するとWEBページが開きますので、「Granting Permission to an Anonymous User」のコードをコピーします。

Example_Cases_for_Amazon_S3_Bucket_Policies_-_Amazon_Simple_Storage_Service

 

Bucket Policy Editorにペースト

S3_Management_Console 6

Static Website Hosting を有効化

Static Website Hostingを有効化にすることにより、S3をホスティング化することが出来ます。

S3_Management_Console 7

 

これでホスティングは完了です。

AWSマネジメントコンソールからファイルのアップロード

上記の設定で、AWSマネジメントコンソールからHTMLファイルをアップロードすればWEBサイトが表示されます。

S3_Management_Console 8

 

S3_Management_Console 9

 

Static Website Hosting のEndpointに記載されているURLがAWSが割り当てたWebsiteのURLになります。クリックするとサイトが表示されます。

S3_Management_Console 10

 

今回はここまで。次回はこの長いURLに独自ドメインの割り当てる方法を書きます。ドメインは「お名前.com」で取得したドメインを利用します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です