『【Amazon3時間クッキング】材料費500円でAWSにWordPress環境を構築するレシピ』を参考に、さくらのVPCで公開していたWordPressのサイトをAWSに移行し、WordPressのHeadless化も試してみました。

なぜやったか

AWSを触りながら勉強したかったのでさくらのVPCからAWSに移行しました。
また、WordPressの管理画面は使いながらサイトを閲覧するときはもっと早くようにしたいと思っていたためにWordPressをHeadless化しました。

移行したブログはもともとWordPressを勉強のために使ってみたくて始めたブログで、全然更新できていませんでした。

英語の勉強にもなると思い、外国人向けに英語で書いた日本語学習サイト(Hello Japanese)です。ネコでもわかる！さくらのVPS講座を読みながら2018年に公開しました。Adobe Illustratorの練習も兼ねようと絵も入れているのですが、英語と絵に時間がかかるのでなかなか更新できていません。　　

なかなか更新はできていませんが、今後もこのサイトを通じて学んでいけたらと思っています。

なにをしたか

AWSにWordPress環境を構築し、サイトを移行

前述の記事を参考にしてAWSにWordPress環境を構築し、さくらのVPCからデータ移行しました。

移行にはAll-in-One WP Migrationのプラグインを用いました。途中アップデートサイズの問題がありましたが、『All-in-One WP Migrationでアップロードファイルサイズを上げる方法』を参考にプラグインで解決しました。

WordPressをHeadless化

WordPressをHeadless化するのは『Gatsby + Netlify + WordPressでHeadless CMS化してみた。』を参考にしました。

以下の図のような感じです。

パブリックサブネットにはEIPを設定して公開しており、ブログを公開する際はそこからWordPressの管理画面に入ります。
JAMstack Deploymentsプラグインを用いて、ブログを更新するとNetlifyがビルド、デプロイして公開するようにしています。ビルドの際にはGatsbyで静的サイトを生成します。

閲覧者はNetlifyで公開されたサイトからブログを閲覧することになるので、Custom domains | Netlify Docsを参考にして以前からのドメインをカスタムドメインとしてアクセスできるように使えるように設定しました。

AWSのサービスだけで完結できると思うのですが、変な形になってしまいました。

AWSはサービスの量が膨大でどこから手をつけたらいいのかわからなくなりそうですが、少しずつ使っていって関連する部分から始めていくのがいいと思いました。まずは使ってみるというのがよさそうです。
Netlifyは便利です。Netlify Formsでフォームが簡単に作れたり、Functionsを使ってLINEボットを作れたりもします。(FunctionsはAWS Lambdaが基盤になっているようです。)

GatsbyはReactを基にしたフレームワークです。この中でGraphQLにも触れることができたこともよかったです。

参考