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

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構築
22. 静的IPの付与, 独自ドメインの設定
27. ACMで証明書の発行
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レコードを登 録
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
 ◦ サードパーティのコメントシステムを埋め込むことで、実現は可能だが……