作成した背景
どうも、駒澤大学グローバル・メディア・スタディーズ学部の１年生のRikuです。
しっかりと記事を書くこと自体が初めてのため、簡単に自己紹介もかねて、この記事の概要を説明したいと思います。
自分は、普段、HackTheBoxやTryHackMeをメインにオフェンシブセキュリティ（攻撃側視点のセキュリティ）を学びながら、将来はペネトレーションテスターなることを目指し、日々デモサーバーを解いているのですが、大学では「Komatechプログラミング研究会」に所属しており、自分でプロジェクトを立ち上げたり、いろいろ技術選定をしています。今は「プロジェクト管理部門のテックリーダー」的なことをしてます。
そんな中、サークル代表に「クリエイティブフェスティバル（のちの藝苑祭）のためのWebサイト作成できませんか」と相談を受けました。現状開発できるプログラマーが少ない以上、自分がたまたま、セキュリティの勉強の過程でWeb開発もしていたため、「これは自分にしかできないじゃん」と思い、今回、藝苑祭のWebサイトを爆速で開発しました。
実際のWebサイトになります
https://geien-fes.vercel.app/
この記事では、その開発過程や技術的な工夫についてご紹介していきます。
技術選定
フロントエンド
- Next.js
Reactを使ってWeb開発するなら、定番並みのWebフレームワークですね - v0 by Vercel
今回、個人開発であり、デザインを考えるのが苦手だったので、使用してみました - shadcn/ui
無難にReactの代表的なUIコンポーネントを使用し、カラーはTailwindCSSで編集しました - Framer motion
動作をつけたいなあと思い、使いました
バックエンド
- MicroCMS
今回は短期のイベントであるため、PostgreSQLやMySQLなどのデータベースを使う必要もなく、誰でも作品の管理ができることを想定して、使用することを決めました - Vercel
デプロイで使用しました
この他にも、アクセスログやセキュリティ対策、パフォーマンスも観察したかったので、
Vercel Web Analytics、Vercel Speed Insights、Web Application Firewallを使いました - Zod
API間スキーマ定義や検索ボックスにおけるスキーマ定義に使用しました - Github
ソースコード管理やVercelとGitHubのCI/CDで使用しました
開発の詳細&注意したこと
1 フロントエンド
フロントエンドに関しては、代表に相談されて、期限が２週間ぐらいで(実はもっと先にリリースしても、良かったらしい)、尚且つコード書ける人が自分かサークル代表ぐらいしかいなかったため、自分だけで請け負いました。そこでAIを使って、業務の高速化をした方が良いなと思い、v0 by Vercelで要件定義、基本設計を記述したスプレットシートをかまして、Webサイトのテンプレートを作成した後に、厳密な修正は自分で書き足すようにして、開発しました。あとはちょっと動きも入れたいなと思い、和風の傘も追加しました
しかし、AIを使う以上、想定もしていないようなコードを生成したり、ハルシネーション(バージョンの古い書き方やライブラリの使用)が存在するため、一歩、間違えたら相当めんどくさくなるのは、目に見えていたため、抽象度の高い要件定義はせずに、具体的な要件定義、基本設計を作成することでめんどくさくなるようなコードは吐かずに済みました
2 バックエンド
バックエンドに関しては誰でも運用ができるようにMicroCMSを使用したため、SupabaseのPostgreSQLやMySQLなどに存在するSQL文を書くことはなく、比較的、簡単に構築できました。また、Zodでスキーマ定義もしたため、安全な型定義ができたのかなと思いました。Vercelでデプロイし、ログも収集できたので、客観的にもどうだったのかもわかったので、結果として良かったのかなと思ってます。
やはり、学生でサークルからの費用が降りない以上、有料のVPSやAWSなどのクラウドサービスは使えないため、ノーコストで使えるものだけを選定し、作りました。また、学内とは言えど、異常なレスポンス、セキュリティの脅威はあるため、後学として対策はした方が良いかなと思いました。今回、作品が二桁もいかないような数だったため、CMSの限界まで全然耐えたので、そこは安心しました
デプロイ後
デプロイまでは簡単にできたのですが、やはり、Web開発経験が少ない以上、運用を考えた設計したとしてもログ監視やログ回収などのところに目がいってなかったため、再実装を考えるとヒヤヒヤしましたが、たまたまVercelで簡単に実装できるようになっていたため、大変助かりました
あとは、GithubとVercelがCI/CDで連携していたため、急な変更があっても、pushと同時にデプロイ先のWebサイトに反映されていため、結構楽でした
運用段階での話
運用中は、アクセスログやWebサイトのパフォーマンスを観察していました。また、急なWebのトラブルがあった際に対応していました
幸いにも、あまり運用段階でトラブルが少なく、パフォーマンスも安定していたため、特に大きく変更がなかったのは良かったです。
感想
このぐらいの小規模のサービスであれば、ノーコストで作れるため、爆速でイベント用のWebを構築したい方はおすすめです。自分がたまたま、Next.jsとReactを使っていたから、v0で開発できたので、オフェンシブセキュリティを勉強していたとしても、やっぱりNext.jsを勉強しておくだけ、ここまでやれる幅が大きくなるんだと正直、痛感しました
最後に
今回、4日間の藝苑祭にお越しいただいた方々、足を運んでいただき誠にありがとうございました。まだまだ、小規模なイベントではありますが、今後はもっと大きな学園祭にもっていけるようにWebサイトも充実させ、頑張ろうと思います！