AWS CertificatieManagerでLightsail wordpressをhttpsアクセスできるようにSSL化してみる

AWS CertificatieManagerでLightsail wordpressをhttpsアクセスできるようにSSL化してみます。

https://ten-hope.com/acm-https-ssl-wordpress/

LightsailからのWordpress作成やドメインの取得等は以下参照ください。

https://ten-hope.com/aws-lightsail-wordpress/

https://ten-hope.com/route53-lightsail-wordpress/

https://ten-hope.com/cloudfront-lightsail-wordpress/

<!-- wp:heading -->
<h2>はじめに</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CloudFrontでキャッシュ化しましたので、さらに、AWS CertificatieManager(ACM)でLightsail wordpressをhttpsアクセスできるようにSSL化してみます。LightsailでWordpress構築してドメイン取得やCloudFrontのキャッシュ化は下参照ください。</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://ten-hope.com/aws-lightsail-wordpress/","type":"wp-embed","providerNameSlug":"ten-hope-tech"} -->
<figure class="wp-block-embed is-type-wp-embed is-provider-ten-hope-tech wp-block-embed-ten-hope-tech"><div class="wp-block-embed__wrapper">
https://ten-hope.com/aws-lightsail-wordpress/
</div></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://ten-hope.com/route53-lightsail-wordpress/","type":"wp-embed","providerNameSlug":"ten-hope-tech"} -->
<figure class="wp-block-embed is-type-wp-embed is-provider-ten-hope-tech wp-block-embed-ten-hope-tech"><div class="wp-block-embed__wrapper">
https://ten-hope.com/route53-lightsail-wordpress/
</div></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://ten-hope.com/cloudfront-lightsail-wordpress/","type":"wp-embed","providerNameSlug":"ten-hope-tech"} -->
<figure class="wp-block-embed is-type-wp-embed is-provider-ten-hope-tech wp-block-embed-ten-hope-tech"><div class="wp-block-embed__wrapper">
https://ten-hope.com/cloudfront-lightsail-wordpress/
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2>ACMで証明書を発行</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>AWSのコンソールから「Certification Manager」と検索し、サービス「Certificate Manager」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":201,"width":379,"height":136,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-51.png" alt="" class="wp-image-201" width="379" height="136"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>リージョンが「米国東部（バージニア北部）になっていることを確認します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":232,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-80.png" alt="" class="wp-image-232"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>証明書の発行のために、「リクエスト」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":202,"width":502,"height":97,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-52.png" alt="" class="wp-image-202" width="502" height="97"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>証明書タイプは、「パブリック証明書をリクエスト」を選択して、「次へ」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":203,"width":505,"height":234,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-53.png" alt="" class="wp-image-203" width="505" height="234"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>パブリック証明書のリクエストとして、完全修飾ドメイン名に「myblog-japan.com」と「*.myblog-japan.com」を入力して、検証方法を選択で、DNS検証を選択して、「リクエスト」をクリックします。（ドメインは自分のドメインに変更してください）</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":214,"width":602,"height":504,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-63.png" alt="" class="wp-image-214" width="602" height="504"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>証明書作成中となりますので、待っている間に、Route53のレコードを設定してしまいます。<br>証明書IDが表示されますので、証明書IDをクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":205,"width":507,"height":164,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-55.png" alt="" class="wp-image-205" width="507" height="164"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「Route 53でレコードを作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":206,"width":529,"height":412,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-56.png" alt="" class="wp-image-206" width="529" height="412"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「レコード作成」をクリックするとレコード作成されます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":215,"width":527,"height":314,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-64.png" alt="" class="wp-image-215" width="527" height="314"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Route53にてレコード名がタイプCNAMEとして登録されていることを確認します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":216,"width":398,"height":449,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-65.png" alt="" class="wp-image-216" width="398" height="449"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>しばらくすると、証明書のステータスが「発行済み」になります。証明書の発行が完了となります。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":210,"width":428,"height":215,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-60-1024x515.png" alt="" class="wp-image-210" width="428" height="215"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>CloudFrontへの適用によるSSL化</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>発行した証明書をCloudFrontで適用してSSL化します。<br>CloudFrontからディストリビューションを表示して、IDをクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":222,"width":584,"height":131,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-71.png" alt="" class="wp-image-222" width="584" height="131"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「編集」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":221,"width":572,"height":155,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-70-1024x279.png" alt="" class="wp-image-221" width="572" height="155"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>代替ドメイン名に、「myblog-japan.com」「www.myblog-japan.com」を設定します。<br>また、カスタムSSL証明書から、先ほど設定した証明書を選択します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":220,"width":570,"height":490,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-69.png" alt="" class="wp-image-220" width="570" height="490"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>設定完了後、「変更を保存」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":219,"width":549,"height":51,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-68.png" alt="" class="wp-image-219" width="549" height="51"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>続いてビヘイビア設定として、ビューアーを「 HTTP and HTTPS」から「Redirect HTTP to HTTPS」へ変更します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":223,"width":480,"height":313,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-72.png" alt="" class="wp-image-223" width="480" height="313"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>また、全項目同様に変更します。ビューワープロトコルポリシーが全て変わっていることを確認します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":224,"width":497,"height":245,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-73.png" alt="" class="wp-image-224" width="497" height="245"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Route53による設定</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>それでは、最後にRoute53にて、「myblog-japan.com」か「www.myblog-japan.com」にアクセスしたらCloudFrontドメインを表示するように設定します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Route53からホストゾーンを表示させて、「レコードの作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":225,"width":514,"height":232,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-74.png" alt="" class="wp-image-225" width="514" height="232"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>レコード名を空白にして、トラフィックルーティング先の「エイリアス」をオンにして、「CloudFrontディストリビューションのエイリアス」を選択して、さらに、「ディストリビューション」を選択して、「レコード作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":227,"width":635,"height":324,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-75.png" alt="" class="wp-image-227" width="635" height="324"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><meta charset="utf-8">次に、同様にレコード作成として、レコード名を「www」にして、トラフィックルーティング先の「エイリアス」をオンにして、「CloudFrontディストリビューションのエイリアス」を選択して、さらに、「ディストリビューション」を選択して、「レコード作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":229,"width":637,"height":334,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-77.png" alt="" class="wp-image-229" width="637" height="334"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>最後に、CloudFrontからディストリビューションを選択して、「オリジン」を選択して、「編集」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":230,"width":639,"height":169,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-78-1024x271.png" alt="" class="wp-image-230" width="639" height="169"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>プロトコルを「HTTPのみ」から「HTTPS」のみに変更します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":231,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-79.png" alt="" class="wp-image-231"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>これで、設定完了です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ブラウザから「myblog-japan.com」あるいは「www.myblog-japan.com」でアクセスすると、Lightsailで設定したwordpressのブログが表示されます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>SSL Insesure Content Fixer</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>最後に、WordPressの管理画面から、プラグイン「SSL Insecure Content Fixer」をインストールします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":235,"width":558,"height":304,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-81.png" alt="" class="wp-image-235" width="558" height="304"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>HTTPSの検出方法を以下のように設定します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":236,"width":562,"height":164,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ten-hope.com/wp-content/uploads/2021/11/image-82.png" alt="" class="wp-image-236" width="562" height="164"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>これで完了です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>さいごに</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>AWS LightSailによるWordPressの導入がSSL化含めて終わりました。<br>AWSでもブログ導入お安くできますね。</p>
<!-- /wp:paragraph -->