【Nuxt + Strapi】ポートフォリオサイトの構成について

投稿日

2022/03/20

- 技術
- 個人開発
- Nuxt.js
- Strapi
- AWS

概要

こちらの記事では当ポートフォリオサイトの構成についてざっくり説明しようと思います。

使用技術

このサイトはAWS上に構築されており、CMSはStrapi、フロントはNuxt.jsを使用しています。

リニューアル前はWordPressをHeadlessCMSとして使用し、フロントはNuxt.jsでCircleCIを利用したSSGでページの出力を行なっていました。
詳細はこちらの記事にまとめていますので、もし宜しければご覧ください。

今回リニューアルを行うにあたり、フロント側は使い慣れたNuxt.jsをそのまま使用し、それまで経験のなかったSSRでサイトを構築しようと思いました。
また、ブログなどコンテンツの拡充も図りたかったので、いくつかのHeadlessCMSの候補の中からStrapiを選択しました。
Strapiは自身で投稿できるコンテンツを細かくカスタイズできたり、GraphQLの導入が容易だったため、今回使用していこうと思いました。
また、Nuxt.jsについてもリニューアル前はv2を使用していましたが、リニューアル後はv3を使用しました。
導入当時はパブリックベータ版だったので不具合などもありましたが、比較的スムーズに使用できたと感じました。
この辺りの知見などは、また別の記事で書いていきたいと思っています。