【無料&超簡単】S3と独自ドメインで公開しているサイトをSSL(https)化する

SSL証明書ってお高いんでしょ。僕もそう思っていた時期がありました。。。
S3と独自ドメインでサイトを運営しているとSSL(https)対応したくなってきませんか？
中の人ことタクミはめっちゃやりたいです。
というわけで、S3でWebサイト運用している人なら誰でもできるくらい簡単かつ無料でhttps対応する方法を解説します！

Certificate Managerで証明書を作成する

AWSからSSL証明書を発行するサービス(Certificate Manager)がありますので、
そちらを使って 無料 でSSL証明書を発行します。
Certificate Managerで発行したSSL証明書はCloudFrontまたはElastic Load Balancingのみで使えます。
EC2や他のVPSで運用しているサーバには使えないので注意してください

Certificate Managerを初めて起動した場合は以下のような画面がでます。

右上のリージョンをAsia Pacific(Tokyo)からUS East(N.Virginia)に変更します。
このリージョン変更の手順を忘れると、後ほどする証明書の選択の際にでなくなりますので注意してください。

Get startedボタンを押すと下図のような画面になります。
ここにSSL(https)対応したいドメインを入力します。

ドメイン入力後、Review and requestボタンを押すと確認画面へ遷移します。

Confirm and requestボタンを押すと下記のメールアドレスにメールが送信されます。
- admin@独自ドメイン
- administrator@独自ドメイン
- hostmaster@独自ドメイン
- webmaster@独自ドメイン
- postmaster@独自ドメイン
AWSから送信されたメールには下記のようにリンクがついています。

記載されているリンク先にアクセスして、ドメインの所有確認します。

SSL証明書を発行する場合はI Approveボタンを押してください。
正常に完了すると下図のようになります。

それではCertificate Managerに再びアクセスしてみましょう。

このような画面でStatusがIssuedになっていれば、SSL証明書は発行済です。
もし、下図のようなStatusがPending validationの場合は、ドメインの所有確認がまだ済んでいない状態です。

この画面の場合はAWSから送信されたメールのリンク先にアクセスしていない状態です。
送られてきたメールを確認してリンク先にアクセスしてくださいね。

CloudFrontに証明書を設定し、S3にアクセスできるようにする

それでは、CloudFrontにアクセスして、Create Distributionボタンを押します。

すると、WebとRTMPどちらのDestribution作るか？っと尋ねられるので、Webを選択しましょう。

ここからは少し長い入力画面になります。
まずはOrigin Domain Nameの設定です。
ここでは、Webサイトを公開しているS3を選択します。
テキストボックスにフォーカスを合わせると下図のように一覧がでるので、対象のS3を選択しましょう。

Origin Domain Nameの入力が完了すると、Origin IDは自動で入力されます。
CloudFrontを経由してのみS3にアクセスさせたいので、Restrict Bucket AccessをYesにします。
Origin Access Identityは新しく作るので、Create a New Identityを選択します。
すると、Commentは自動入力されます。他の内容がいい場合は書き換えてくださいね。
Grant Read Permissions on Bucketは、Yes, Update Bucket Policyを選択してください。
この選択をするとDistribution作成の際にS3のバケットポリシーを
自動でCloudFrontからアクセスできるように、更新してくれます。
手動で更新する場合は、No, I Will Update Permissionsを選択します。

次にDefault Cache Behavior Settingsエリアの設定です。
Viewer Protocol PolicyはHTTPS Onlyを選択します。
HTTP and HTTPSの場合はhttpおよびhttpsどちらの接続も許可し、
Redirect HTTP to HTTPSの場合はhttpアクセスした場合、httpsへリダイレクトする設定です。
必要に応じて適宜変えてください。
他の設定はデフォルトのままにします。


Default Cache Behaviorの設定は上図のようになります。

次にDistribution Settingsの設定です。
Price Classはデフォルトの値を設定しています。
この値を変更することによってCloudFrontの料金を抑えることができますので、
必要な場合は変更してください。(ただし、安くするとCloudFrontがキャッシュしてくれる物理的なエリアが狭くなります。)
Alternate Domain Names(CNAMEs)には、先程SSL証明書を取得した独自ドメインを入力します。
他の設定はデフォルトの値でいきます。


入力項目を再度チェックして、Create Distributionボタンを押しましょう。

このような画面になればDistributionが作成されます。

CloudFrontダッシュボードに戻って、確認してみましょう。

Statusの箇所がIn Progressになっていますね。
StatusがDeployedになれば完了なのですが、結構長い時間待たされますので、
コーヒーでも飲んで気長に待ちましょう。(個人的な感覚だとだいたい10分以上かかることが多いような気がします。)

Route53の設定

最後に、独自ドメインをAWS Route53で設定している方は最後に下記の手順を実行します。
Route53にはAliasという便利な機能がありますので、それを使います。

まずは、Create Record Setボタンを押して、右ペインを表示します。
Nameの箇所はサブドメインの設定です。
CloudFrontで設定したCNAMEsにサブドメインが含まれていた場合は、ここに入力します。
AliasのラジオボタンはYesを選択します。
Alias Targetのテキストボックスにフォーカスすると、プルダウンメニューが現れます。
しばらく待つと下図のように、CloudFront distributionsの箇所が選択できるようになります。

これを選択して、Save Record Setを押して保存します。

まとめ

それでは、早速 https://cdojo.jp にアクセスしてみましょう。

httpsｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━!!!!
URLの箇所を見るとしっかりhttpsになっていますね。

S3とCloudFront、そしてCertificate Managerを使うと、
こんなに簡単＆無料でhttps対応のWebサイトを運用できます。
(S3とCloudFrontは課金サービスなので、気をつけてくださいね。sslが無料です)

それでは、S3で運用しているWebサイトをSSL(https)化するためのまとめです！
- Certificate ManagerのN.Virginiaリージョンで証明書を作成
- CloudFrontからS3を読み込めるようにして、CNAMEsと作った証明書をセット！
- Route53のAlias機能を使ってCloudFrontと紐付ける

どうです？めちゃ簡単でしょ？
今回SSL化をするにあたって、 https://cdojo.jp というドメインがよくでたと思いますが、
な、なんと！C言語が大好きすぎてご飯30杯はいける中の人があまりにも好きすぎて作っちゃった新サイトです！！！
全世界の人がC言語ラブになって欲しいと願って作ったので、
C言語のポインターで挫折した人や、ゲーム作りたくてC言語学ぶ人、
はたまたIoTの流れに乗って組み込みしたい人など、
とにかくC言語に興味ある人だったら、テンションが上がること間違い無しなので、ぜひぜひ御覧くださいませ☆
(この記事執筆時点で、コンテンツがたったひとつしか用意してないなんて口が裂けても言えない…((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ)