LightsailでACMを使用してSSL証明書を自動更新する

当ページのリンクには広告が含まれています。
lightsail
  • URLをコピーしました!
生徒

LightsailでSS証明書を自動更新する方法はありますか?

先生

AWSのサービスでSSL証明書の作成と自動更新を行うことができます

LightsailのWordPressをhttps対応したい時にACM(AWS Cerificate Manager)でSSLの証明書を作成して、証明書の更新もAWSが自動で行なってくれるようにする手順を説明します。

AWS Certificate Manager とは

SSL証明書を作成できるAWSのサービスで、AWSで作成したWEBサイトに簡単にSSL証明書を設定できます。

また、SSL証明書の自動更新を行うこともできます。

この記事で分かること
  • AWSで使用できる自動更新されるSSL証明書サービスACM(AWS Cerificate Manager)の使い方

アクセス数が相当多いサイトでなければ、わずかな金額で済むとは思いますが、以下の手順はAWSのCloudfrontやRoute53の料金が掛かりますので、AWSのサイトで料金を確認した上で行ってください。

目次

Route53で独自ドメインのホストゾーンを作成する

ここの手順は以下の記事と同じ手順になります。独自ドメインをお名前.comで取得した場合の手順ですが、他のドメイン管理サービスの場合でもだいたい同じです。

ACMでSSLの証明書を作成する

次にSSLの証明書をAWS Cerificate Managerで作成します。ACMの証明書には以下のようなメリットがあります。

AWS Cerificate Manager(ACM)でSSL証明書を作成するメリット

  • 証明書の発行が無料
  • 証明書が自動更新されるため手間が掛からない
  • 簡単に証明書を発行できる
  • AWSのサービスと連携しやすい

AWS Cerificate Managerで発行した証明書はAWS以外の環境で使用することはできません。

SSL証明書をACMで作成する手順

AWSのマネージメントコンソールで、”ACM”と入れて検索して「Cerificate Manager」を選択します。

リージョンで「米国東部(バージニア北部) us-east-1」を選択します。

作成した証明書をこの後CloudFrontで使用するのですが、CloudFrontで使用できるのは「米国東部(バージニア北部) us-east-1」リージョンで作成した証明書のみです。必ずこのリージョンで証明書を作成する必要があります。

「証明書をリクエスト」をクリックします。

作成する証明書のタイプで「パブリック証明書をリクエスト」を選択します。

プライベート証明書というのは、公開されたインターネットではなく企業内のネットワークなど限定したエリア内で使用する証明書で、個人でブログを公開するような場合に使用するものではありません。

作成するパブリック証明書の内容を設定します。

ドメイン名を入力して「DNS検証」を選択して「リクエスト」を押します。

検証方法が「DNS検証」でないと証明書の自動更新は行うことができません。

作成直後の一覧画面では、まだ証明書が表示されないので「証明書を表示」をクリックします。

この時点では、作成した証明書は保留中の状態になっています。認証に必要となるCNAMEの内容をメモしておきます。

作成済みの証明書を表示するには画面左側のメニューをクリックします。

メニューの「証明書を一覧」をクリックします。

証明書をRoute53のDNSレコードに登録する

作成した証明書をRoute53のDNSレコードに登録します。「Route53でレコードを作成」をクリックします。

Route53に証明書に該当するドメインのホストゾーンが存在する場合、以下の画面になりますので「レコードを作成」をクリックします。

この時レコードが見つからず何も表示されない場合は、ACMの証明書と一致するドメインのホストゾーンがRoute53で作成されているか確認してください。

Route53にDNSのレコードが作成されます。証明書のステータスが「保留中の検証」のままの場合はF5キーを押すなどして画面を更新します。

証明書のステータスが「成功」に変わります。

ここで「保留中の検証」から変わらない場合はRoute53のホストゾーンに、独自ドメインのパブリックIPアドレスのレコードが正しく作成されているか確認してください。

これで証明書の設定は完了です。

CloudFrontディストリビューションの作成

今度はCloudFrontを作成します。AWSのサイトでCloudFrontの画面を開きます。

「CloudFrontディストリビューションを作成」をクリックします。

ディストリビューションの作成画面で以下の内容を入力していきます。

項目説明
オリジンドメイン独自ドメインオリジンというのはCloudFrontがキャッシュする元のサイトです。使用するドメイン名を入力します。
プロトコルHTTPのみCloudFrontがオリジンの情報を取得する際の通信なので、HTTPのみで問題ありません。
名前独自ドメインオリジンドメインの入力値が自動で入ります。
項目説明
ビューワープロトコルポリシーHTTPでアクセスされた場合もHTTPSでのアクセスに切り替えたいので、Redirect HTTP to HTTPSを選択します。
許可されたHTTPメソッド全てのメソッドを許可します。
項目
キャッシュキーとオリジンリクエストLegacy cache settingsを選択します。
ヘッダー次のヘッダーを含めるを選択します。
ヘッダーを追加HostCloudFront-Forwarded-Protoを選択します。
クエリ文字列すべてを選択します。
cookieすべてを選択します。

続けてキャッシュキーとオリジンリクエストに以下の内容を入力していきます。

「ヘッダーを追加」はリストからHostCloudFront-Forwarded-Protoを選択します。

さらに「カスタムを追加」ボタンから入力画面を開きカスタムヘッダーに”User-Agent”と入力して追加ボタンをクリクします。

入力後の内容は以下になります。

項目説明
代替ドメイン名ユーザーがブラウザでアクセスするドメインを入力します。CloudFrontがキャッシュを取得するオリジンと同じドメインではアクセスがループしてしまうので、ユーザーがアクセスするドメインとCloudFrontがアクセスするドメインは、サブドメインを変えて別にする必要があります。
カスタムSSL証明書ACMで作成したSSL証明書をリストから選択します。リストに何も表示されない時は、証明書をバージニア北部のリージョンで作成しているか、証明書のドメインとCloudFrontのドメインが合っているかを確認してください。

デフォルトのビヘイビアが作成されます。続けて、WordPressサイトに必要なビヘイビアを作成していきます。

「ビヘイビアを作成」をクリックして以下の内容でビヘイビアを作成していきます。

① 管理画面をキャッシュさせないためのビヘイビア

② 管理画面をキャッシュさせないためのビヘイビア その2

③ WP REST API 用のビヘイビア

ヘッダーを追加のX-WP-NonceUser-Agentと同じように「カスタムを追加」ボタンから追加します。

作成したビヘイビアをまとめると以下の内容になります。

番号パスパターンビューワープロトコルポリシー許可されたHTTPメソッドヘッダー
/wp-admin/*Redirect HTTP to HTTPSGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEHost, CloudFront-Forwarded-Proto,User-Agent
/wp-login.php*Redirect HTTP to HTTPSGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEHost, CloudFront-Forwarded-Proto,User-Agent
/wp-json/*Redirect HTTP to HTTPSGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEHost, CloudFront-Forwarded-Proto, X-WP-Nonce,User-Agent

使用しているプラグインによっては他にもビヘイビアの追加が必要な場合があります。

Route53でドメインとの紐付けを設定する

Route53でレコードを作成します。

項目説明
レコードタイプAレコードを選択します。
エイリアスONにします。
トラフィックのルーティング先CloudFrontのディストリビューションへのエイリアスを選択します。
ディストリビューションリストからCloudFrontのディストリビューションを選択します。リストに何も表示されない場合は、CloudFrontのディストリビューションの代替ドメイン名(CNAME)がホストゾーンと合っているかなどを確認します。

以上で設定は完了です。ブラウザでCloudFrontで設定したCNAMEのドメインにアクセスして保護された接続でサイトが表示されるか確認してください。

管理画面が正しく表示されるようにする

ここまでの設定でサイトは正しく表示されるようになりましたが、WordPressの管理画面にアクセスすると以下のようにCSSが適用されない形で表示されます。プラグイン「SSL Insecure Content Fixer」をインストールして修正します。

ログイン画面にCSSが適用されていない

WordPressの管理画面にログインします。ログイン時に以下のように表示される場合がありますが「このまま送信」をクリックします。

スタイルが崩れているので見にくいですが、下にスクロールして「Plugin(プラグイン)」ー「Add New(新規追加)」を見つけてクリックします。

プラグインの検索欄に「SSL Insecure Content Fixer」と入力して検索します。

検索結果から「SSL Insecure Content Fixer」を選択して「Install Now(インストール)」をクリックします。

インストール後に「Activate Plugin(有効化)」をクリックします。

管理画面の「Plugin(プラグイン)」を開いて「SSL Insecure Content Fixer」の「Settings」をクリックします。

「HTTP detection」でHTTP_CLOUDFRONT_FORWARDED_PROTOを選択して「Save Change」をクリックします。

以上で手順は完了です。これで管理画面も正常に表示されるようになります。

よかったらシェアしてね!
  • URLをコピーしました!
目次