【オンラインRPG】転生したらビヨンドのインターンだった件

【オンラインRPG】転生したらビヨンドのインターンだった件

【導入実績300社以上】AWS 構築・運用保守サービス

【導入実績300社以上】AWS 構築・運用保守サービス

【CMS】WordPress専用 クラウド / サーバー『WebSpeed』

【CMS】WordPress専用 クラウド / サーバー『WebSpeed』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【CPU】AMD EPYC CPU サーバー 技術検証(PoC)サービス

【CPU】AMD EPYC CPU サーバー 技術検証(PoC)サービス

【Webシステム / サービス開発】SEKARAKU Lab(セカラクラボ)

【Webシステム / サービス開発】SEKARAKU Lab(セカラクラボ)

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

AWS S3で静的サイトの配信をやってみた

インフラエンジニアの寺岡です。

AWSにはS3と言われるストレージサービスがありますが
単にストレージとして利用するだけでなく
静的なコンテンツに限ってWebサイトとしてホスティングすることができます。

今回は、S3のWebホスティング機能を使って
EC2を使わずに静的サイトの配信をやってみたいと思います。
一見難しいように思えますが比較的簡単に設定できるので、是非是非やってみてください!

■実際にやってみる

S3にファイルを配置するときはバケットと呼ばれる入れ物が必要です。
google先生に翻訳してもらうと日本語で「バケツ」という意味だそうです。
まずはS3に静的コンテンツを放り込むためのバケットを新しく作ります。

AWSマネジメントコンソールからS3を選択、画面左上にあるバケットの作成をクリックします。
img1

新しく作成するバケットの名前を入力してリージョンを選択します。
その後に作成をクリックします。
2016-08-22_11h53_55

バケット一覧を見ると作成したバケットが追加されているはずです!
2016-08-22_12h02_18

次に、作成したバケットを静的サイトのホストとして使用するための設定を追加していきます。

バケット名の左にある虫眼鏡のアイコンをクリックすると画面の右側にプロパティは表示されるので
静的ウェブサイトホスティングからウェブサイトのホスティングを有効にするを選択します!

この画面でS3のエンドポイントが表示されますが、最終的にブラウザからここにアクセスをするのでメモしておくのがいいと思います。

2016-08-22_12h04_44

入力項目が二つ表示されたと思いますので、項目について詳細を説明しますと・・・

入力項目 詳細
インデックスドキュメント サイトを訪れたユーザーに最初にアクセスさせたいページを入力します。トップページを指定するのがいいと思います。
エラードキュメント 404エラーなどが発生したときに表示させるページを指定します。

入力が終わったら保存をクリックしましょう!

これで設定が保存されたのですが、まだサイトへのアクセスができません。
S3に配置したコンテンツをインターネットに公開するには
全てのユーザーに対してS3の「GetObjects操作」を許可するようにしなければなりません。

要するに現段階でサイトを閲覧する権限がないんですね、、、、
「GetObjects操作」を許可するには、S3のバケットポリシーというものを変更する必要があります。

バケットのプロパティからアクセス許可を選択し、バケットポリシーの追加をクリックします。
2016-08-22_12h13_58

バケットポリシーエディターが表示されるので
2016-08-22_12h20_19

以下を入力します。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadForGetBucketObjects",
			"Effect": "Allow",
			"Principal": "*",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::(バケット名)/*"
			]
		}
	]
}

設定項目をまとめると・・・

設定項目 詳細
"Principal" リソースへのアクセスを許可または拒否する対象を入力します。今回は*となっているので、全てのユーザということになります。
"Action" 許可を与える操作を指定します。GetObject操作を許可したいのでs3:GetObjectと入力しています。
"Resource" 許可を与えるバケットを指定します。

バケットポリシーの入力が終わったら保存をクリックしましょう!
ここまででS3の設定は終わりです!
最後にコンテンツをアップロードして表示を確認しましょう!
一覧から作成したバケット名をクリックします。

2016-08-22_12h24_06

画面左上のアップロードをクリックして、hrmlファイル等をアップロードします。
ファイルとフォルダの選択画面が出るので
ファイルを追加するからコンテンツを追加しましょう。
アップロードの開始をクリックすると実際にS3にコンテンツがアップロードされます。
2016-08-22_12h51_43

アップロードされましたね!
2016-08-22_12h28_33

控えていたS3のエンドポイントにアクセスしてみてください。
サイトが表示されるはずです!

2016-08-22_12h30_41

いかがでしたでしょうか。
サーバーを構築しなくてもたったこれだけでサイトの配信が出来るなんて便利ですね!
次は、Cloudfrontと連携して配信を行う方法を書きたいと思います。
以上になります、ありがとうございました。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
919
facebook twitter はてなブックマーク
【オンラインRPG】転生したらビヨンドのインターンだった件【プレイ無料】

【オンラインRPG】転生したらビヨンドのインターンだった件【プレイ無料】

この記事をかいた人

About the author

寺岡佑樹

2016年ビヨンド入社、現在6年目のインフラエンジニア
MSPの中の人として障害対応時のトラブルシューティングを行いながら
AWSなどのパブリッククラウドを用いたインフラの設計/構築も行っている。
最近はDockerやKubernetesなどのコンテナ基盤の構築や
運用自動化の一環としてTerraformやPackerなどのHashicorpツールを扱うことが多く
外部の勉強会やセミナーで登壇するEvangelistの役割も担っている。

・GitHub
https://github.com/nezumisannn

・登壇経歴
https://github.com/nezumisannn/my-profile

・発表資料(SpeakerDeck)
https://speakerdeck.com/nezumisannn

・所有資格
AWS Certified Solutions Architect - Associate
Google Cloud Professional Cloud Architect