はじめに

本Portfolioを構築するにあたって、どのようにアーキテクチャを選定したか解説していきます。

フロントエンド

使用言語

フロントエンドの技術を選定するにあたって、慣れ親しんだTS/HTML/CSSで開発することにしました。今となってはAIコーディングを前提として別言語で書いてみてもいいかもなー、とも思ったのですが、またの機会にします。

フレームワーク

フレームワークはNuxtを利用しています。現在はNuxt3を利用していますが、時間がある時にNuxt4に移行しようと考えています。

バックエンド・データベース

現状バックエンドは作成していません。強いていうなら画像管理のために、AWSのS3を利用してURLをデータベースで管理するようにして、そのためのCRUD処理を書いてもいいかな、くらいの感じでしたが、現状パフォーマンス的にも必要ないかな、と感じています。その分追加コストもかかりますしね。今後の画像・ブログテキストを含む用量と追加機能によっては、構築を検討します。

インフラストラクチャ

ドメイン

ドメインの管理にはお名前ドットコムを利用しています。AWSのRoute 53を採用することも検討しましたが、シンプルに1年間無料だったので前者にしました。1年経過毎に千円程の更新料といくらかの手数料がかかるそうですが、このサイトに必要な維持費は現状それだけです。

デプロイ環境にはGitHub Pagesを利用しています。選定理由はデプロイが簡単なのとシンプルに無料だからです。これを利用するならお名前ドットコムでドメインを維持する必要ないか？と思われるかもしれませんが、単純に「motokifujino.com」を入力するだけで自分のサイトを閲覧できるのは便利だからです。今後の展望によっては、AWSのECR・ECSを利用することも考慮していいかもしれません。

CI/CD

CI/CDはGithub Actionsを利用しています。こちらも無料なので、もし仮に他のリソースをパブリッククラウドに移行しても、自分はこれの利用を続けると思います。

まとめ

技術選定の軸としては：

自分がやりたいように
できるだけ安く
将来性を考慮して

こんな感じです。他のプロジェクトを始める際も、この観点を忘れずに始められたらと思います。