このブログを構成する技術

メタサイト エンジニアのSMです。

はじめに

本記事では、当社の技術ブログを作成するにあたり選定した技術について なぜ選択したのか？どう工夫したのか？ それらを組み合わせるとどんなメリットがあるか？ などを、ご紹介します。

技術選択の指針としたもの

技術の実験ができるようなものを採用すること。 運用コストが低い（サーバーのメンテナンス、監視、CI/DIを含む）こと。

Next.js

新しい技術を試してみるという観点から、ヘッドレスCMSを検討、それに伴いフレームワークとしては、後述するヘッドレスCMS「Contentful」との連携実績が多数あり、弊社での採用例もあるNext.jsを選択しました。

さらにNext.jsであれば、こちらも後述するVercelと連携することで、ビルドからデプロイまでの処理を完全自動化し、より効率的な運用ができる、といった狙いもありました。

Contentful、Vercelはそれぞれ、弊社としては初の採用になります。

Next.js by Vercel - The React Framework https://nextjs.org/

Contentful

Contentfulは、「ヘッドレスCMS」と呼ばれるAPIベースのCMS(Content Management System、コンテンツ管理システム)です。 コンテンツの表示機能を持たないため、コンテンツの管理機能のみを提供します。

APIベースでコンテンツを管理できるため、フロントエンドとバックエンドが完全に切り離されます。 それによって、WordPressなど従来のCMSに比べて、デザインの自由度や、保守性が上がることがメリットです。

ヘッドレスCMSとしては、いくつか選択肢がありましたが、無料の範囲内で十分な開発が可能であったことに加え、国内外での採用実績が多く、デバッグの際のリファレンスが多いというところでContentfulの採用に至りました。

Contentful管理画面の一部をご紹介します。

Contentタブでは、作成したコンテンツの管理ができます。

StatusがPUBLISHEDのものは公開中のものになります。

こちらがコンテンツの詳細画面です。

事前に設定した入力項目に沿って、情報を追加していきます。

ブログ記事の編集画面です。

フォントや文字サイズなど、見慣れた編集画面で入力していくことができます。

画面右側のPublishをクリックすると、コンテンツの公開が完了します。

英語表記のサービスですが、ブラウザ上で直感的な操作ができるので、慣れてくると違和感なく操作できるようになると思います。

API-first content platform to build digital experiences | Contentful https://www.contentful.com/

Vercel

先述したNext.js を開発している Vercel社が提供しているサーバーレスプラットフォームです。 Vercelにより手軽に Next.js アプリケーションをデプロイできます。

Vercelを導入するメリットは、なんといってもデプロイ作業の自動化です。

GitHubのRepositoryと連携することで、本番環境へのデプロイまでのフローを自動化できます。 ここからは、作業ブランチから本番デプロイまでの流れを追ってみましょう。

1. 作業ブランチをリモートブランチへPush

Pushをした時点でデプロイが自動的に開始されます。

デプロイが完了すると自動的にプレビューURLが発行されます。 例 https://example-commit_id-accout.vercel.app/

URLの構成は、exampleにはproject名、commit_idにはcommit識別番号、accountには自身のアカウントが入ります。

commitごとにプレビュー画面が自動生成されるので、動作確認やチェックを依頼する際に便利です。

2. Pull Requestを確認

Pull Request にVercelのデプロイ結果が表示されるようになります。

先ほど紹介したプレビューページへのリンクも自動追加されています。

3. mainブランチにマージ

mainブランチにマージされると、本番環境へのデプロイが開始されます。

この時点での本番環境URLのドメインは自動生成されたものになります。

例 example.vercel.app

URLの構成は、exampleにproject名が入ります。

SettingsタブのDomainsを選択すると、本番環境URLのカスタムドメインを設定できます。

カスタムドメインを設定すると、本番環境のURLが更新されます。

例 custom-domain-example.co.jp

これで、本番環境へのデプロイが完了しました。

いかがでしたでしょうか？

PRをマージしただけで、本番環境へのデプロイが開始されることは便利ですよね。

個人での開発はもちろん、チームでの開発が効率化されること間違いなしです。

Vercel Workflow: Built-in CI/CD, live previews, and analytics https://vercel.com/workflow

Tailwind Nextjs Starter Blog

こちらのブログの作成にあたって使用したテンプレートです。

「スターター」とあるだけあって、すでに大まかなブログの構成が準備されているので 開発がしやすく、構成がシンプル、かつモダンなデザインであるため選定しました。

大まかなページの構成やボタンやタブの装飾には、これまで使い慣れていたMaterial UIを、細かいデザインの適用には、今回のテンプレートで使用が推奨されていたtailwindcssを、それぞれの用途に合わせて、使い分けて行いました。

https://github.com/timlrx/tailwind-nextjs-starter-blog

MUI: The React component library you always wanted https://mui.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. https://tailwindcss.com/

おわりに

Next.js + Contentful + Vercelで弊社仕様のオリジナルブログを作成することができました。

フロントエンドの開発技術が必要になることなどの障壁はありますが、従来のCMSに比べて、自由度が高く、効率的な運用が可能なブログを作成することができると思います。

特にVercelの導入によるデプロイの自動化は、開発スピードのアップにつながるということで、すでに弊社内でも注目の技術になりつつあります。

今後も新しい技術を試してみて便利だった機能などを、紹介していきたいと思います。