Nuxt + GCP で運用するホームページ
弊社のホームページを Nuxt で公開しようと考えたきっかけと、技術的な背景を簡単に説明します。
自分たちのフィールドで作りたい
あまりにも無個性なホームページを公開し続けていたため、ある時意を決してリニューアルをすることにしました。しかし、私たちらしいホームページとは何ぞ。
想い
過去に WordPress でのホームページ制作を請け負っていたこともありましたので、当時公開したホームページは WordPress で公開していましたが、2020 年に業務の取捨選択を行い、ホームページ制作の受託をやめましたので、その頃から自分たちなりのホームページの公開をしようと考え始めました。
静的 HTML
最初に検討した案は 100% 静的 HTML の超軽量サイトです。
企業様案件が多く担当者同士でつながっており、対外的に掲示する「お知らせ」もほぼ更新していないくらいですので、これで十分役割は果たすなと考えましたが、私たちらしさが微塵もないということで見送りました。
- ほぼ更新しないので仕様的には全く問題ない
- 私たちらしさがまるで無い
ウェブアプリケーション
次に検討したのは Nuxt + Firebase (GCP) を用いて、普段私たちが構築しているウェブアプリケーションとして公開する手法です。
これぞ「私たちならではのサイト」かなと思いもしますが、私たちの業務で大きな割合を占めるのがアプリケーション（利用者側）ではなく、そのシステムを管理する画面（管理者側）の比重がとても高く、愚直に構築するなら「ホームページ（利用者側）2〜3 割、管理画面（管理者側）7〜8 割」というコストがかかる見込みとなります。そのような理由で見送りました。
- コストに見合っていない
- 初学者に学習目的で構築を委ねるのはいいと思う
データベースを用いないウェブアプリケーション
最終的に行き着いたのは「データベースを用いないウェブアプリケーション」です。具体的には Nuxt + nuxt/content ライブラリを用いて静的ファイルを更新しデプロイすることで、ウェブアプリケーションとして振る舞いつつも、ローコストかつ少ない手間で更新できるという一挙両得の案となります。
- ごくシンプルな Nuxt アプリケーションを構築するだけ
- 管理画面は不要、投稿はマークダウン形式のテキストファイルで管理
他のメリットは以下の通り。
- SSR レンダリングで SEO 的に問題のないウェブサイトとして成立
- 投稿は全文検索にも対応（ただし nuxt/content 管理下のものに限る）
- git push で GCP にデプロイ
- 従量課金でありアクセスが少なければ維持費用も少ない
- そのうち多言語対応もする
システム構成
開発環境
- Node 18 系、Visual Studio Code、GitHub
フレームワーク
- Nuxt 3、Vuetify 3
ライブラリ
- nuxt/content、firebase、i18n
ヘルパー
- ESLint、Prettier
デプロイ
- GitHub Actions
公開先/公開方法
- App Engine、Cloud Build、Cloud Functions
その他
- GMail（Port 25 対策）
実際に運用してみて
費用面
そもそもアクセス数がかなり少ない（平日平均 10 件程度）ので、維持費用が驚くほど抑えられました。（月あたり 100 円切ってますね。。。）
SEO
コンテンツが少なく、全部で 5 ページくらいしか無い（最近ちょっと増えた）サイトなので Google からの流入というのはあまり期待していませんが、しっかりとインデックスされており一安心です。
アナリティクス
GA4 の設定は、Firebase 側でプロジェクト作成時に自動生成されるため特に手間はありません。本来であればパラメータやコンバージョン設定をするところかと思いますので、その際には必要に応じ設定をします。
編集後記
2022 年 7 月に作成してから放置していたのですが、2023 年春からは 1 日数十分程度時間を確保して少しずつ手を入れ始めました。
時間が許せばという断りが必要となりますが、本稿のような役に立つようでそうでも無いような記事掲載を進めていきつつ、動きのある（吹き出しがポヨーンと出るとかではなく）、価値あるサイトに仕上げていきたいと思います。
どうぞよろしくお願いいたします。