AWSを使って、無料でサイトを常時SSL化 全手順(EC2+Word Press+ELB+Certificate Manager+Route 53)

世間はハロウィンということで、僕も仮装してみました。

はい。ということで今回は無料でサイトをHTTPS通信で表示できるようになったので、手順をずらっと書きました。

完成したサイトがこちら→https://www.yoshidamasaaki.com

毎度おなじみ、ヨシダのサイトです。

ちゃんとHTTP通信で表示させないように、HTTPS通信にリダイレクトしてます。

ためしにhttp://で入力してみたらわかりますぞ。

まずは常時SSL化のメリットから話します。

ウェブサイトのすべてのページを暗号化することによって、ユーザは安心して個人情報などを提供することができ、第三者による盗聴を心配する必要がなくなります。

また、検索エンジンの最大手であるGoogleは、ウェブサイトがHTTPS(常時SSL)かどうかを検索順位の決定要因にすることを発表しており、安全でないサイトは検索順位が落ちるとかなんとか。

とりあえず、セキュリティリスクとサイトへのアクセスが良くなるんです。

WordPressはウェブサイトから構築できるので、サイトオーナーである自分のIDやパスワードも暗号化して盗聴されないようにしとかないといけません。

これはSSL化するしかないと思ったが、問題はお金ですよ。

無料でできるか探したら、またもやAWSがやってくれてました。

すげーなアマゾン。

それでは、方法を書いていきますが、ドメイン名をAWSのRoute 53で取得している前提で書きます。

取得方法やEC2への接続方法などは、僕の過去の記事を参照してください。

 

①Certificate ManagerでSSL証明書を発行

AWS(https://aws.amazon.com/jp/)のコンソールへログインしたら、右上が東京リージョンであることを確認して、「サービス」から「Certificate Manager」を選択。

「証明書のリクエスト」をクリックしたら、自分のウェブサイトのドメイン名を入力。

同じドメイン内の複数のサイトを保護したいので、アスタリスク (*) を使用して、ワイルドカード証明書をリクエストします。

僕の場合だと、「yoshidamasaaki.com」と「この証明書に別の名前を追加」で「*.yoshidamasaaki.com」を入力。

「確定とリクエスト」をクリックしたら、発行されます。

アマゾンから確認メールがくるので、確認サイトから「I Approve」をクリック。

Success!とでれば、発行成功です。

もちろん無料ですが、有効期限があるのでご注意を。

②ELB(Elastic Load Balancing)で証明書の設置とインスタンスへ接続

次にロードバランサーをつくります。

ロードバランサーとは、外部ネットワークからのリクエストを複数のサーバーに割り振ることで負荷を分散させるための装置のことです。

今回は振り分けを行わず、WordPress用のひとつのサーバーと接続する方法で書いていますが、④で設定し終わった後に、AMIなどで同じ構成のしたサーバーを作成し、振り分けたい人はそのサーバーと接続をしてください。

ただそれをすると、無料枠を突破してお金がかかってくる可能性があるので、ご注意を。

まずは、先ほど同様の「サービス」から、次は「EC2」を選択。

左下に「ロードバランサー」があるのでクリック。

「ロードバランサーの作成」をクリックすると、3種類から選ぶことができます。

今回はHTTP および HTTPS トラフィックを使用するウェブアプリケーション用ということで、Application Load Balancerを「作成」

ステップ1で、まず名前を適当に入力。スキーマは「インターネット向け」を選択し、IPアドレスタイプは「ipv4」を選択。

リスナーでは「HTTP」の80番ポートと「リスナーの追加」「HTTPS」の443番ポートをあけておく。

443番ポートをあけておかないと、サイトを見る人(リスナー)がHTTPS通信で見れなくなります。

アベイラビリティーゾーンでは、2つ以上選択しなくてはいけないが、ロードバランサーと自分のサーバーを接続できるよう同じVPCにしてください。

ここまできたら「セキュリティ設定の構成」をクリック。

ステップ2で、説明書タイプでは「ACMから説明書を選択する」から先ほど①で発行したものを選択。

セキュリティポリシーはそのままでいいでしょう。

「セキュリティグループの設定」をクリック。

ステップ3では、キュリティグループを選択する」から接続するサーバーと同じセキュリティグループのものを選択。

最低限、22番(SSH)と80番(HTTP)と443番(HTTPS)ポートはあけておいてください。

僕の場合は違いますが、WordPressをRDSなど他のサーバーのデータベースと接続している人は3306番などのポートもあけておく必要があります。

次に「ルーティングの設定」へ。

ステップ4では、「新しいターゲットグループ」を作成します。

名前を適当に入力し、プロトコルは1つしか選べないので「HTTP」を選択。HTTPSもルーティングするよう後で設定はできます。

ターゲットに「instance」を選択し、ヘルスチェックはそのままでいいでしょう。

「ターゲットの登録」へ。

ステップ5では、ロードバランサーと接続するサーバー(インスタンス)を選択し、80番ポートをあけて「登録済みに追加」

これで、「⇔」をHTTP,HTTPS通信、「=」をHTTP通信とすると、「リスナー⇔ロードバランサー=サーバー」というかんじになります。

ロードバランサーとサーバーの間はHTTP通信で大丈夫なのかと思いますが、ここの通信はAWSの独自のセキュリティで守られているので、盗聴される心配はございません。

ターゲットを2つ選択したら、「確認」へ。

あとは「作成」をクリックすれば、ロードバランサーが作成されます。

③Route 53でドメイン名とELBとの関連付け

同じく「サービス」から「Route 53」を選択。

使用するドメインを「Hosted zones」から選択したら、「Create Record Set」をクリック。

なお、過去に固定IPアドレスなどでレコードをセットした人は消しておいてください。

画像のようにNameに「www」、Typeは「A-IPv4 address」、Aliasを「Yes」にしたら先ほどつくったELB(僕の場合はload-b-yoshidaという名前のやつ)を選択。

最後に「Create」をおすと作成されます。

なお、ELBは固定IPアドレスを振ることができず、変動することがありますが、Alias Targetで選択しとけば心配無用です。

④Word PressをHTTPS通信で表示できるように設定

さきほど設置したドメインを入力してサイトを表示すると、HTTPで表示できたり、CSSを読み込まなくて残念なかんじになったりと、色々不具合が生じます。

なので、EC2に接続してApache(htaccess)の設定やwp-configファイルなどを適切に設定しなくてはいけません。

まずはHTTP通信で表示させないように、HTTPS通信にリダイレクトする設定です。

wordpress certified by bitnamiの場合、htaccessファイルが/opt/bitnami/apps/wordpress/conf/htaccess.confに存在します。

EC2に接続したら、コマンド「sudo vi /opt/bitnami/apps/wordpress/conf/htaccess.conf」で下記を追記(IでINSERT)します。

<Directory “/opt/bitnami/apps/wordpress/htdocs”>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R,L]
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
</Directory>

追記したら保存して閉じます。(Esc+:+wq+Enter

これは簡単にいうとWordPressのファイルが存在するhtdocsファイル以下には、https通信にしてくれよということです。

WordPressのファイルが/var/www/html以下に存在する人はディレクトリルートを変更するなど、対応していただければと思います。

Apacheを再起動するまで読み込まれないので、コマンド「sudo /opt/bitnami/ctlscript.sh restart apache」を入力します。

次にWordPressのサイトURLを変更するためにwp-config.phpを設定します。

sudo vi /opt/bitnami/apps/wordpress/htdocs/wp-config.php」を入力して、

define(‘WP_SITEURL’, ‘http://’ . $_SERVER[‘HTTP_HOST’] . ‘/’);
define(‘WP_HOME’, ‘http://’ . $_SERVER[‘HTTP_HOST’] . ‘/’);

の部分を#でコメントアウトします。

かわりに下記を追加します。

define(‘WP_SITEURL’, ‘https://’ . $_SERVER[‘HTTP_HOST’] . ‘/’);
define(‘WP_HOME’, ‘https://’ . $_SERVER[‘HTTP_HOST’] . ‘/’);
define(‘FORCE_SSL_ADMIN’, true);
if (isset($_SERVER[‘HTTP_X_FORWARDED_PROTO’]) && $_SERVER[‘HTTP_X_FORWARDED_PROTO’] === “https”) {
$_SERVER[‘HTTPS’] = ‘on’;
}

最後に保存して閉じれば完了です。

http://でサイトを表示してみると、https://からはじまるようになり、保護された通信となっていれば成功です。

それでも、不具合が生じるようでしたら、ChromeならF12をおしてコンソールを確認してください。

過去の記事や画像などがhttp://ではじまるURLで呼び出している可能性もありますので、その時は、プラグインの「Search Regex」などを使うのをオススメします。

文字列を一括検索して書き換えてくれるので、画像のようにhttpをhttpsに換えます。

僕はこれで、不具合が生じなくなりました。

 

以上です。

お疲れ様でした。

 

最近、自分のサイトをいじっているうちに愛着がわいてきました。

アナリティクスでちゃんと見てくれている人がいるのかチェックしてます。

まあ、全然誰も見てねーけど。

誰かSEO教えてください。

 

ありがとうございました。

LINEで送る
Pocket

こんな記事も読まれています