お名前.comでドメインを取得してAWSのELBを使ってSSL化(https)の対応をする方法

構築時のポイント

• 構成：ブラウザ -> Route53(DNS) -> ELB(ALB) -> EC2(Apache) -> RDS(MySQL)
• ドメインはお名前.comで取得する。
• SSL対応は、ELB(ALB)を挟んでAWS内で署名できるようにする。
  • https通信の範囲：ブラウザ <- https通信 -> ELB <- http通信 -> EC2
    • ELB EC2間はhttp接続だが、AWS環境内にはいっているので安全とみてOK。
• SSL証明書の発行はACMを使う。
• 冗長構成(Auto Scaling)の対応、CloudFront、S3を使った静的コンテンツのキャッシュ対応などは、アクセスが増えてきたら検討。
  • 負荷分散でEC2サーバを2台にしロードバランシングするならWordPress内の画像などは自EC2インスタンスに保存などすると、他のインスタンスにアクセスした時に表示されないなどの問題が起きるので、S3管理が必要となってくる。

構築の流れとしては、

1. お名前.comでドメイン取得
2. ホストゾーンを作成し、ネームサーバをRoute53に向ける
3. ACMでSSL証明書の発行
4. ロードバランサー(ALB)を作成しSSL証明書を反映する
5. ドメインの接続先をALBに変更と、HTTP→HTTPSへリダイレクト設定

となる。

お名前.comでドメインを取得

お名前.comはこちら

1. お名前.comで取得したいドメインを検索しお申し込みへ進む。
2. ドメインを取得すると、個人情報を登録する必要があり、Whois検索などで第三者によるドメイン管理者の個人情報の閲覧ができる状態になる。それを防ぐプライバシー保護としてWhois情報公開代行メール転送オプションをつけると、管理者の個人情報からお名前.com

   

3. 支払いクレジットカード情報を入力して申し込み。数分で登録が完了する。
4. 申し込み受付が完了したら、お名前.com画面上部に「重要！ドメイン認証について」の通知に従い、メールアドレスの有効性確認をする。
   1. 
5. 「【重要】[お名前.com]ドメイン情報認証のお願い」のタイトルでメールが届いているので、urlをクリックしてメールアドレスの有効性確認をする。

   

お名前.comはこちら

ホストゾーンを作成し、ネームサーバをRoute53に向ける

1. Route53でホストゾーンの作成をする。ドメインは先程取得したドメインを入力する。説明は任意のものを入力。タイプはインターネットのラフィックルーティングなのでパブリックホストゾーンを選択。
   1. 
   2. ホストゾーンが正常に追加されたことを確認する。
      1. 
2. NSレコードにある4つのDNSを、お名前.comのネームサーバーに入力する。これでドメインアクセス(お名前.com)→DNS(AWSネームサーバー)へ接続の流れができる。反映は24~72時間後とあるので気長に待つ。
   1. 
   2. 
3. ElasticIPの割り当てを行う。ネットワークボーダーグループはap-northeast-1を選択し、パブリックIPv4アドレスプールは、AmazonのIPv4アドレスプールを選択して割り当て。
   1. 
   2. Elastic IPアドレスが正常に割り当てられたことを確認する。
      1. 
4. 発行したElasticIPをインスタンスに関連付ける。リソースタイプはインスタンスを選択、インスタンスは作成したインスタンスのidとプライベートIPアドレスを入力する。
   1. 
   2. 
   3. Elastic IPアドレスが正常に関連付けられたことを確認する。
      1. 
5. Route53でレコードを追加する。DNS(AWSネームサーバ)の接続先として、EC2インスタンスに接続するように設定する。レコード名は取得したドメインなので空(サブドメインは設定しない)、レコードタイプは、Aタイプ(IPv4)で、値にElasticIPを入力する。その他は任意で変更できるが今回はデフォルト値。
   1. 
   2. Aタイプのレコードが正常に作成されたことを確認する。
      1. 
6. ドメインにアクセスし、EC2WordPressの表示確認をする。現状だと画面が崩れた状態で表示される(cssが反映されない)。デバックモードで確認してみるとドメインのアクセスとしてはステータス200が返却されているが、cssの取得先で以前のパブリックIP(54.238.154.232)にいっている。
   1. 
   2. 
   3. 原因としては、DBテーブルのwp_options siteurl, homeカラムの値が昔のIPになっているため。
      1. 
   4. これを現在のドメインに変更してあげる。
      1. 
   5. サイトを更新するとちゃんと設定したドメインにcssの取得が行われ、画面崩れがなく表示される。
      1. 
      2. 

ACMでSSL証明書の発行

1. SSL証明書を発行する。ACMで証明書のリクエストを行う。※CloudFrontにSSL証明書を付与する場合は、「バージニア北部」で登録する必要がある。ALBの場合は、「東京」でもOK。
   1. 
   2. ドメインを入力して、検証方法は推奨されているDNS検証で行う。
      1. 
   3. 証明書が正常にリクエストされたことを確認する。DNS検証前なので、ステータスは保留中の検証となる。
      1. 
   4. Route53でレコードを作成。csvをエクスポートして手動でRoute53にレコード追加することもできるが、「Route53でレコードを作成」ボタンを押すと自動でレコード追加ができるので、こちらの機能を使う。
      1. 
      2. SSL証明書を作成するドメインをチェックして、レコードを作成
         1. 
      3. DNSレコードが正常に作成されたことを確認する。
         1. 
      4. Route53でホストゾーンの確認をすると、CNAMEのレコードが生成されていることが確認できる。
         1. 
   5. ACMでDNSレコードのステータスが成功になるのを待つ。今回だと10分程度でステータスが更新された。
      1. 

ロードバランサー(ALB)を作成しSSL証明書を反映する

1. ロードバランサーを作成する。今回はpublicインターネットからのWebサーバへの接続なのでALBを選択する。
   1. 
   2. 任意の名前をつけ、スキームはインターネットGWからのアクセスなのでインターネット向け、IPアドレスタイプはipv4とする。
      1. 
   3. リスナーはHTTPSの接続なのでHTTPから変更。
      1. 
   4. アベイラビリティーゾーンはpublic用に作成した2つのa,cゾーンのサブネットを選択する。
      1. 
2. セキュリティ設定の構成はACMから証明書を選択するを選択し、先程作ったACMを選択する。
   1. 
3. セキュリティーグループは新規作成し、HTTPSを許可するように作成。
   1. 
4. ルーティングの設定は、新しいターゲットグループを作成する。名前は任意のものを入力し、ターゲットの種類はインスタンスとする。SSL署名はALBに対して行い、ALB以降のAWS内部処理ではHTTPアクセスとするので、プロトコルはHTTPにする。その他はデフォルトのまま。
   1. 
5. ターゲットの登録は、インスタンスを選択し登録済みに追加をする。
   1. 
   2. 登録済みターゲットに追加されたことを確認する。
      1. 
6. 確認は、入力内容に誤りがないかを確認し作成。
   1. 
   2. 正常に作成されたことを確認する。
      1. 

ドメインの接続先をALBに変更と、HTTP→HTTPSリダイレクトの設定

1. ドメインの接続先をALBに変更する。Route53でAレコードを編集で、トラフィックルーティング先のエイリアスをONにし、エイリアス先をALBに設定し、先程つくったALBを選択する。
   1. 
2. httpsでドメインにアクセスし接続確認をする。現状だとCSSが崩れた状態になっている。cat-prog.comのレスポンスはstatus200で返却されているが、css周りはhttpアクセスとなってエラーになっている。
   1. 
   2. 上章ではDBテーブルのwp_options siteurl,
      homeカラムを修正することで解決したが、今回はそうはいかない。今回は、ロードバランサーへの接続するのに使っていたプロトコルがhttpsだったら環境変数のHTTPSをONにする処理を入れることで、css周りのアクセスをhttpsとする。WordPress公式のリバースプロキシの使用を参考に、wp-config.phpの上部に処理を追加する。

      if ( ! empty( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https' ) {
        $_SERVER['HTTPS']='on';
      }
      

   3. サイトを更新してアクセスすると画面崩れがなく表示される。
      1. 
3. このままだとHTTPSのみの受付となるので、HTTPアクセスされた場合はHTTPSへのリダイレクトをするようにロードバランサーのリスナーを追加する。
   1. 
   2. プロトコル：ポートは、HTTP:80とし、リダイレクト先は、HTTPS:443、デフォルトホスト、パス、クエリを使用、301を選択しリスナーの追加。
      1. 
   3. HTTP:80リスナーが正常に追加されていることを確認する。
      1. 
4. HTTPでアクセスするとリダイレクトされ、httpsで正常にサイトが表示されればOK。
   1. 
5. 最後に管理画面の設定でWordpressアドレス、サイトアドレスをhttpsに変更する。
   1.