ページトップ
ナビゲーション
コンテンツ
2021.4 - 8
shunhiro.com
Web Page / JAMStack System
使用言語/ツール: Nuxt.js、Firebase Hosting / Realtime Database / Authentication / Functions、CircleCI、Compute Engine、Linux、Node.js、Twitter API、XD
シンガーソングライター しゅんひろさんのホームページの制作
Webデザインから実装まで一貫して開発
フレームワークとしてNuxt.jsを使い、サーバサイドジェネレーション(SSG)をすることでホームページとして最適化した。
それに加えて、ユーザがTwitterで「#しゅんひろ応援」のハッシュタグをつけてツイートすると、ホームページに掲載される。
Webサイトのデータはしゅんひろさん本人が行える、CMSとなっている。管理者画面からログインすることで、各種データの更新ができ、公開ボタンを押すことで自動的にページが更新される。
Link: shunhiro.com
技術的な詳細
Nuxt.jsのホスティングはFirebase Hostingで行っており、CircleCIで静的サイトとしてビルド(SSG)し、デプロイしている。
管理画面(CMS)はNuxt.jsをSPAモードで実装した。データベースにはFirebase Realtime Databaseを使っている。デプロイボタンを押すと、Firebase Cloud Functions経由でデータベースを更新し、CircleCIのビルドとデプロイを行うワークフローをトリガーする。ビルド時にはデータベースからデータを取得し、ページをレンダリングするJamstackになっている。
ハッシュタグ付きツイートの表示は、TwitterのストリーミングAPIでハッシュタグ付きツイートを監視し、該当するツイートがあった場合用意したbotにRTさせている。このbotをしゅんひろさんのアカウントで作成したリストに追加し、そのリストをページに埋め込んでいる。なお、この処理はGoogle Compute EngineのLinuxインスタンス上でNode.jsで動作している。
アーキテクチャ
管理者ページ