初心者向け

【AWS】Lightsailで構築したWordPressにCloudFront経由でアクセス!

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

今回はこのような質問をいただきました。

WordPressにCloudFront経由でアクセスしたい!

今回はCDNであるCloudFrontを使ってみたいと思います。

サーバーへの直アクセスでも良いのですが、CloudFrontを経由しておいたほうがいろいろ便利なんですよね。

ブログでは画像を扱うことも多いのでCDNは導入しておきたいところ。

そこで今回はこちらの質問について解説していきます!

CloudFrontを経由してWordPressにアクセス!

CloudFrontを作成する

CloudFrontは全部英語ですが、ポチポチしていくだけなので大丈夫です!

AWSのコンソールにログインして「CloudFront」を選択します。

「CloudFront」を選択

「Distributions」の「Create Distribution」をクリック。

「Create Distribution」をクリック

Get Started!

以下のように設定します。

指定されてない項目はデフォルトでOK!

  • Origin Settings
    • Origin Domain Name:wp.hikari-blog.com
  • Default Cache Behavior Settings
    • Allowed HTTP Methods:GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    • Cache and origin request settings:Use legacy cache settings
    • Cache Based on Selected Request Headers:Whitelist
    • Whitelist Headers:CloudFront-Forwarded-Proto, Host
    • Forward Cookies:ALL
    • Query String Forwarding and Caching:Forward all, cache based on all

Origin Domain Nameは自分のドメインに置き換えてください!

設定できたら「Create Distribution」をクリック!

作成が終わるまで少し時間がかかるので、この時間で別の設定も行っておきましょう。

作成したDistributionのIDをクリック。

DistributionのID

「Behaviors」タブの「Create Behavior」をクリック。

「Create Behavior」をクリック

以下のように設定します。

  • Path Pattern:/wp-login.php*
  • Allowed HTTP Methods:GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
  • Cache and origin request settings:Use legacy cache settings
  • Cache Based on Selected Request Headers:Whitelist
  • Whitelist Headers:CloudFront-Forwarded-Proto, Host
  • Object Caching:Customize
  • Minimum TTL:0
  • Maximum TTL:0
  • Default TTL:0
  • Forward Cookies:ALL
  • Query String Forwarding and Caching:Forward all, cache based on all

設定できたら「Create」をクリック。

同様に以下の2つも作成します。

  • Path Pattern:/wp-admin/*
  • Allowed HTTP Methods:GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
  • Cache and origin request settings:Use legacy cache settings
  • Cache Based on Selected Request Headers:Whitelist
  • Whitelist Headers:CloudFront-Forwarded-Proto, Host, User-agent
  • Object Caching:Customize
  • Minimum TTL:0
  • Maximum TTL:0
  • Default TTL:0
  • Forward Cookies:ALL
  • Query String Forwarding and Caching:Forward all, cache based on all
  • Path Pattern:/wp-json/*
  • Allowed HTTP Methods:GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
  • Cache and origin request settings:Use legacy cache settings
  • Cache Based on Selected Request Headers:Whitelist
  • Whitelist Headers:CloudFront-Forwarded-Proto, Host, X-WP-Nonce
  • Forward Cookies:ALL
  • Query String Forwarding and Caching:Forward all, cache based on all

これで設定完了!

こんな感じになっていると思います。

Behaviors

最後に「General」タブに表示されている「Domain Name」にアクセスしてみましょう!

「Domain Name」にアクセス

無事にWordPressが表示されましたね。

WordPressの表示

あれ?せっかくドメイン取得したのに別のドメインになっちゃったよ?

って思った方。鋭いですね。

でも今はこの状態で大丈夫です。

次回、取得したドメインからアクセスできるように設定します。

また、今はhttpでアクセスしていますが、httpsでアクセスできるようにします。

あとがき

CloudFrontを導入するメリットはやっぱり証明書の自動更新ができること。

ここまでやったら証明書も入れないとですね。

実務だとS3に静的ファイルを配置してCloudFront経由でアクセスすることが多いですね。

静的ファイルだとほとんどキャッシュでOKなのでかなりリーズナブルです。

次は証明書を発行します!

次の記事はこちら!