2021年12月22日にホームページをフルリニューアルしました。
最新の WEB 技術を取り扱うという企業特性をホームページにも反映させるべく、比較的新しくモダンな手法、そして高速性を意識したサイト作りを行いました。
リニューアル要件(一部)
- 自社の情報を整理し網羅させること
- 高速ページ表示
- SSG(Static Site Generator)の採用
- 画像の自動リサイズ、圧縮、次世代画像フォーマット webp への対応
- Github によるブログ記事も含めたソースコード管理
WEB アプリケーション構成
WEB フロントのフレームワークとして、Japonline で採用実績の多い Nuxt.js を取り入れました。
Next.js か悩みましたが、非エンジニアや WordPress 作業者でも比較的抵抗感のないフレームワークを、ということでNuxt.jsに落ち着きました。バックエンド側は WordPressやContentful等のCMS/APIは使わず、Nuxt.jsで完結させる構成を採用しました。
記事コンテンツ管理はnuxt/contentを使っています。
nuxt/content とは(公式より抜粋)
nuxt/content
モジュールを使って NuxtJS アプリケーションを強化します。content/
ディレクトリに書き込むことで、MongoDB のような API を使って Markdown、JSON、YAML、XML、CSV ファイルを取得します。これはGit ベースのヘッドレス CMSとして動作します。
フロントエンドのみでカテゴリ記事の一覧や記事詳細の表示、記事の検索が可能で、Markdown での記事管理に抵抗がない場合は十分に採用の余地があると思います。(nuxt/contentは内部的にLokiJSを使っているようです)
nuxt/contentで記述するMarkdown内でVueのコンポーネントを呼び出すことができるため、Markdownでありながらもデザイン性のある自由度の高い記事執筆が可能です。
インフラ構成
当社ではAWSと同程度の割合でAzureを選択することが多くなりました。
普段のシステム開発においてはFrontDoor(with WAF) - App Services - DB - Redis なインフラ構成にすることが殆どですが、今回のプロジェクトにおいては配信方法が静的サイト配信となりますので、2021年5月に GA(正式公開)となったAzure Static Web Appsを採用しました。
仕組みとしては、Githubと連携が必要でGithubの特定ブランチにソースコードがプッシュされると自動でビルド&デプロイが走り、Azure Static Web Apps上に展開、ホスティングされます。Vercel と同じような感覚で使えますが、UIもシンプルで非常に使いやすいです。
プランは2021年12月現在で2種類あり、無料版(無料でもそこそこ使えます)と有料版(2021年11月時点で1,000円程度)が選べ、HTTPS配信、独自ドメイン設定も可能です。(当HPでは有料版を採用しています)
導入までの流れは非常にスムーズで、導入開始からホスティング完了まで1時間もかからずに完了しました。対外的にも信頼性の高いMicrosoft Azureで導入コストを抑えスピーディーにSSGのWEBアプリケーション開発ができるとあって、今後も機会があれば積極的に使用したいと考えています。
なお、問い合わせフォームの実装においては、Azure Functionsと連携しています。メール送信はサードパーティのメール送信サービスPostmarkを採用しています。
Nuxt.js -> Azure Functions -> Postmark -> テンプレート機能を使った自動返信メール送信
スコア
SSG での配信とあってスコアは特に問題はなく合格点です。
実際の WEB 閲覧においても初期ロード時の描画ならびにナビゲーションでのページ遷移、どちらにおいてもストレスフリーで問題ありません。
本記事内で紹介した「nuxt/content」「Azure Static Web Apps」に関しては機会がありましたら別途技術ブログにて深堀りいたします。