無償SSLのCertificate Manager、S3、Cloud Frontで、独自ドメインの静的HTTPSサイトを作る

  • 39
    いいね
  • 0
    コメント

独自ドメインに対して、Amazonが無償で提供するSSL証明書を使って、S3でホスティングする静的HTTPSのサイトを作るまでを、 www.flyingwhale.net を例に説明します。
www.flyingwhale.net をご自身のドメインに書き換えてください。

1. S3バケットを作成し、HTMLをアップロードする

S3の画面を開き、「バケットを作成」を行います。バケット名は適当です。

Screen Shot 2016-05-21 at 12.41.58.png

アップロードはWeb画面からでもできますが、AWS CLIをインストールして、rsyncで行ったほうが、楽ですし、自動化もし易いです。

aws s3 sync --region ap-northeast-1 ./site/ s3://www.flyingwhale.net

2. 寄り道 Certificate Managerでドメインを認証するためのメールアドレスを用意する

Certificate Managerでドメインを認証するには、以下のいずれかのメールアドレスで認証URLを受信する必要があります。

以上のメールアドレスが受信可能であれば問題ありませんが、AWSの別のサービスを使うことで、受信することもできます。これらも従量課金であるため、一時利用であればほとんど料金はかかりません。

SNS を開き、「Create Topic」を行います。適当な名称をつけます。

Screen Shot 2016-05-21 at 12.57.52.png

「Create Subscription」を行います。ProtocolにEmailを選び、EndPointに転送先のメールアドレスを指定します。

Screen Shot 2016-05-21 at 13.00.02.png

「Create Subscription」を押下後、アドレス確認メールが送られるので、そのメールのURLをクリックします。SubsctiptionIDの部分がPendingでなくなれば成功です。

Screen Shot 2016-05-21 at 13.03.51.png

SES を開き、「Domain」メニューから、「Verify a New Domain」を行います。画面のように入力します。

Screen Shot 2016-05-21 at 13.07.06.png

その後に表示される各DNSレコードを、ドメインに設定します。一部表示できていない部分もありますが、「Download Record Set as CSV」からCSVにて確認することができます。

Screen Shot 2016-05-21 at 13.07.43.png

お名前.comで取得したドメインにて、設定を入力したスクリーンショットはこちら。

Screen Shot 2016-05-21 at 13.16.17.png

しばらく待つと、Statusがverifiedに変わります。

Screen Shot 2016-05-21 at 13.28.17.png

SES のメニューから「Email Receiving」の「Rule Sets」を開きます。default-rule-setが既に有効になっているため、「View active rule set」から「Create Rule」を行います。受信するメールアドレスを入れます。

Screen Shot 2016-05-21 at 13.22.16.png

Actionsでは、SNSを選択し、先ほど作成した設定を入れます。UTF-8を設定したほうが無難です。

Screen Shot 2016-05-21 at 13.22.58.png

あとは適当にルール名を入力します。これで、admin@flyingwhale.netに送付されたメールが、転送されます。なお、特に編集していないため、JSON形式で送られて来ます。

Screen Shot 2016-05-21 at 13.23.58.png

3. Certificate Managerでドメインを認証する

Certificate Managerを開き、「証明書のリクエスト」を行います。

Screen Shot 2016-05-21 at 14.17.51.png

転送されてきたメールの、URLにアクセスし、「I aprove」を実行します。

Screen Shot 2016-05-21 at 14.20.07.png

状況が「発行済み」に変わったらCertificate Managerですることは以上です。

Screen Shot 2016-05-21 at 13.37.08.png

4. Clound Front でS3の内容を公開する

Cloud Frontを開き、「Create Distribution」を行います。Webの「GetStart」を行います。ここで、Origin Domain NameにS3のバケットを指定します。またこの時に画像のように設定し、同時にCloud FrontからS3バケットへのアクセス権を設定すると楽です。

Screen Shot 2016-05-21 at 13.40.25.png

折角なので、Redirect HTTP to HTTPSを設定します。

Screen Shot 2016-05-21 at 13.40.44.png

Alternate Domain Namesに公開ドメインを入力します。また、Custom SSL Certificateを選び、Certificate Managerで設定したドメインを選びます。

Screen Shot 2016-05-21 at 13.44.15.png

Default Root Object にindex.htmlを設定します。これで作成を行います。

Screen Shot 2016-05-21 at 13.44.37.png

メニューのDistributionを開き、Domain Nameを確認します。このDomain NameをドメインDNSにCNAMEで設定します。これにより、ドメインはCloudFrontを参照するようになります。

Screen Shot 2016-05-21 at 13.47.23.png

お名前.comで指定したスクリーンショットはこちら。

Screen Shot 2016-05-21 at 13.47.33.png

その後、Cloud FrontのStatusがDeployedになるのを待ちます。そして、URLにアクセスすると、HTTPSでコンテンツにアクセスできるようになります。

Screen Shot 2016-05-21 at 14.16.25.png

https://www.flyingwhale.net/

Screen Shot 2016-05-21 at 14.43.48.png