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

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

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の提供⽅法は⼤きく２つ 1. WordPress REST API • 以前はプラグインとして提供されていたが2016年12⽉ にリリースされたWordPress4.7から正式に採⽤された • デフォルトで有効化されている 2. WPGraphQL • GraphQLのエンドポイントをWordPressに作成するプラ グイン • オープンソースだがドキュメントも⾮常に充実していて 良い
46. 46 WordPressのヘッドレスCMS化に必要なもの WordPressでのAPIの提供⽅法は⼤きく２つ 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 最後に伝えたいこと 新時代のサービスが登場し、簡単にデプロイ でき、かつオンデマンドでスケールできるも のが充実してきたので、是⾮今⽇の内容をヒ ントにみなさんのアプリケーション構成を⾒ 直すきっかけにしてもらえればと思います︕