人間のあるべき姿の探索

思索・人形・エンジニアリング

ポートフォリオを自分で作る

できたもの

https://portfolio.yumenohadaly.net/

背景

エンジニアたるもの…と思って作りました。

要件として、細々と自己紹介や作品を載せる程度のものを想定してはいたのでポートフォリオのサービスの利用を考えたのですが、デザインは自分で決めたい（コンテンツ管理を楽にしたい！）ことや、ドメインを自分で決めたいことから、自作に至りました。ただ、お金をかけすぎるのも負担になるので節約できる構成を考えました。

仕組み

使用経験がある程度あるAzureにアプリケーションを配置する前提のもと、フロントの画面をReact.js、コンテンツ管理の為のバックエンドをC#、コンテンツをSQL DB及びStorage Accountというストレージに配置する構成をとりました。

基本的には節約を第一に据えました。まず、フロントアプリはStatic WebAppに配置することでほぼ無料でホスティングできます。静的Webサイトに限られますが、コンテンツをバックエンドから取得する方式かつコンテンツ表示に徹するシンプルなサイトなのでこれでクリアできました。また、Azure Functionsは消費プランだと月4000呼び出しまで無料、その後も呼び出しのコストはとても小さい為何とかなりました。

　問題はデータの永続化で、一年くらいAzure CosmosDBというドキュメントDBサービスの無料プランでやりくりしていたのですが、まともなデータの構造化ができないのは開発体験や保守性に影響すると考え、SQLに移行しました。アクセス数は少ないですが1~2秒以内の待機時間で画面表示されてほしいのでSQLのプランは月5.5USドル程度のものにしました。円安なのでちょっと厳しいですが、月1000円以内ならまぁ遊びで動かすサービスの保守としていいかな…という判断です。

　また、別途ドメインが年間1600円ほどかかっています。こちらはAzureでWebアプリケーション用のドメインを購入できるもので、お名前ドットコムなど外部で取得するよりもAzure内での設定ができる点などからこのソリューションを選択しました。.netドメインが一番まともに使われていてかつ安価だったので、自分の名前のドメインを確保しておきました。本当はメールアドレスのドメインにも使えると便利ですが、今はその予定もないですしそういうサービスが必要なら別途取得で良いかと思い、Webページ専用のドメインサービスになります。

フロント構成

　とりあえず、自己紹介ページ・作品一覧・イベント一覧及びコンタクトが表示できれば良いと思い、ポートフォリオのテンプレートにコンテンツ表示用のコンポーネントを自作して追加するようにしました。こちら参考にさせていただきました。作成者およびMITライセンスに感謝…

　複数コンテンツの表示に関しては、ChatGPTの力を借りつつバックエンドから取得したコンテンツをforeachで回してコンポーネントを生成する仕組みで実現しました。

github.com

バックエンド・DB構成

バックエンドはシンプルにデータベースのコンテンツを成形してフロントに返す仕様となっています。コンテンツとしては作品及びイベントです。イベントはタイトル・画像・本文等を格納するのみなのですが、作品については複数の画像を持つほか動画も載せたいという要望が顧客もとい自分から上がっていたので対応が必要でした。解決法としては、SQL DBとしては作品テーブルのIDを外部キーとして持つ作品メディアテーブルを作成し、メディアの種別を画像と動画に分けました。そして、画像はStorage Accountに配置したのですが、動画に関してはデータストアから取得したものをフロント画面に埋め込むのも難しく、コンテンツ管理に難があるのでYouTubeのURLを格納する形としました。動画コンテンツはYouTubeにアップロードしていることが多いので、これをそのまま使用するのが一番シンプルな構成となりました。

今後の展開

　ユーザー数が少ないサービスなので、一旦はこの構成で行きます。SQL DBも一人で使うにはオーバースペックなので複数人のポートフォリオのコンテンツ管理とかしてマネタイズできると嬉しいですが、その辺りのコミュニケーションや要件定義・保守コストが大きいので細々と貯金を使っていこうと思います。

　細かい部分では、イベントの日付がfrom toではなく1日だけ設定だったり、直さないといけない部分はポロポロとあるので、少しずつ良くしていこうと思います。フロント側はStatic WebAppを使っている関係で構成が特殊なので、GitHub Actionsでデプロイを自動化していて、CI/CDはパッとできるので、少しずつ良くする仕組み作りだけは済ませてあります。

 　作品も細かいものを含めると結構な点数になりそうなので、ハイライトとして見せたい代表作を抜き出したり、カテゴリで人形・ロボット・小物など分けても良さそうです。

　あと、実はコンテンツ管理システムが欲しいといいつつ管理者用の管理機能が付いておらず現状SQL DB上のデータをSSMSで直接弄っているので、管理画面と対応するWeb APIのエンドポイントが必要です。実質ポートフォリオ画面が二つになりつつファイル選択などの機能も必要になり、開発コストが大きくなるのでこれはまた今度ですね…元々フロントエンド書かない人間なので、最近のライブラリの動向も追いつつ鍛えたい所存です。