AWS LightsailでHTTPS対応WordPress構築 & ShifterでサーバーレスWordPress

E976fa2ecdb59d24be374c953fe56e2f?s=47 jalemy
January 29, 2020

AWS LightsailでHTTPS対応WordPress構築 & ShifterでサーバーレスWordPress

E976fa2ecdb59d24be374c953fe56e2f?s=128

jalemy

January 29, 2020
Tweet

Transcript

  1. AWS LightsailでWordPress構築 &  ShifterでサーバーレスWordPress ゆるはち.it(2020/01/29)
 @jalemy
 HTTPS対応


  2. 自己紹介 • 佐野友亮(@jalemy)
 ◦ じゃれみーって呼んでください 
 • Unity/C#→なんやかんや→Laravel+Vue.js(今 
 •

    ここ最近はwebフロントエンドを勉強中…… 

  3. AWS Lightsailとは

  4. Lightsailとは • Amazonが提供しているVPS(Virtual Private Server)サービス 
 • ストレージ、自動スナップショット、DNS機能など多様な機能がパッケージ化されている 
 •

    wordpressや、Redmine、Nginx、Node.jsなど著名なアプリケーションに関しては、事前に設定さ れた内容をもとに迅速にセットアップすることができる 
 • もちろん他のAWSサービスと組み合わせて利用することも可能 
 ◦ LightsailインスタンスをEC2にupgradeすることも可能 

  5. Lightsailとは • インスタンスイメージ一覧 
 ◦ 右図から選べる
 ◦ (2020/01/26現在)


  6. Lightsailとは • 料金プラン
 ◦ https://aws.amazon.com/jp/lightsail/pricing/
 ◦ (2020/01/26現在)
 ◦ 転送量が規定を超えた場合は追加料金となる 


  7. 構成図 • Lightsailにwordpress 
 
 • ACMで証明書を準備 
 
 •

    cloudfrontを立てる
 
 • cloudfrontに証明書を 
 インストール

  8. AWS Certificate Managerとは

  9. AWS Certificate Managerとは • AWS上でお手軽に(SSL/TLS)を利用できるサービス 
 • 証明書の発行、更新が簡単にできる 
 •

    料金は無料
 ◦ AWSリソースの料金だけかかる(EC2インスタンスとか) 
 
 
 • 今回はAWS Certificate Manager(以下ACM)を利用して、HTTPS化する 

  10. Amazon CloudFrontとは

  11. AWS CloudFrontとは • Amazonが提供しているCDNサービス 
 • サーバーから直接コンテンツを配信せずに、CDNを介してユーザーに配信できる 
 • 料金は従量課金制


    ◦ https://aws.amazon.com/jp/cloudfront/pricing/
 ◦ 仮に1ヶ月で10,000リクエスト、10GB転送量だとしたら120円くらい 
 

  12. Lightsailでwordpress構築

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. 静的IPの付与, 独自ドメインの設定

  23. None
  24. None
  25. None
  26. None
  27. ACMで証明書の発行

  28. None
  29. None
  30. None
  31. None
  32. None
  33. cloudfrontの構築

  34. Origin Domain Name 
 wp.example.com
 (個人のドメイン)
 Origin ID
 Custom-wp.example.com 


    (自動的に生成されるのでそのままでOK) 
 Origin Settings

  35. Default Cache Behavior Settings
 Origin or Origin Group 
 Custom-wp.example.com

    
 Viewer Protocol Policy 
 Redirect HTTP to HTTPS 
 Allowed HTTP Methods 
 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
 Cache Based on Selected Request Headers 
 Whitelist
 Whitelist Headers
 - CloudFront-Forwarded-Proto 
 - Host
 Forward Cookies
 Whitelist
 Whitelist Cookies
 - comment_author_*
 - wordpress_logged_in_* 
 - wordpress_test_cookie 
 - wp-settings-*
 Query String Forwarding and Caching 
 Forward all, cache based on all 

  36. Distribution Settings
 Alternate Domain Names(CNAMEs) 
 www.example.com
 SSL Certificate
 Custom

    SSL Certificate 
 (ACMで作成した証明書を選択) 
 ここまで入力できたら、「 Create Distribution」
  37. Cache Behavior Settings(/wp-login.php*)
 Origin or Origin Group 
 Custom-wp.example.com 


    Viewer Protocol Policy 
 Redirect HTTP to HTTPS 
 Allowed HTTP Methods 
 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
 Cache Based on Selected Request Headers 
 Whitelist
 Whitelist Headers
 - CloudFront-Forwarded-Proto 
 - Host
 - Authorization
 Object Caching
 Customize
 Minimum, Maximum, Default TTL 
 0
 Forward Cookies
 All
 Query String Forwarding and Caching 
 Forward all, cache based on all 

  38. Cache Behavior Settings(/wp-admin/*)
 Origin or Origin Group 
 Custom-wp.example.com 


    Viewer Protocol Policy 
 Redirect HTTP to HTTPS 
 Allowed HTTP Methods 
 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
 Cache Based on Selected Request Headers 
 Whitelist
 Whitelist Headers
 - CloudFront-Forwarded-Proto 
 - Host
 - Authorization
 - User-agent
 Object Caching
 Customize
 Minimum, Maximum, Default TTL 
 0
 Forward Cookies
 All
 Query String Forwarding and Caching 
 Forward all, cache based on all 

  39. Cache Behavior Settings(/wp-json/*)
 Origin or Origin Group 
 Custom-wp.example.com 


    Viewer Protocol Policy 
 Redirect HTTP to HTTPS 
 Allowed HTTP Methods 
 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
 Cache Based on Selected Request Headers 
 Whitelist
 Whitelist Headers
 - CloudFront-Forwarded-Proto 
 - Host
 - Authorization
 - X-WP-Nonce
 Object Caching
 Customize
 Minimum, Maximum, Default TTL 
 0
 Forward Cookies
 All
 Query String Forwarding and Caching 
 Forward all, cache based on all 

  40. cloudfront用のCNAMEレコードを登 録

  41. None
  42. Wordpressの設定

  43. ~/apps/wordpress/htdocs/wp-config.php


  44. これにて設定完了

  45. 構成図 • 順調に設定が進めば、1,2時間程度 
 • Gutenbergエディターが 
 user-agentを要求するとかハマって、 
 とても時間かかりました

  46. 料金 • Lightsail - 3.5USD
 • ACM - 無料
 •

    cloudfront - 10,000リクエスト、 
 10GB転送で約120円 
 • 月々500円くらいで運用できる 

  47. Lightsailのメリット • パッケージ化されているので利用が簡単
 • 月額固定料金なので、コスト管理がしやすい
 • EC2を利用して組み立てるより、安い
 • AWSの利便性を享受できる


  48. Lightsailのデメリット • 設定できる項目が少なく、自由度が低い
 • アクセスの増減などにスケーラブルに対応できない
 ◦ インスタンスプランを後から変更することができない
 • IAMやセキュリティグループによる権限管理ができない
 


    
 スナップショットからEC2インスタンスに移行できる点が救いか……

  49. Lightsailが向いているケース • WordPressブログ
 • 小規模なWebサイトや、Webサービス
 • 可用性が低くても問題ないケース(身内のredmineとか
 • 開発環境、staging環境


  50. サーバーレスWordPress

  51. Shifter • WordPressのサーバーレスホスティングサービス
 • 必要な時だけ立ち上げて、
 それ以外は静的コンテンツを
 配信
 • 保守しなくて良いので楽ちん


  52. 料金プラン Free
 0USD
 Tier1
 16USD/月
 Tier2
 24USD/月
 Tier3
 48USD/月
 https://www.getshifter.io/pricing/

    
 • 独自ドメイン利用できるのがTier1以上なので、運用するのであれば 16USD~ 
 となる
 • 年払いにすると少し安くなる 
 (12USD/月, 18USD/月, 26USD/月) 

  53. お試しでサイトを作ってみる

  54. 使い所 • 静的サイト
 ◦ コーポレートサイト
 ◦ ブログサイト
 ◦ ランディングページ


  55. 弱点 • HTML生成に時間がかかるので、頻繁に更新する場合は不向き
 • 検索などPHPを必要とするものが利用不可能
 ◦ コメントフォームから書き込むようなコミュニティサイトはNG
 ◦ サードパーティのコメントシステムを埋め込むことで、実現は可能だが……