エンジニアブログのエコシステムをつくりました【microCMS】

エンジニア山下

こんにちは、GMOリザーブプラスの山下です。

先日、弊社採用サイトのエンジニアブログを開設しました。
(今、あなたが読んでいるこのブログです！)

エンジニアブログでは、microCMS という CMS サービスと Github Actions を使って、自動で記事の更新をサイトに反映する仕組みをつくりました。
私自身、今まで使ったことがなかった技術やツールに触れ、普段の開発とは違った楽しさを感じることができました。

今回は、このエンジニアブログでつくったエコシステムについてシェアします。

エンジニアブログ開設の経緯

実は当ブログを開設する前、エンジニアのコラム記事は、弊社のサービスである「メディカル革命」のサービスサイトのコラムに掲載されていました。
しかし、サービスサイトなのでエンジニアの情報発信がメインではなく他の記事に埋もれてしまっていました。

そこで、エンジニアのブログを開設するプロジェクトが始まりました。

エンジニアブログの開設にあたって、いくつか条件がありました。

これら条件を踏まえて、いくつかの候補を出して比較検討しました。
そして、以下の技術やツールを組み合わせて、記事が更新されたら自動的にサイトに反映するエコシステムをつくることにしました。

コンテンツ管理：microCMS
フレームワーク：Astro (SSG)
ビルド・デプロイ：Github Actions

コンテンツ管理 (CMS) の選定では 3 つの候補があったのですが、コンテンツの作成や編集が簡単にできる UI や静的ファイルが推奨される点からヘッドレス CMS を使うことにしました。

ヘッドレス CMS を使うのであればフロントエンドは自由が効くため選択肢が広がりました。
さまざまなフレームワークがある中で、今回選んだのが Astro です。
社内に相談したところ、先輩エンジニアから Astro というフレームワークの人気が高まっていると聞いて使ってみたいと思ったからです。

また、SSG (Static Site Generation：静的サイト生成) でブログを公開することで、microCMS や Github に障害が発生しても Web サーバーが動いていればブログにアクセスでき、可用性の面でもメリットがあります。

エンジニアブログでは、複数のサービスやツールを使って、それらが連携することで記事更新の自動化を行いました。

私自身初めての取り組みとして、Astro のプロジェクトをビルドして採用サイト配下にデプロイするために、Github Actions を利用しました。今まで Github Actions に触れる機会がなかったので、ワークフローの構築はまさに試行錯誤しながらつくりました。

まず直面したのは、Github Actions の基本的な概念と構文の理解です。
さまざまなサイトを調べたり AI に聞いてみながら、実際に動かせるようになるまでに時間がかかりました。

やりたいことを Github Actions のフローや処理に落とし込む作業は苦労しました。
npm install で依存関係をインストールし、npm run build で静的ファイルを生成、SSH で採用サイトに転送という一連の流れをコマンドで記述します。

1 つずつコマンドがきちんと動いているか確認して、うまくいかなかったらまた調べて...の繰り返しでした。
特に、採用サイトのサーバーに接続するために環境変数を使用してビルドさせたり、指定のディレクトリに静的ファイルを転送させたりする部分は何度もコマンドを試しながらつくっていきました。

ブログ記事を書く時に、書いた記事がサイト上でどのように表示されるかを公開前に確認しておきたいですよね。
しかし、今回使用した microCMS はヘッドレス CMS のため、その名の通り画面表示の機能がなくプレビュー機能を自作する必要があります。

今回このブログにもプレビュー機能を実装しました。これによって記事がどのように表示されるか確認できるだけでなく、プレビュー URL を共有して社内で記事のプレビューを簡単に共有できるようになりました。

microCMS は開発向けのドキュメントが豊富で、Astro を使ってプレビュー機能を実装するチュートリアルが公開されています。
このような開発者向けのチュートリアルが用意されているのはとてもありがたかったです。

Astro と microCMS を使った画面プレビューを実装する | microCMS ブログ
https://blog.microcms.io/astro-preview/

シンタックスハイライトは、コードエディタでもおなじみですがソースコードに色付けすることで構造を分かりやすくしたりコードを読みやすくする機能です。
エンジニアのブログなので、記事にソースコードを載せることもありこの機能を実装しました。

以下のようにコードを書くといい感じにハイライトしてくれます。

function sayHello (name = "") {
  if (name === "") {
    name = "ゲスト";
  }
  console.log(`こんにちは！${name}さん`);
}

sayHello("太郎"); // こんにちは！太郎さん

シンタックスハイライトの実装についても、microCMS のチュートリアルがあります。

サーバサイドでシンタックスハイライトを行う | microCMS ブログ
https://blog.microcms.io/syntax-highlighting-on-server-side/

今回のブログ開設で、Astro や Github Actions の知識や開発方法を知ることができました。

新しいものにチャレンジする時は、実際に手を動かしながら試行錯誤することが遠いようで一番の近道な気がしました。
また、プロジェクトを通じて AI に色々聞いて解決する場面も多く、今後も積極的に AI を活用したいと思いました。

実はプロジェクト開始時は仕組みの自動化までは難しいだろうと思っていたのですが、個人的にも満足できる機能を実装してリリースまでできました。
技術選定からリリースまで一貫して関わる、とても良い機会と経験になりました。

記事を書いた人

エンジニア山下

2024年10月GMOリザーブプラスに入社。フロントエンドやUIの領域を主に開発しています。