Posted at

自分のポータルサイトをhttps化した話

自分は、開発系ではほとんど実績がないものの()、趣味活動でいろいろ手を出している都合上、何やったかをかき集めて記載してあるポータルサイトを持っているのですが、これを時々あーだこーだした話です

httpサイトだと、ブラウザで警告が出る世知辛い(?)時代になってしまいましたし、コストもほとんどかからないのなら、やっちまおう。っていうその場のノリ100%のやつです


前提


  • 元々、共有ホスティングサービスでWebページを公開していた

  • 1年ぐらい前に、S3の静的Webサイトホスティング機能で十分じゃね?!って思ってそっちに切り替えた

  • その後ドメインをlightsailのDNSに管理させたら、基本的なことは大体できるし楽じゃねこれってそっちに持ってった

  • この時に、www.自分のドメイン名.com でアクセスできるようにしてあった(CNAMEでS3の静的Webサイトホスティングのドメインと紐づけ)

  • 何かの役に立つ可能性が非常に低い()個人サイトだから、アクセス数はごく少ないのが明らかな状況である


やったこと


  • ACM証明書の取得

  • S3の設定変更

  • CloudFrontを使って配信できるように設定

  • DNSの対向先切り替え


ACM証明書の取得


  • Cloudfrontに設定するACM証明書は、バージニア北部リージョンで取得する必要がある

  • [ドメイン名.com]だけではなく、[www.ドメイン名.com] の証明書を取得する必要がある。DNSの都合上、[ドメイン名.com]をCNAMEで設定できないため。たぶんRoute53なら問題ないんだろうけど…


S3の設定

Cloudfrontを設定する前に、S3にバケットを作成し、コンテンツをアップロードしておく。

今回の場合はすでに静的Webサイトホスティングで公開中のコンテンツがあるのでこれをそのまま流用する。


  • 静的Webサイトホスティング機能はオフにする。バケットの情報をコンソールで表示し、「概要」→「Static Website Hosting」の項目を確認する。

  • 「ブロックパブリックアクセス」→「パブリックアクセスをすべてブロック」をオフにする


CloudFrontの設定


  • 通常通り、WebのDistributionを作成する。

  • Originに、公開したいWebコンテンツを入れたバケットを指定する。

  • Restrict bucket accessはyesにすると、S3に直接Webアクセスできなくできるのでyesにする

  • Origin access IdentityはCreate new Identityにする

  • Grant Read permission on bucketをyesにして、バケットポリシーを自動設定する。

  • 先述した2つの設定をすると、S3にバケットポリシーが自動的に付与され、CloudfrontからS3の内容を参照できるようになる。

  • Cache BehaviorのViewer Protocol PolicyはRedirect HTTP to HTTPSにする。こうするとhttpでリクエストが来てもhttpsにリダイレクトされる。

  • DistributionSettingsのAlternate domain namesについて、公開するサイトのFQDNを設定する

  • SSL証明書については、Custom SSL Certificateを選択し、先にバージニア北部リージョンで取得した証明書を設定する。

  • Default Root Objectについては、index.htmlとか設定するといい具合なのかなと思う

  • 大体こんな感じに設定してCreateボタンを押すとDistributionが作成される


DNS対向先の変更


  • [www.ドメイン名.com]のCNAMEレコードを作成する。CNAMEの送信先FQDNは、CloudfrontのDistributionの詳細画面のGeneralの中にある、Domain Nameを設定する(xxxxxx.cloudfront.netという値があるはず)


https化にかかるコストは?

ほとんどかかってないです。

ACM証明書は無料。

アクセス数が増えると、Cloudfrontの使用料が上がると思いますが、月当たり多くて1000アクセスぐらいだったら殆ど無いに等しい。


結論

Cloudfrontを使うと、すごく簡単にhttps化することができる。

今回はS3に静的コンテンツを置くという最も簡単なやりかたについて書きましたが、

WordPressを使いたいとか、動的なコンテンツを置くサイトを作る場合であれば、CloudfrontのOriginにLightsailとかEC2を設定する感じになると思いますし、何ならAPI Gateway経由でLambdaをキックするとかもできるはずで、ドメイン名を1個に統一していろいろなことをやらせるにも便利なので、気軽に使ってみたらいいと思う。

(ただし、CloudfrontとInstanceの間の通信はLet's encryptとか無料の証明書発行サービスを使うことになるけどね。ELBはそれなりの値段するし。)