SSL証明書が無料!AWS S3でWEBサイトを構築する

2016年1月よりAWSで無料のSSL証明書が発行できるようになりました。 発表された当時、「おお!すげー時代になったものだな」と思った記憶があります。

サイト立ち上げ時のインフラ周り含め、備忘録として残しておきます。

当サイトのインフラ周り

なんで上記インフラ?

個人サイトなので、simpleな構成にしたかったためです。

wordpressでやるとするとDB必須、php必須。 何より構築時よりも、運用時のアップデート・セキュリティー周りの面倒を見ていくのが結構ストレスです。

AWS S3 + AWS Route53 + AWS CloudFront + Hugoなら

  • インフラ周りの変更が、単純なHTMLなので楽
  • セキュリティー周りはほぼ気にしなくてOK
  • wordpressとかのバージョンアップ気にしなくて良い
  • CloudFront + S3 + Route53を使えば、SSLサーバー証明書が無料、HTTPSかつ高速な環境が用意できる
  • コストも相当大きなトラフィックがなければ安い
  • 大きなトラフィックが来ても、AWSが自動でスケールしてくれるので落ちない
  • Markdownでメモを書いて、S3へsyncするだけのお手軽構成
  • バックアップもS3の機能でやろうと思えば、バックアップ+バージョン管理までできてしまう

とメリットが大きいです。 というか、何人も編集するサイトだったり、アプリケーションレイヤーが必要ないサイトなら、鉄板の構成で、「もう当面これで良いのでは?」と思います。

手順

  1. AWS S3で静的WEBサイトを公開
  2. AWS Certificate ManagerでSSL証明書発行
  3. AWS CloudFrontで配信設定
  4. AWS Route 53でドメイン絡みの設定

1. AWS S3で静的WEBサイトを公開

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html

公式でも細かい手順書が提示されていますので、上記手順に従いやればOKです。

アクセス許可

AWS S3 設定1

  • S3バケットに入り、[プロパティ]をクリック
  • [アクセス許可]で、[バケットポリシーの編集]

AWS S3 設定2

  • [バケットポリシーエディター]で以下を入力
{
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"AddPerm",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::example.com/*"
      ]
    }
  ]
}

ホスティングを有効にする

AWS S3 設定3

  • [静的ウェブサイトホスティング] で[ウェブサイトのホスティングを有効にする]にチェックを入れる
  • [インデックスドキュメント]に「index.html」を指定

ログ取得設定

AWS S3 設定4

  • [ログ記録]でアクセスログを取れるように「有効」に変更

動作確認

あとは適当に作成したindex.htmlを、バケット直下にアップロードしてブラウザでアクセスすれば、WEBページが確認出来ます。

注意点

  • 独自ドメインで運用する場合は、バケットの名前は独自ドメインと同じにすること。

2. AWS CertificateManagerでSSL証明書発行

普通にSSL証明書が発行できます。

ポイントはRoute53で発行されているドメインであること

SSL発行済


3. AWS CloudFrontでCDNを設定する

CloudFront設定1

  • Delivery Methodを「Web」
  • SSL Certificateで上記CertificateManagerで作成したSSL証明書を選択
  • DomainNameは自動で振ってくれる
  • Custom SSL Client Supportでは無料で利用できる、Only Clients that Support Server Name Indication(SNI)を選択
  • Default Root Objectへindex.htmlを指定

CloudFront設定2

AWS S3のエンドポイント指定

  • [重要] Origin Domain Name で AWS S3のエンドポイントを指定(デフォルトだとサブディレクトリのindex.htmlを見てくれないので注意)

CloudFront設定3

  • Viewer Protocol PolicyでRedirect HTTP to HTTPSを指定

上記でCloudFrontの設定は完了です。


4.AWS Route 53でドメイン絡みの設定

AWS Route 53 設定1

  • DNS managementからHosted zonesをクリック

AWS Route 53 設定2

  • Create Record Setから新規でAレコードを作成する
  • AliasでYesを選択
  • Alias Targetで CloudFrontのURLを指定(適切に設定されていれば選択肢に出てくる)

上記で設定完了。

結果

SSL証明書有効だよー

高速・軽量・安い・落ちない・SSL証明書無料でHTTPS対応のサイトが出来上がり。

デザイン周りと、アナライズ周り、アド周りいじらないとな〜。

Share