32
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Route53とCloudFrontとS3で静的コンテンツをホスティングするメモ

Last updated at Posted at 2016-11-23

事前に

https://aws.amazon.com/jp/
AWSのアカウントを作成しておく

Amazon Simple Storage Service

S3で「バケットを作成」するよ

  • バケット名: ****(Route53でドメイン取るからS3バケットはなんでもいい)
  • リージョン: Tokyo

ちなみに、アメリカのバージニアは、リージョン「us-east-1」で、東京はリージョン「ap-northeast-1」。
以前、東京は「northeast-1」と思い込んでいて、あれ~?つながらないなぁ、となってしまった。
「アジアパシフィック (東京)」なので「ap-」が付く。

静的ウェブサイトホスティングで「ウェブサイトのホスティングを有効」にするよ

  • インデックスドキュメント: index.html(なんでもいい)
  • エラードキュメント: error.html(なんでもいい)

「{バケット名}.s3-website-ap-northeast-1.amazonaws.com」という感じのエンドポイントができるのでメモる
0001.png

Amazon CloudFront

Webを「Create Distribution」するよ

  • Origin Domain Name: (さっきメモったエンドポイント)

とりあえず、作成する
0002.png

作成すると、CloudFrontのOrigin Domain Nameが割り当てられるのでメモる
0003.png

Amazon Route 53

Public Hosted Zoneを「Create Hosted Zone」するよ

  • Domain Name: ****(よく考えよう)
  • Type: Public Hosted Zone

CNAMEレコードを「Create Recode Set」するよ

  • Type: CNAME
  • Value: (さっきメモったOrigin Domain Name)

0004.png

Amazon CloudFront

CloudFrontの設定を変更するよ

  • Alternate Domain Names: (自分で取ったDomain Name)

おわり

これで時間が経てば、S3に置いた静的コンテンツがRoute53で取ったドメインで参照できるはず。

32
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?