$30 off During Our Annual Pro Sale. View Details »

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事業部 濱⽥孝治(ハマコー)

  2. 2 自己紹介 濱⽥孝治(ハマコー) • CX事業本部 (元)MAD事業部⻑ • Japan APN Ambassador

    2020 • JAWS-UG コンテナ⽀部運営 • 好きなサービス︓ECS, EKS, CloudFormation • 好きな⾔葉「わっしょい」 • @hamako9999 • 最近ハマってるもの︓Vampire Survivors、プロ セカ(推しもいますが、30分全て⾷い潰すので今 ⽇は控えます)
  3. 3 いつものアレの時間ですよ

  4. 4 今回の登壇きっかけ VPS作ってWordPress運⽤してみたらめちゃくちゃ勉 強になったから • 前職でアプリエンジニアやってたが、インフラ⽅⾯ の知識が皆無だった • なんとかせねばと思い、VPSを契約しWordPressを インストールしまがりなりにも運⽤してみた

    • いろんなミドルウェアやLinuxのお作法が⾝につき異 常に勉強になった ぶっちゃけクラスメソッドへの 転職のきっかけの一つ
  5. 5 ということは 今このVPSを更にモダンにしたら めっちゃ勉強になるのでは︕︖

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

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

    Runner︓好きです • Aurora Serverless v2︓今回始めて触りました 途中泣きそうなぐらいつらかったけど、森茂先生 の協力の元なんとかなりました。この場を借りて お礼申し上げます!!
  8. 8 喋ること喋らないこと 喋ること • モダンな構成にしていくための構成の勘所 • 各技術要素とAWSサービスとの関連 喋らないこと • WordPress⾃体の詳細な解説

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

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

  11. 11 Agenda • 移⾏前後の構成解説 • 移⾏⼿順①︓Route 53とEC2の導⼊ • 移⾏⼿順②︓Next.jsとAmplifyの導⼊ •

    移⾏⼿順③︓Aurora Serverless v2の導⼊ • 移⾏⼿順④︓App Runnerの導⼊ • 振り返りとまとめ
  12. 12 移⾏前後の構成解説

  13. 13 Agenda • 移⾏前後の構成解説 • 移⾏⼿順①︓Route 53とEC2の導⼊ • 移⾏⼿順②︓Next.jsとAmplifyの導⼊ •

    移⾏⼿順③︓Aurora Serverless v2の導⼊ • 移⾏⼿順④︓App Runnerの導⼊ • 振り返りとまとめ
  14. 14 最初のインプット 移⾏前後の構成を把握して 話の流れを抑えておきます

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

  16. 16 さくらのVPSとは︖ • SAKURA internetが運営するVPS • VPSとは︖ • Virtual Private

    Server • ざっくり⾔うとサーバー⼀つを丸々利⽤できるサービス • 契約するとアクセス情報が払い出されて、SSHアクセスに必 要な鍵の設定やミドルウェアの導⼊などなんでも好きにでき る • AWSではLightsailがVPS相当 • 価格とスペックのバランスが良く、⾮常にナイスなサービ ス
  17. 17 さくらのVPS契約状況 • 利⽤期間︓2013/9/3〜 • 年払いで⽉1421円 • Nginxでリバースプロキ シキャッシュを⼊れてい れば、コレぐらいのスペ

    ックでも全然問題ない
  18. 18 アクセス数(PV) • ピーク時⽉間PV︓2016年7⽉に28万8千(今は6000程 度) • ⼀時期「モバイルバッテリー ⽐較」で検索2位に • 「ポケモン

    Go」が出たときめっちゃ売れた • 最後の記事更新は2017年11⽉ → 以後放置
  19. 19 その他サイト情報 • WordPress:4.9.20 • PHP︓5.6.18 • nginx︓1.10.2 • MySQL︓5.1.73

    • 格納記事数︓約110
  20. 20 移⾏後構成図 Value Domainから移行 WordpressのPHP部 分を移行 MySQLを移行 新規でNext.jsを構築 APIにGraphQL を利用

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

  22. 22 Agenda • 移⾏前後の構成解説 • 移⾏⼿順①︓Route 53とEC2の導⼊ • 移⾏⼿順②︓Next.jsとAmplifyの導⼊ •

    移⾏⼿順③︓Aurora Serverless v2の導⼊ • 移⾏⼿順④︓App Runnerの導⼊ • 振り返りとまとめ
  23. 23 ここでやりたいこと 移⾏のベース構築

  24. 24 ここでやりたいことの考え⽅ 今後の作業をスムーズに進めるため、環境を全てAWS に持ってくる • Route 53の導⼊ • ドメイン全て移⾏(ネームサーバーの移譲ではなく) •

    AmplifyやApp Runnerはカスタムドメインが設定できる ため、Route 53で管理したほうが何かと便利 • EC2の導⼊ • 各種AWSサービスを増やしながら動作確認するベースと して構築
  25. 25 作業前構成

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

  27. 27 移⾏作業︓Route 53の導⼊ センシティブな作業だけれど、AWSの公式ドキュメン トが⾮常に丁寧に作られているので、それに基づいて慎 重にやれば⼤丈夫 • 公式︓ドメイン登録の Amazon Route

    53 への移管 • VALUE-DOMAINやお名前.comなどからの移⾏であ れば、情報はいろいろ出てくる • EC2の導⼊前に独⽴して先にやるのが良い(VPSを運 ⽤している間は、Route 53のAレコードはVPSのIP アドレスにしておく)
  28. 28 移⾏作業︓Route 53の導⼊ https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/domain-transfer-to-route-53.html

  29. 29 移⾏作業︓EC2の導⼊ 実際やるとき、以下の2つで迷う • 案①︓VPSをまるまるEC2移⾏ • CloudEndure Migrationなどを利⽤してごっそり移⾏ • 案②︓新規でEC2構築

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

    • EC2を新規で構築し、そこにイチからミドルウェアをイ ンストールし、DBをインポートする ⼀⾒⾯倒くさそうだけれ どこちらを採⽤
  31. 31 案②︓新規でEC2構築 ヘッドレスCMSとして利⽤するため、WordPressを可能な限 り素の状態に戻しておきたかった • 運⽤が⻑いほど様々なカスタマイズやプラグインやテーマ が導⼊され、それに合わせてDBスキーマも変更されがち • ヘッドレスCMSとして使う場合、テーマや⼤部分のプラ グインは不要

    • DBをインポートした後、最新のWordpress(⾃分は 6.0.1)を起動し動作確認する • このとき、必要であればDBのスキーマ更新が⾃動的に⾛る • ヘッドレスCMSについては、後述
  32. 32 案②︓新規でEC2構築 公式の下記⼿順通りにやれば、1時間ぐらいで終了 • チュートリアル: Amazon Linux 2 に LAMP

    ウェブ サーバーをインストールする • チュートリアル: Amazon Linux 2 での WordPress ブログのホスト 後は、VPSからmysqldumpとかで 抜き出したデータをEC2のMySQLに インポートして管理画⾯が起動する ところまで確認
  33. 33 (余談)VPC作成ウィザードが神すぎた 昔のしか知らない⼈は ⼤興奮間違いなし︕︕

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

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

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

  37. 37 Agenda • 移⾏前後の構成解説 • 移⾏⼿順①︓Route 53とEC2の導⼊ • 移⾏⼿順②︓Next.jsとAmplifyの導⼊ •

    移⾏⼿順③︓Aurora Serverless v2の導⼊ • 移⾏⼿順④︓App Runnerの導⼊ • 振り返りとまとめ 個⼈的に⼀番 楽しかったやつ
  38. 38 ここでやりたいこと WordpressをヘッドレスCMSとして 利⽤する⼿段を検討し 検証しながら構築する

  39. 39 作業前構成

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

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

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

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

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

    • React
  45. 45 WordPressのヘッドレスCMS化に必要なもの WordPressでのAPIの提供⽅法は⼤きく2つ 1. WordPress REST API • 以前はプラグインとして提供されていたが2016年12⽉ にリリースされたWordPress4.7から正式に採⽤された

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

    • デフォルトで有効化されている 2. WPGraphQL • GraphQLのエンドポイントをWordPressに作成するプラ グイン • オープンソースだがドキュメントも⾮常に充実していて 良い こちらを採⽤
  47. 47 WPGraphQL • https://www.wpgraphql.com/ • メインスポンサーはWP Engine社 • WordPressのマネージドホスティング サービスのパイオニア

    • インストールするだけでGraphQL エンドポイントが⽣える https://example.com/graphql • GraphQL実⾏専⽤IDEが付属 • ドキュメントが⾮常に充実 • Getting StartedやGuideが完璧 • 単なるプラグインのページの域を超え ている
  48. 48 WPGraphQL クエリの履歴管理、Query Composerなどもあり、超絶便利

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

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

  51. 51 Reactとは︖ React(https://ja.reactjs.org/) • ユーザーインターフェース構築のためのJavaScript ライブラリ • 宣⾔的なView、コンポーネントベース、どこでも使える (React Native)

    • 開発はFacebook(Meta社) • ⽇本語めっちゃ充実しているので、学習は公式サイ トだけでいけそう
  52. 52 Reactを試すには ローカル環境の構築は異常に簡単 • Node.js環境の構築 • お気に⼊りのエディタの⽤意(ハマコーはVSCode) • npx create-react-app

    my-app • cd my-app • npm start • http://localhost:3000/にアクセス
  53. 53 しばしお勉強タイム 「モダンJavaScriptの基本から始め るReact実践の教科書」 • React実践の前に必須なモダン JavaScriptの基本から学べる • Reactの基本を網羅的に学べる •

    TypeScriptの活⽤も学べる • 最近のJavaScriptやTypeScriptが 不安な⼈も⼀気にキャッチアップ できるのオススメ
  54. 54 Next.jsとは︖ Next.js(https://nextjs.org/) • Reactベースのプロダクション向けフレームワーク • 静的とサーバーでのハイブリッドレンダリング、 TypeScriptサポート、スマートバンドル、ルーティ ングのプリフェッチなど、プロダクション運⽤に必 要な機能を網羅したフレームワーク

    • 開発はVercel社
  55. 55 Next.jsを試すには ローカル環境の構築は異常に簡単 • Node.js環境の構築 • お気に⼊りのエディタの⽤意(ハマコーはVSCode) • npx create-next-app

    nextjs-blog • cd nextjs-blog • npm run dev • http://localhost:3000/にアクセス
  56. 56 しばしお勉強タイム 「公式のStart Learning」 • 英語 • めちゃくちゃ良い • ReactからNext.jsまで全ての

    解説が網羅的になされている • DeepL使ってもなんでも良い ので特に解説書とかもってな ければ、確実にオススメ
  57. 57 ここまで とりあえずReactとNext.jsの 雰囲気がわかりました ほな、実際フロントエンド どうやって作りましょ︖

  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
  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の エンドポイント
  60. 60 ビルドログ これでエラーが出なければ万々歳だけ れど、おそらく何かでるはず ググりながらなんとかしよう

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

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

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

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

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

    • Next.jsのビルド︓CodeBuild AWS Amplify
  67. 67 AWS Amplifyとは

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

  69. 69 AWS Amplifyでできること 以下の機能を組み合わせながら利⽤する • Amplify Studio • フルスタックアプリケーションの視覚的デプロイ •

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

    Amplify ライブラリ • 既存のAWSサービスへの接続 • Amplify CLI • CLIワークフローでバックエンドを構成 • Amplify ホスティング • コンテンツ配信ネットワークを介して、信頼性の⾼いウェブ アプリをホスト これを利⽤ そしてこれが、異常に簡単 で便利
  71. 71 AWS Amplify利⽤⽅法

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

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

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

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

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

  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
  78. 78 対応「バージョン不正」 対応するバージョンにpackage.jsonを変更

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

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

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

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

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

  84. 84 Aurora Serverless v2の導⼊

  85. 85 Agenda • 移⾏前後の構成解説 • 移⾏⼿順①︓Route 53とEC2の導⼊ • 移⾏⼿順②︓Next.jsとAmplifyの導⼊ •

    移⾏⼿順③︓Aurora Serverless v2の導⼊ • 移⾏⼿順④︓App Runnerの導⼊ • 振り返りとまとめ
  86. 86 作業前構成

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

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

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

  90. 90 Aurora Serverless v2とは AuroraのオンデマンドAuto Scaling設定 • Auroraを事前のインスタンスタイプのプロビジョニ ングをせずに利⽤可能 •

    アプリケーションニーズに基づいて⾃動的に起動、 シャットダウン、スケールアップ・ダウン • 標準のAuroraとServerlessの設定変更は、インスタ ンスタイプの変更ぐらいの感覚で可能 EC2とLambdaは完全に別物だけれど、AuroraとAurora Serverlessは使い勝⼿はほぼ同じなので、気軽に使っち ゃいましょう︕
  91. 91 Aurora Serverless v2を使いたい理由 Next.jsがSSG設定のため • Static Site Generationの略(静的サイト⽣成) •

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

    ビルド時にサーバ側でデータを取得しHTMLを⽣成 • Amplifyであれば、CDN(CloudFront)にHTMLを 格納 つまりは、アプリケーションサーバ 経由のDBアクセスをビルド時のみ に限定できるのでは︕︕︖︖
  93. 93 Aurora Serverless v2のACU推移 ACU最⼩1〜最⼤6設定でのACU推移。最 初のデータ移⾏時にはマックス6まで。そ の後の検証期間中は概ね2以内で推移

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

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

  96. 96 Aurora Serverless v2構築

  97. 97 Aurora Serverless v2構築

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

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

  100. 100 作成後のデータ導⼊ 従来のAuroraとほぼ同じ感覚で利⽤可能 • EC2のMySQLからmysqldumpを実⾏ • Aurora Serverless v2にデータインポート •

    wp-config.phpのDB接続先を変更して動作確認
  101. 101 ここまで Aurora Serverless v2の導⼊で だいぶモダンな雰囲気になりましたね︕

  102. 102 App Runnerの導⼊

  103. 103 Agenda • 移⾏前後の構成解説 • 移⾏⼿順①︓Route 53とEC2の導⼊ • 移⾏⼿順②︓Next.jsとAmplifyの導⼊ •

    移⾏⼿順③︓Aurora Serverless v2の導⼊ • 移⾏⼿順④︓App Runnerの導⼊ • 振り返りとまとめ
  104. 104 作業前構成

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

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

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

  108. 108 App Runnerとは フルマネージド型コンテナデプロイ環境 • サーバー、ネットワーク、ロードバランサー、オー トスケーリング設定が不要 • ECRプッシュからの⾃動デプロイが可能 •

    VPCリソースへのアクセスも可能(2022年2⽉よ り) • もちろん、Aurora Serverless v2も利⽤可能
  109. 109 App Runnerを使いたい理由 Next.jsがSSG設定のため • プロビジョニングされアクティブではない場合、最 低料⾦(⽉6.48USD)で利⽤可能 • アクティブな場合、割り当てたvCPUとメモリの値で 従量課⾦

    ビルドしない時は最低料⾦で利⽤可 能︕(Fargateよりもちろん安い)
  110. 110 App RunnerのActive instancesの推移 Next.jsでのビルド時のみinstance が1つ起動し、それ以外は0に収束

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

  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と同じバー ジョンを使う
  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をコンテナ化しやすくする背景もあ りました
  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とか使って サクッとやれば、ソースコードから の⾃動デプロイも簡単に構築可能
  115. 115 App Runnerの構築(基本部分) 123456789012 ソースコードからのデプロイに対応しているの は、Python、Java、Node.jsのみ (2022年7⽉現在)

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

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

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

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

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

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

  122. 122 振り返りとまとめ

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

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

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

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

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

  128. 128 まとめ WordPressをヘッドレスCMS前提の構成とし、Next.js のSSGを活⽤することで、モダンな構成を検討可能︕ • Amplify ホスティング︓関連リソースを隠蔽し、Webサ イトのホスティングに特化 • Aurora

    Serverless v2︓驚異のオンデマンドRDB。普段 利⽤しなければコスト効率は⾮常に⾼い • App Runner︓フルマネージドコンテナサービス。普段 利⽤しなければコスト効率は良い
  129. 129 最後に伝えたいこと 新時代のサービスが登場し、簡単にデプロイ でき、かつオンデマンドでスケールできるも のが充実してきたので、是⾮今⽇の内容をヒ ントにみなさんのアプリケーション構成を⾒ 直すきっかけにしてもらえればと思います︕

  130. None