このサイトは、私のブログ、ポートフォリをサイトとして公開しています。
私自身の紹介は、ABOUTページに掲載しています。
技術スタック
このウェブサイトを新規に立ち上げるにあたり、技術構成の検討を行い実装しました。
これについて、この記事でまとめたいと思います。
技術構成要件
検討した際の主なポイントは以下のとおりです。
- 記事エディタはWordpressを使いたい
- WordPressは、CMSとして使用しフロントエンドと切り離したい
- 画像はCDNで配信したい
- 契約のあるレンタルサーバーを活かしたい
- 追加コストをなるべく掛けたくない
そのうえで、実装した構成は以下としました。
構成
バックエンド
- WordPress – Headless CMS として使用
- データ連携
- GraphQL
- 画像
- .jpeg、.webpの生成
- 配信
- S3 ＋ CloudFront
- CloudFront function で環境に応じて.webp パスを返すように設定
- S3 ＋ CloudFront
- データ連携
画像を、webp形式のみでも良さそうにおもいましたが、一部の Safari向けに、CloudFront functionを用いて JPEG 形式の画像を返すように設定しました。
フロントエンド
- Framework
- React, NEXT.JS
- CSS
- vanilla-extract
フロントエンドは、NEXT.JS でSSGにしました。
CSS は、app Router との相性などあり vanilla-extract を使用することにしました。
ホスティング
- レンタルサーバー
- heteml
今回SSGであることと、既にあるインフラを活かしたいためレンタルサーバーにしました。
将来的にはS3に移行することを検討。
CI/CD
- Github Actions
- ビルド後、rsyncでレンタルサーバーへデプロイ
今回挑戦したこと
ああああ
課題
ああああ
まとめ
自分のウェブサイトを新規に作成するに当たり、すでにあるインフラを活かしつつモダンな構成にしたく、今回はこのように構成を作成しました。
この規模のサイトだと、AWSもGithub Actionsの利用も無料の範囲で使えそうでありがたいです。
それでは。