せっかく AWS を使い始めたので、今まで VPS で運用していた WordPress ブログを AWS 上に移行し、 GatsbyJS でサーバーレス化してみました。

発端

WordPress は広く使われているブログソフトウェアであり、簡単に使うことができるという利点がありますが、使っていくうちに以下のようなことを思うようになりました。

• ページが表示されるまで時間がかかる
• Jetpack 遅すぎ
• 不正なログイン試行多くね？
• 個人ブログだしもっとスリムでいいのでは？

つまり、パフォーマンスとセキュリティの面で思うことがあったという訳です。

セキュリティに関しては、特に気をつけなければならないなと常日頃から考えています。脆弱性突かれてサーバーいじられるようになったら終わりですからね。 /wp-login.php へのアクセスがとても多いのを見てどうしたものかと思いました。

静的サイトジェネレータ

GatsbyJS は静的サイトジェネレータの一種で、 Markdown ファイルなどから HTML ファイルなどを生成してくれます。生成されたファイルをそのままサーバーに上げればサイトが完成するという代物。

サーバーサイドで PHP やデータベースを走らせる必要が無いのでとても早いです。

生成したファイルをサーバーに上げるだけなので、ログイン画面も無い。そもそもサーバーはコンテンツを配信しているだけなのでセキュリティ工数が大幅に削減されます。

GitHub + AWS で自動化

GatsbyJS で書かれたブログは GitHub で管理しています。 GitHub Webhook と AWS CodePipeline 、 AWS CodeBuild を使えば、 GitHub に push されたときにビルドして Amazon S3 に配置後 AWS CloudFront のキャッシュを無効化する、といった工程をすべて自動化できます。

具体的な自動化の方法については以下を参考にしました。

基本的には上記の記事通りにやれば自動化システムは完成するのですが、ビルド環境に aws/codebuild/standard:2.0 を用いている場合、 buildspec.yml に runtime-versions をキチンと指定しないと動きません。

最終的な buildspec.yml は以下の通りになりました。

version: 0.2
phases:
  install:
    runtime-versions:
      nodejs: 10
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - aws s3 sync --exact-timestamps --delete public/ s3://blog.livewing.net
      - aws cloudfront create-invalidation --distribution-id ************** --paths '/*'

おわり

環境構築は WordPress などと比べて少し難しいですが、ちょっとした AWS の勉強になりますし、一度完成すればかなり快適です。

まだスタイルとかは調整中なので、ブログのデザインがコロコロ変わる可能性がありますがご容赦ください。

しかし GitHub に push するだけですべてを終わらせることができるのは素晴らしいです。今回は AWS を用いて組み上げてみましたが、 Netlify のようにお手軽にサイトの構築ができるサービスもあります。是非お試しください。