AWS Lightsailで構築したWordPressにAWS CloudFrontでアクセスしてみます

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

<!-- wp:paragraph -->
<p>AWSのCDN(<em>content delivery network</em>)であるCloudFrontを利用して、ブログデータをキャッシュできるようにして、合わせてSSL化の準備をします。</p>
<!-- /wp:paragraph -->


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

<!-- wp:paragraph -->
<p>LightsailでのWordPressの構築や、ドメイン取得は以下参照ください。</p>
<!-- /wp:paragraph -->

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

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

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

<!-- wp:paragraph -->
<p>AWSのCDN(<em>content delivery network</em>)であるCloudFrontを利用して、ブログデータをキャッシュできるようにして、合わせてSSL化できるようにします。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>LightsailでWordPressの構築や、ドメイン取得は以下参照ください。</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:heading -->
<h2>CloudFrontの作成（ディストリビューションの作成）</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>AWSのコンソールから「cloudfront」を検索して、「CouldFront」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":178,"width":423,"height":188,"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-33.png" alt="" class="wp-image-178" width="423" height="188"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>ディストリビューションの作成をします。「ディストリビューションを作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":179,"width":587,"height":102,"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-34-1024x178.png" alt="" class="wp-image-179" width="587" height="102"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>オリジナルドメインを設定します。<a href="https://ten-hope.com/route53-lightsail-wordpress/" title="https://ten-hope.com/route53-lightsail-wordpress/">ここで</a>設定したドメイン「blog.myblog-japan.com」を入力します（<meta charset="utf-8">「blog.myblog-japan.com」のところは自分のドメインに変更して入力してください）</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":180,"width":530,"height":302,"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-35.png" alt="" class="wp-image-180" width="530" height="302"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>デフォルトのキャッシュビヘイビアを設定します。<br>許可されたHTTPメソッドを「GET,HEAD,OPTIONS,PUT,POST,PATH,DELETE)に変更します。そのほかはデフォルトのままとします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":181,"width":447,"height":391,"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-36.png" alt="" class="wp-image-181" width="447" height="391"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>キャッシュキーとオリジンリクエストのところは、「Legacy cashe settings」として、<br>ヘッダーは、「Hosts」「CloudFront-Forwarded-Proto」を追加して、クエリ文字列とcookieは「すべて」を選択します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":182,"width":534,"height":586,"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-37.png" alt="" class="wp-image-182" width="534" height="586"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>設定のところは、そのままにして、最後、「ディストリビューションの作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":183,"width":367,"height":499,"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-38.png" alt="" class="wp-image-183" width="367" height="499"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>ディストリビューションが作成されます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":184,"width":583,"height":191,"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-39.png" alt="" class="wp-image-184" width="583" height="191"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>次に、「ビヘイビアを作成」をクリックしてビヘイビアを作成します。</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>パスパターン「/wp-longin.php」として、オリジンとオリジングループを「blog.myblog-japan.com」（自分のオリジンに変更してください）<br><meta charset="utf-8">許可されたHTTPメソッドを「GET,HEAD,OPTIONS,PUT,POST,PATH,DELETE)に変更します。そのほかはデフォルトのままとします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":193,"width":517,"height":494,"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-48.png" alt="" class="wp-image-193" width="517" height="494"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><meta charset="utf-8">キャッシュキーとオリジンリクエストのところは、「Legacy cashe settings」として、<br>ヘッダーは、「Hosts」「CloudFront-Forwarded-Proto」を追加して、クエリ文字列とcookieは「すべて」を選択します。また、オブジェクトキャッシュをすべて0にします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":187,"width":520,"height":489,"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-42.png" alt="" class="wp-image-187" width="520" height="489"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":188,"width":343,"height":176,"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-43.png" alt="" class="wp-image-188" width="343" height="176"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>最後に、「ビヘイビアを作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>続いて、同様に、ビヘイビアの作成をします。<br><meta charset="utf-8">パスパターン「/wp-admin/*」として、オリジンとオリジングループを「blog.myblog-japan.com」（自分のオリジンに変更してください）<br><meta charset="utf-8">許可されたHTTPメソッドを「GET,HEAD,OPTIONS,PUT,POST,PATH,DELETE)に変更します。そのほかはデフォルトのままとします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":189,"width":506,"height":492,"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-44.png" alt="" class="wp-image-189" width="506" height="492"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><meta charset="utf-8">キャッシュキーとオリジンリクエストのところは、「Legacy cashe settings」として、<br>ヘッダーは、「Hosts」「CloudFront-Forwarded-Proto」「User-agent」を追加して、クエリ文字列とcookieは「すべて」を選択します。また、オブジェクトキャッシュをすべて0にします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":190,"width":421,"height":498,"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-45.png" alt="" class="wp-image-190" width="421" height="498"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>最後に、「ビヘイビアを作成」をクリックします。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>また、同様に、ビヘイビアの作成をします。<br>パスパターン「/wp-json/*」として、オリジンとオリジングループを「blog.myblog-japan.com」（自分のオリジンに変更してください）<br>許可されたHTTPメソッドを「GET,HEAD,OPTIONS,PUT,POST,PATH,DELETE)に変更します。そのほかはデフォルトのままとします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":191,"width":508,"height":499,"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-46.png" alt="" class="wp-image-191" width="508" height="499"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><meta charset="utf-8">キャッシュキーとオリジンリクエストのところは、「Legacy cashe settings」として、<br>ヘッダーは、「Hosts」「CloudFront-Forwarded-Proto」「X-WP-Nonce」を追加して、クエリ文字列とcookieは「すべて」を選択します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":192,"width":513,"height":409,"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-47.png" alt="" class="wp-image-192" width="513" height="409"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>作り終えたら以下のようになります。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":194,"width":610,"height":222,"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-49-1024x374.png" alt="" class="wp-image-194" width="610" height="222"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":195,"width":252,"height":200,"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-50.png" alt="" class="wp-image-195" width="252" height="200"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>ディストリビューションドメイン名でアクセスすると、WordPressが表示されます。</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>CloudFrontでキャッシュできるようになったので、最後SSL化をおこないます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>続きは、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>https://ten-hope.com/acm-https-ssl-wordpress/</p>
<!-- /wp:paragraph -->