Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VPS運用のWordPressブログをAWSフル活用したモダン構成にする全過程

 VPS運用のWordPressブログをAWSフル活用したモダン構成にする全過程

7年ほど前にインフラを勉強するためにVPSに構築したWordPressのブログ。時は移り変わり、アプリケーションもインフラもパブリッククラウドは様変わりしました。このセッションでは、一台のVPSだけで運用していたWordPressのブログを、AWSの各種マネージドサービスとNext.jsをフル活用した構成に移行するまでの全過程をお届けします。

濱田孝治

July 26, 2022
Tweet

More Decks by 濱田孝治

Other Decks in Technology

Transcript

  1. VPS運⽤のWordPressブログを
    AWSフル活⽤したモダン構成にする
    全過程
    2022/7/26
    CX事業本部 MAD事業部
    濱⽥孝治(ハマコー)

    View full-size slide

  2. 2
    自己紹介
    濱⽥孝治(ハマコー)
    • CX事業本部 (元)MAD事業部⻑
    • Japan APN Ambassador 2020
    • JAWS-UG コンテナ⽀部運営
    • 好きなサービス︓ECS, EKS, CloudFormation
    • 好きな⾔葉「わっしょい」
    • @hamako9999
    • 最近ハマってるもの︓Vampire Survivors、プロ
    セカ(推しもいますが、30分全て⾷い潰すので今
    ⽇は控えます)

    View full-size slide

  3. 3
    いつものアレの時間ですよ

    View full-size slide

  4. 4
    今回の登壇きっかけ
    VPS作ってWordPress運⽤してみたらめちゃくちゃ勉
    強になったから
    • 前職でアプリエンジニアやってたが、インフラ⽅⾯
    の知識が皆無だった
    • なんとかせねばと思い、VPSを契約しWordPressを
    インストールしまがりなりにも運⽤してみた
    • いろんなミドルウェアやLinuxのお作法が⾝につき異
    常に勉強になった ぶっちゃけクラスメソッドへの
    転職のきっかけの一つ

    View full-size slide

  5. 5
    ということは
    今このVPSを更にモダンにしたら
    めっちゃ勉強になるのでは︕︖

    View full-size slide

  6. 6
    作業始める前のハマコーが持っていた前提知識
    • React︓今回始めて触りました
    • Next.js︓今回始めて触りました
    • Amplify︓ほぼ始めて触りました
    • App Runner︓好きです
    • Aurora Serverless v2︓今回始めて触りました

    View full-size slide

  7. 7
    作業始める前のハマコーが持っていた前提知識
    • React︓今回始めて触りました
    • Next.js︓今回始めて触りました
    • Amplify︓ほぼ始めて触りました
    • App Runner︓好きです
    • Aurora Serverless v2︓今回始めて触りました
    途中泣きそうなぐらいつらかったけど、森茂先生
    の協力の元なんとかなりました。この場を借りて
    お礼申し上げます!!

    View full-size slide

  8. 8
    喋ること喋らないこと
    喋ること
    • モダンな構成にしていくための構成の勘所
    • 各技術要素とAWSサービスとの関連
    喋らないこと
    • WordPress⾃体の詳細な解説
    • ReactやNext.js⾃体の詳細な解説

    View full-size slide

  9. 9
    今回の登壇の趣旨
    WordPressの移⾏を題材にすることで
    AWSのモダンなサービスが
    どのようなユースケースで使えるのかを
    味わってもらう

    View full-size slide

  10. 10
    今⽇のセッションで持ち帰ってもらいたいこと
    以下のうちどれかを触るアツい気持ち
    React、Next.js
    Amplify
    Aurora Serverless v2
    App Runner

    View full-size slide

  11. 11
    Agenda
    • 移⾏前後の構成解説
    • 移⾏⼿順①︓Route 53とEC2の導⼊
    • 移⾏⼿順②︓Next.jsとAmplifyの導⼊
    • 移⾏⼿順③︓Aurora Serverless v2の導⼊
    • 移⾏⼿順④︓App Runnerの導⼊
    • 振り返りとまとめ

    View full-size slide

  12. 12
    移⾏前後の構成解説

    View full-size slide

  13. 13
    Agenda
    • 移⾏前後の構成解説
    • 移⾏⼿順①︓Route 53とEC2の導⼊
    • 移⾏⼿順②︓Next.jsとAmplifyの導⼊
    • 移⾏⼿順③︓Aurora Serverless v2の導⼊
    • 移⾏⼿順④︓App Runnerの導⼊
    • 振り返りとまとめ

    View full-size slide

  14. 14
    最初のインプット
    移⾏前後の構成を把握して
    話の流れを抑えておきます

    View full-size slide

  15. 15
    移⾏前構成図
    hamako9999.netを
    8年ほど前に購入
    VPSのIPアドレスを
    Aレコード登録
    2013年9月に契約
    記事文中の画像はflickrに格納
    (MarsEditの機能で自動的にアッ
    プロード)

    View full-size slide

  16. 16
    さくらのVPSとは︖
    • SAKURA internetが運営するVPS
    • VPSとは︖
    • Virtual Private Server
    • ざっくり⾔うとサーバー⼀つを丸々利⽤できるサービス
    • 契約するとアクセス情報が払い出されて、SSHアクセスに必
    要な鍵の設定やミドルウェアの導⼊などなんでも好きにでき

    • AWSではLightsailがVPS相当
    • 価格とスペックのバランスが良く、⾮常にナイスなサービ

    View full-size slide

  17. 17
    さくらのVPS契約状況
    • 利⽤期間︓2013/9/3〜
    • 年払いで⽉1421円
    • Nginxでリバースプロキ
    シキャッシュを⼊れてい
    れば、コレぐらいのスペ
    ックでも全然問題ない

    View full-size slide

  18. 18
    アクセス数(PV)
    • ピーク時⽉間PV︓2016年7⽉に28万8千(今は6000程
    度)
    • ⼀時期「モバイルバッテリー ⽐較」で検索2位に
    • 「ポケモン Go」が出たときめっちゃ売れた
    • 最後の記事更新は2017年11⽉ → 以後放置

    View full-size slide

  19. 19
    その他サイト情報
    • WordPress:4.9.20
    • PHP︓5.6.18
    • nginx︓1.10.2
    • MySQL︓5.1.73
    • 格納記事数︓約110

    View full-size slide

  20. 20
    移⾏後構成図
    Value Domainから移行
    WordpressのPHP部
    分を移行
    MySQLを移行
    新規でNext.jsを構築 APIにGraphQL
    を利用

    View full-size slide

  21. 21
    移⾏⼿順①
    Route 53とEC2の導⼊

    View full-size slide

  22. 22
    Agenda
    • 移⾏前後の構成解説
    • 移⾏⼿順①︓Route 53とEC2の導⼊
    • 移⾏⼿順②︓Next.jsとAmplifyの導⼊
    • 移⾏⼿順③︓Aurora Serverless v2の導⼊
    • 移⾏⼿順④︓App Runnerの導⼊
    • 振り返りとまとめ

    View full-size slide

  23. 23
    ここでやりたいこと
    移⾏のベース構築

    View full-size slide

  24. 24
    ここでやりたいことの考え⽅
    今後の作業をスムーズに進めるため、環境を全てAWS
    に持ってくる
    • Route 53の導⼊
    • ドメイン全て移⾏(ネームサーバーの移譲ではなく)
    • AmplifyやApp Runnerはカスタムドメインが設定できる
    ため、Route 53で管理したほうが何かと便利
    • EC2の導⼊
    • 各種AWSサービスを増やしながら動作確認するベースと
    して構築

    View full-size slide

  25. 25
    作業前構成

    View full-size slide

  26. 26
    作業後構成
    ドメインのAレコードに
    EC2のEIPを指定
    EIPをアタッチしてパブ
    リックサブネットに構築
    PHP(Wordpress)、
    MySQLをインストール

    View full-size slide

  27. 27
    移⾏作業︓Route 53の導⼊
    センシティブな作業だけれど、AWSの公式ドキュメン
    トが⾮常に丁寧に作られているので、それに基づいて慎
    重にやれば⼤丈夫
    • 公式︓ドメイン登録の Amazon Route 53 への移管
    • VALUE-DOMAINやお名前.comなどからの移⾏であ
    れば、情報はいろいろ出てくる
    • EC2の導⼊前に独⽴して先にやるのが良い(VPSを運
    ⽤している間は、Route 53のAレコードはVPSのIP
    アドレスにしておく)

    View full-size slide

  28. 28
    移⾏作業︓Route 53の導⼊
    https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/domain-transfer-to-route-53.html

    View full-size slide

  29. 29
    移⾏作業︓EC2の導⼊
    実際やるとき、以下の2つで迷う
    • 案①︓VPSをまるまるEC2移⾏
    • CloudEndure Migrationなどを利⽤してごっそり移⾏
    • 案②︓新規でEC2構築
    • EC2を新規で構築し、そこにイチからミドルウェアをイ
    ンストールし、DBをインポートする

    View full-size slide

  30. 30
    移⾏作業︓EC2の導⼊
    実際やるとき、以下の2つで迷う
    • 案①︓VPSをまるまるEC2移⾏
    • CloudEndure Migrationなどを利⽤してごっそり移⾏
    • 案②︓新規でEC2構築
    • EC2を新規で構築し、そこにイチからミドルウェアをイ
    ンストールし、DBをインポートする
    ⼀⾒⾯倒くさそうだけれ
    どこちらを採⽤

    View full-size slide

  31. 31
    案②︓新規でEC2構築
    ヘッドレスCMSとして利⽤するため、WordPressを可能な限
    り素の状態に戻しておきたかった
    • 運⽤が⻑いほど様々なカスタマイズやプラグインやテーマ
    が導⼊され、それに合わせてDBスキーマも変更されがち
    • ヘッドレスCMSとして使う場合、テーマや⼤部分のプラ
    グインは不要
    • DBをインポートした後、最新のWordpress(⾃分は
    6.0.1)を起動し動作確認する
    • このとき、必要であればDBのスキーマ更新が⾃動的に⾛る
    • ヘッドレスCMSについては、後述

    View full-size slide

  32. 32
    案②︓新規でEC2構築
    公式の下記⼿順通りにやれば、1時間ぐらいで終了
    • チュートリアル: Amazon Linux 2 に LAMP ウェブ
    サーバーをインストールする
    • チュートリアル: Amazon Linux 2 での WordPress
    ブログのホスト
    後は、VPSからmysqldumpとかで
    抜き出したデータをEC2のMySQLに
    インポートして管理画⾯が起動する
    ところまで確認

    View full-size slide

  33. 33
    (余談)VPC作成ウィザードが神すぎた
    昔のしか知らない⼈は
    ⼤興奮間違いなし︕︕

    View full-size slide

  34. 34
    参考︓CloudEndure Migrationの使い⽅
    https://dev.classmethod.jp/articles/migration_with_cloudendure/

    View full-size slide

  35. 35
    ここまでで
    移⾏のベース構築が完了

    View full-size slide

  36. 36
    移⾏⼿順②
    Next.jsとAmplifyの導⼊

    View full-size slide

  37. 37
    Agenda
    • 移⾏前後の構成解説
    • 移⾏⼿順①︓Route 53とEC2の導⼊
    • 移⾏⼿順②︓Next.jsとAmplifyの導⼊
    • 移⾏⼿順③︓Aurora Serverless v2の導⼊
    • 移⾏⼿順④︓App Runnerの導⼊
    • 振り返りとまとめ
    個⼈的に⼀番
    楽しかったやつ

    View full-size slide

  38. 38
    ここでやりたいこと
    WordpressをヘッドレスCMSとして
    利⽤する⼿段を検討し
    検証しながら構築する

    View full-size slide

  39. 39
    作業前構成

    View full-size slide

  40. 40
    作業⼿順
    1. WordPressにGraphQLのエンドポイントを⽣やす
    2. ローカル環境でNext.jsでGraphQL経由でSSGして
    みる
    3. 動作確認したNext.jsをAmplifyにデプロイする

    View full-size slide

  41. 41
    作業後構成
    Amplify上でNext.jsを動
    作させ、GraphQLで
    EC2にアクセス

    View full-size slide

  42. 42
    作業⼿順1
    WordPressに
    GraphQLのエンドポイントを⽣やす

    View full-size slide

  43. 43
    ヘッドレスCMSとは
    CMS
    (Contents Management System)の
    画⾯描画(ヘッド)部分と
    記事管理部分を分離したシステムの事

    View full-size slide

  44. 44
    ヘッドレスCMSとは
    従来のパターン ヘッドレスCMSの場合
    SPAフレームワークで
    レンダリング
    • Angular
    • Vue
    • React

    View full-size slide

  45. 45
    WordPressのヘッドレスCMS化に必要なもの
    WordPressでのAPIの提供⽅法は⼤きく2つ
    1. WordPress REST API
    • 以前はプラグインとして提供されていたが2016年12⽉
    にリリースされたWordPress4.7から正式に採⽤された
    • デフォルトで有効化されている
    2. WPGraphQL
    • GraphQLのエンドポイントをWordPressに作成するプラ
    グイン
    • オープンソースだがドキュメントも⾮常に充実していて
    良い

    View full-size slide

  46. 46
    WordPressのヘッドレスCMS化に必要なもの
    WordPressでのAPIの提供⽅法は⼤きく2つ
    1. WordPress REST API
    • 以前はプラグインとして提供されていたが2016年12⽉
    にリリースされたWordPress4.7から正式に採⽤された
    • デフォルトで有効化されている
    2. WPGraphQL
    • GraphQLのエンドポイントをWordPressに作成するプラ
    グイン
    • オープンソースだがドキュメントも⾮常に充実していて
    良い
    こちらを採⽤

    View full-size slide

  47. 47
    WPGraphQL
    • https://www.wpgraphql.com/
    • メインスポンサーはWP Engine社
    • WordPressのマネージドホスティング
    サービスのパイオニア
    • インストールするだけでGraphQL
    エンドポイントが⽣える
    https://example.com/graphql
    • GraphQL実⾏専⽤IDEが付属
    • ドキュメントが⾮常に充実
    • Getting StartedやGuideが完璧
    • 単なるプラグインのページの域を超え
    ている

    View full-size slide

  48. 48
    WPGraphQL
    クエリの履歴管理、Query
    Composerなどもあり、超絶便利

    View full-size slide

  49. 49
    GraphQLの動作確認
    プラグインインストール後、作成されたGraphQLエン
    ドポイントに対して、⾃分のクライアントから動作確認
    動作確認には、mac⽤クライアントの
    Altair GraphQL Clientを利⽤

    View full-size slide

  50. 50
    作業⼿順2
    ローカル環境でNext.jsで
    GraphQL経由でSSGしてみる

    View full-size slide

  51. 51
    Reactとは︖
    React(https://ja.reactjs.org/)
    • ユーザーインターフェース構築のためのJavaScript
    ライブラリ
    • 宣⾔的なView、コンポーネントベース、どこでも使える
    (React Native)
    • 開発はFacebook(Meta社)
    • ⽇本語めっちゃ充実しているので、学習は公式サイ
    トだけでいけそう

    View full-size slide

  52. 52
    Reactを試すには
    ローカル環境の構築は異常に簡単
    • Node.js環境の構築
    • お気に⼊りのエディタの⽤意(ハマコーはVSCode)
    • npx create-react-app my-app
    • cd my-app
    • npm start
    • http://localhost:3000/にアクセス

    View full-size slide

  53. 53
    しばしお勉強タイム
    「モダンJavaScriptの基本から始め
    るReact実践の教科書」
    • React実践の前に必須なモダン
    JavaScriptの基本から学べる
    • Reactの基本を網羅的に学べる
    • TypeScriptの活⽤も学べる
    • 最近のJavaScriptやTypeScriptが
    不安な⼈も⼀気にキャッチアップ
    できるのオススメ

    View full-size slide

  54. 54
    Next.jsとは︖
    Next.js(https://nextjs.org/)
    • Reactベースのプロダクション向けフレームワーク
    • 静的とサーバーでのハイブリッドレンダリング、
    TypeScriptサポート、スマートバンドル、ルーティ
    ングのプリフェッチなど、プロダクション運⽤に必
    要な機能を網羅したフレームワーク
    • 開発はVercel社

    View full-size slide

  55. 55
    Next.jsを試すには
    ローカル環境の構築は異常に簡単
    • Node.js環境の構築
    • お気に⼊りのエディタの⽤意(ハマコーはVSCode)
    • npx create-next-app nextjs-blog
    • cd nextjs-blog
    • npm run dev
    • http://localhost:3000/にアクセス

    View full-size slide

  56. 56
    しばしお勉強タイム
    「公式のStart Learning」
    • 英語
    • めちゃくちゃ良い
    • ReactからNext.jsまで全ての
    解説が網羅的になされている
    • DeepL使ってもなんでも良い
    ので特に解説書とかもってな
    ければ、確実にオススメ

    View full-size slide

  57. 57
    ここまで
    とりあえずReactとNext.jsの
    雰囲気がわかりました
    ほな、実際フロントエンド
    どうやって作りましょ︖

    View full-size slide

  58. 58
    Next.jsのexamplesにあるサンプルを利⽤
    cms-wordpress
    • A statically generated blog example using
    Next.js and WordPress
    • Vercel社作成のNext.jsとWordpressでSSGするサン
    プルリポジトリ
    • 背景として、これがGraphQLを使ってるから
    GraphQLのエンドポイントを⽤意してみた
    • npx create-next-app --example cms-wordpress cms-
    wordpress-app

    View full-size slide

  59. 59
    利⽤⽅法
    • プロジェクト作成
    • .env.localファイルの⽤意
    • モジュールインストールとローカルテスト
    • http://localhost:3000/にアクセス
    WORDPRESS_API_URL=https://example.com/graphql
    npx create-next-app --example cms-wordpress cms-wordpress-app
    npm install
    npm run dev
    先程作ったGraphQLの
    エンドポイント

    View full-size slide

  60. 60
    ビルドログ
    これでエラーが出なければ万々歳だけ
    れど、おそらく何かでるはず
    ググりながらなんとかしよう

    View full-size slide

  61. 61
    ハマコー環境ででたエラー
    next/image Un-configured Host
    • next.config.jsに画像で利⽤するドメインが設定され
    ていないために出るエラー
    • 以下の要領で、エラー⾒ながら利⽤ドメインを追加
    module.exports = {
    images: {
    domains: [
    process.env.WORDPRESS_API_URL.match(/(http(?:s)?:¥/¥/)(.*)/)[2], // Valid WP Image
    '2.gravatar.com’,
    'secure.gravatar.com’,
    'hamako9999.net’, // added domain
    '1.gravatar.com’ // added domain
    ],
    },
    }

    View full-size slide

  62. 62
    どうでしょう︖でたかな︖
    localhostだけれど、今まで
    WordPressの慣れた画⾯でみていたコ
    ンテンツが全く別のレイアウトで
    Next.jsで表⽰されると物凄く興奮し
    ます。
    この興奮、⼤事にしたいですね。

    View full-size slide

  63. 63
    作業⼿順3
    動作確認したNext.jsのサンプルを
    Amplifyにデプロイする

    View full-size slide

  64. 64
    ついに
    ここまで作ったNext.jsプロジェクトを
    AWS環境にデプロイします
    Amplifyの凄さに興奮しましょう

    View full-size slide

  65. 65
    Next.jsのデプロイに必要なものは︖
    単純に考えてもこれぐらいのリソースが必要
    • 静的ファイルの保存場所︓S3
    • S3格納の静的ファイルを配信︓CloudFront
    • 証明書︓Certificate Manager
    • デプロイのためのパイプライン︓CodePipeline
    • Next.jsでのビルド︓CodeBuild

    View full-size slide

  66. 66
    Next.jsのデプロイに必要なものは︖
    単純に考えてもこれぐらいのリソースが必要
    • 静的ファイルの保存場所︓S3
    • S3格納の静的ファイルを証明書つけて発⾏︓
    CloudFront
    • デプロイのためのパイプライン︓CodePipeline
    • Next.jsのビルド︓CodeBuild
    AWS Amplify

    View full-size slide

  67. 67
    AWS Amplifyとは

    View full-size slide

  68. 68
    AWS Amplifyとは
    正直できること多すぎて、全体像
    を掴むのに苦労しがち

    View full-size slide

  69. 69
    AWS Amplifyでできること
    以下の機能を組み合わせながら利⽤する
    • Amplify Studio
    • フルスタックアプリケーションの視覚的デプロイ
    • Amplify ライブラリ
    • 既存のAWSサービスへの接続
    • Amplify CLI
    • CLIワークフローでバックエンドを構成
    • Amplify ホスティング
    • コンテンツ配信ネットワークを介して、信頼性の⾼いウェブ
    アプリをホスト

    View full-size slide

  70. 70
    AWS Amplifyでできること
    以下の機能を組み合わせながら利⽤する
    • Amplify Studio
    • フルスタックアプリケーションの視覚的デプロイ
    • Amplify ライブラリ
    • 既存のAWSサービスへの接続
    • Amplify CLI
    • CLIワークフローでバックエンドを構成
    • Amplify ホスティング
    • コンテンツ配信ネットワークを介して、信頼性の⾼いウェブ
    アプリをホスト
    これを利⽤
    そしてこれが、異常に簡単
    で便利

    View full-size slide

  71. 71
    AWS Amplify利⽤⽅法

    View full-size slide

  72. 72
    AWS Amplify利⽤⽅法
    今回はこちら

    View full-size slide

  73. 73
    AWS Amplify利⽤⽅法︓リポジトリ選択

    View full-size slide

  74. 74
    AWS Amplify利⽤⽅法︓ブランチ設定
    デプロイ対象のブランチと
    monorepoの場合のディレ
    クトリを選択

    View full-size slide

  75. 75
    AWS Amplify利⽤⽅法︓ビルド設定
    CodeBuildのビルド設定が
    ⾃動的にセットされる
    正直、なんでかわからんが、
    ごっつええ感じで⼊ってる

    View full-size slide

  76. 76
    さてさて
    これでうまくいくかって︖
    そうは問屋がおろしませんよ

    View full-size slide

  77. 77
    エラー内容「バージョン不正」
    Next.jsのバージョン不正
    • VercelのサンプルはNext.jsのバージョンが12
    • 対して、Amplifyが対応しているNext.jsのバージョ
    ンは11.1.3が最新(2022年7⽉時点)
    • updating the Next.js version for an existing app

    View full-size slide

  78. 78
    対応「バージョン不正」
    対応するバージョンにpackage.jsonを変更

    View full-size slide

  79. 79
    エラー内容「環境変数設定」
    環境変数「WORDPRESS_API_URL」を設定する必要
    ありとのこと
    ローカル環境では、.env.productionに設定していれば
    動いていたけれど、なんで必要なのかよくわからん

    View full-size slide

  80. 80
    対応「環境変数設定」
    Amplifyのコンソールで、[アプリの設定] -> [環境変
    数]でビルド環境の環境変数を設定

    View full-size slide

  81. 81
    どうでしょう︖でたかな︖
    Amplifyの本番稼働URLにアクセスし、
    無事表⽰されるか確認。
    たったこれだけの⼿間で、ビルドパイ
    プラインと静的ファイルホスティング
    が動作するのはめちゃくちゃ興奮しま
    す。

    View full-size slide

  82. 82
    ドメイン管理
    構築後のURLにカスタムドメインの追加が可能
    ドメイン名だけでアクセスする場合は、
    ここをEnableに設定。
    サブドメインにはブランチ名を指定可
    能。ここではmainブランチをサブド
    メインにデプロイされるように設定

    View full-size slide

  83. 83
    ここまで
    だいたい喋りたいことの8割ぐらいは
    完了しました

    View full-size slide

  84. 84
    Aurora Serverless v2の導⼊

    View full-size slide

  85. 85
    Agenda
    • 移⾏前後の構成解説
    • 移⾏⼿順①︓Route 53とEC2の導⼊
    • 移⾏⼿順②︓Next.jsとAmplifyの導⼊
    • 移⾏⼿順③︓Aurora Serverless v2の導⼊
    • 移⾏⼿順④︓App Runnerの導⼊
    • 振り返りとまとめ

    View full-size slide

  86. 86
    作業前構成

    View full-size slide

  87. 87
    作業⼿順
    1. EC2の中にあったMySQLをAurora Serverless v2に
    外だし

    View full-size slide

  88. 88
    作業後構成
    Aurora Serverless v2が爆誕

    View full-size slide

  89. 89
    なぜAurora Serverless v2を
    使うのか︖

    View full-size slide

  90. 90
    Aurora Serverless v2とは
    AuroraのオンデマンドAuto Scaling設定
    • Auroraを事前のインスタンスタイプのプロビジョニ
    ングをせずに利⽤可能
    • アプリケーションニーズに基づいて⾃動的に起動、
    シャットダウン、スケールアップ・ダウン
    • 標準のAuroraとServerlessの設定変更は、インスタ
    ンスタイプの変更ぐらいの感覚で可能
    EC2とLambdaは完全に別物だけれど、AuroraとAurora
    Serverlessは使い勝⼿はほぼ同じなので、気軽に使っち
    ゃいましょう︕

    View full-size slide

  91. 91
    Aurora Serverless v2を使いたい理由
    Next.jsがSSG設定のため
    • Static Site Generationの略(静的サイト⽣成)
    • ビルド時にサーバ側でデータを取得しHTMLを⽣成
    • Amplifyであれば、CDN(CloudFront)にHTMLを
    格納

    View full-size slide

  92. 92
    Aurora Serverless v2を使いたい理由
    Next.jsがSSG設定のため
    • Static Site Generationの略(静的サイト⽣成)
    • ビルド時にサーバ側でデータを取得しHTMLを⽣成
    • Amplifyであれば、CDN(CloudFront)にHTMLを
    格納
    つまりは、アプリケーションサーバ
    経由のDBアクセスをビルド時のみ
    に限定できるのでは︕︕︖︖

    View full-size slide

  93. 93
    Aurora Serverless v2のACU推移
    ACU最⼩1〜最⼤6設定でのACU推移。最
    初のデータ移⾏時にはマックス6まで。そ
    の後の検証期間中は概ね2以内で推移

    View full-size slide

  94. 94
    CSR/SSR/SSG/ISRが学びたいそこのあなた
    https://zenn.dev/a_da_chi/articles/105dac5573b2f5

    View full-size slide

  95. 95
    作業⼿順1
    EC2の中にあったMySQLをAurora
    Serverless v2に外だし

    View full-size slide

  96. 96
    Aurora Serverless v2構築

    View full-size slide

  97. 97
    Aurora Serverless v2構築

    View full-size slide

  98. 98
    さてさて
    これでうまくいくかって︖
    そうは問屋がおろしませんよ

    View full-size slide

  99. 99
    エラー︓Capacity不⾜
    しばらく待っても駄⽬だったので、DBのサブネットグル
    ープを4AZに拡張し、作成に成功。こういうこともあるの
    で、VPCもDBサブネットにも4AZはとりあえず作ってお
    くのが良いすね。

    View full-size slide

  100. 100
    作成後のデータ導⼊
    従来のAuroraとほぼ同じ感覚で利⽤可能
    • EC2のMySQLからmysqldumpを実⾏
    • Aurora Serverless v2にデータインポート
    • wp-config.phpのDB接続先を変更して動作確認

    View full-size slide

  101. 101
    ここまで
    Aurora Serverless v2の導⼊で
    だいぶモダンな雰囲気になりましたね︕

    View full-size slide

  102. 102
    App Runnerの導⼊

    View full-size slide

  103. 103
    Agenda
    • 移⾏前後の構成解説
    • 移⾏⼿順①︓Route 53とEC2の導⼊
    • 移⾏⼿順②︓Next.jsとAmplifyの導⼊
    • 移⾏⼿順③︓Aurora Serverless v2の導⼊
    • 移⾏⼿順④︓App Runnerの導⼊
    • 振り返りとまとめ

    View full-size slide

  104. 104
    作業前構成

    View full-size slide

  105. 105
    作業⼿順
    1. WordPressコンテナを作成し動作確認
    2. ECRにイメージをプッシュ
    3. App Runnerでデプロイ

    View full-size slide

  106. 106
    移⾏後構成図
    App Runnerが爆誕
    (ECR経由でデプロイ)

    View full-size slide

  107. 107
    なぜApp Runnerを
    使うのか︖

    View full-size slide

  108. 108
    App Runnerとは
    フルマネージド型コンテナデプロイ環境
    • サーバー、ネットワーク、ロードバランサー、オー
    トスケーリング設定が不要
    • ECRプッシュからの⾃動デプロイが可能
    • VPCリソースへのアクセスも可能(2022年2⽉よ
    り)
    • もちろん、Aurora Serverless v2も利⽤可能

    View full-size slide

  109. 109
    App Runnerを使いたい理由
    Next.jsがSSG設定のため
    • プロビジョニングされアクティブではない場合、最
    低料⾦(⽉6.48USD)で利⽤可能
    • アクティブな場合、割り当てたvCPUとメモリの値で
    従量課⾦
    ビルドしない時は最低料⾦で利⽤可
    能︕(Fargateよりもちろん安い)

    View full-size slide

  110. 110
    App RunnerのActive instancesの推移
    Next.jsでのビルド時のみinstance
    が1つ起動し、それ以外は0に収束

    View full-size slide

  111. 111
    作業⼿順
    1. WordPressコンテナを作成し動作確認
    2. ECRにイメージをプッシュ
    3. App Runnerでデプロイ

    View full-size slide

  112. 112
    利⽤するDocker Image
    WordPress Official Image
    • WordPressを利⽤するとき頻出の設定が環境変数で設定
    可能
    • -e WORDPRESS_DB_HOST
    • -e WORDPRESS_DB_USER
    • -e WORDPRESS_DB_PASSWORD
    • テーマやプラグインを設定する専⽤ディレクトリも有
    • /var/www/html/wp-content/themes/
    • /var/www/html/wp-content/plugins/
    • 基本的にEC2にインストールしたWordPressと同じバー
    ジョンを使う

    View full-size slide

  113. 113
    Dockerfile例
    FROM wordpress:6.0.1
    COPY stinger3ver20130925/ /var/www/html/wp-content/themes/stinger3ver20130925/
    COPY wp-graphql/ /var/www/html/wp-content/plugins/wp-graphql/
    COPY uploads/ /var/www/html/wp-content/uploads/
    Dockefileは超シンプル
    EC2に新規でWordPressをインストールしヘッ
    ドレスCMSとして最⼩構成で構築したのは、
    WordPressをコンテナ化しやすくする背景もあ
    りました

    View full-size slide

  114. 114
    イメージビルドしてECRにプッシュ
    docker build -t hamako9999-blog:1.3 .
    docker tag hamako9999-blog:1.3 123456789012.dkr.ecr.ap-northeast-
    1.amazonaws.com/hamako9999-blog:1.3
    docker push 123456789012.dkr.ecr.ap-northeast-
    1.amazonaws.com/hamako9999-blog:1.3
    今回GitHubからECRへのイメージ
    ビルドとプッシュは⾃動化してない
    ですが、GitHub Actionsとか使って
    サクッとやれば、ソースコードから
    の⾃動デプロイも簡単に構築可能

    View full-size slide

  115. 115
    App Runnerの構築(基本部分)
    123456789012
    ソースコードからのデプロイに対応しているの
    は、Python、Java、Node.jsのみ
    (2022年7⽉現在)

    View full-size slide

  116. 116
    App Runnerの構築(プロビジョニング設定)
    ⾃分のサイトの規模(記事
    数110程度)であれば、こ
    れぐらいのスペックでも⼗
    分Next.jsのビルドは通る

    View full-size slide

  117. 117
    App Runnerの構築(環境変数)
    コンテナ使うとき必須の環
    境変数も、もちろん定義可

    View full-size slide

  118. 118
    App Runnerの構築(ネットワーク設定)
    VPCでApp Runner起動する場合、最初にVPCコ
    ネクタを作成し、その後起動するSubnetと
    SecurityGroupを設定

    View full-size slide

  119. 119
    App Runnerの構築(デプロイ完了)
    ⾃動的にECRからのプルとデプロ
    イが⾛る。事前にEC2で動作確認
    しておいたイメージから、App
    Runnerのデプロイでは、特にエラ
    ーはなかった

    View full-size slide

  120. 120
    Next.jsでのビルド再確認
    WORDPRESS_API_URIのエンドポイ
    ントを、App Runnerで払い出された
    ドメイン指定して、GraphQLのエンド
    ポイントからビルドが通ればOK。
    お疲れさまでした︕︕

    View full-size slide

  121. 121
    というわけでここにあるよ︕︕
    https://main.hamako9999.net/

    View full-size slide

  122. 122
    振り返りとまとめ

    View full-size slide

  123. 123
    移⾏前
    hamako9999.netを
    8年ほど前に購入
    VPSのIPアドレスを
    Aレコードを登録
    2013年9月に契約
    記事文中の画像はflickrに格納
    (MarsEditの機能で自動的にアッ
    プロード)

    View full-size slide

  124. 124
    移⾏①︓Route 53とEC2の導⼊
    ドメインのAレコードに
    EC2のEIPを指定
    EIPをアタッチしてパブ
    リックサブネットに構築
    PHP(Wordpress)、
    MySQLをインストール

    View full-size slide

  125. 125
    移⾏②︓Next.jsとAmplifyの導⼊
    Amplify上でNext.jsを動
    作させ、GraphQLで
    EC2にアクセス

    View full-size slide

  126. 126
    移⾏③︓Aurora Serverless v2の導⼊
    Aurora Serverless v2が爆誕

    View full-size slide

  127. 127
    移⾏④︓App Runnerの導⼊
    App Runnerが爆誕
    (ECR経由でデプロイ)

    View full-size slide

  128. 128
    まとめ
    WordPressをヘッドレスCMS前提の構成とし、Next.js
    のSSGを活⽤することで、モダンな構成を検討可能︕
    • Amplify ホスティング︓関連リソースを隠蔽し、Webサ
    イトのホスティングに特化
    • Aurora Serverless v2︓驚異のオンデマンドRDB。普段
    利⽤しなければコスト効率は⾮常に⾼い
    • App Runner︓フルマネージドコンテナサービス。普段
    利⽤しなければコスト効率は良い

    View full-size slide

  129. 129
    最後に伝えたいこと
    新時代のサービスが登場し、簡単にデプロイ
    でき、かつオンデマンドでスケールできるも
    のが充実してきたので、是⾮今⽇の内容をヒ
    ントにみなさんのアプリケーション構成を⾒
    直すきっかけにしてもらえればと思います︕

    View full-size slide