まえがき

Andeco Tech Blogの技術選定と書きましたが、今回のブログだけでは内容が薄すぎるので、弊社における静的サイトの技術構成について書いています。

Andecoでよく使う静的サイトの技術構成

弊社では私を含め2名がエンジニアとして働いています、少人数で開発しているということもあり、外部の方にFigma等で作成したデザインからHTML•CSSのマークアップをお願いすることが多いです。
その場合、生のHTML・CSSで納品されることが多いため、今回のブログのような静的サイトはほぼHTMLそのままで使えるAstroを採用することが多いです。
弊社が運営管理するキャンプ場、「紀泉わいわい村 FUNNY HEARTH」の公式サイト、及び弊社Andecoの公式サイトもAstroで運用・管理しています。

CMSで運用を簡単にする

先程挙げたAstroを使用することで、生のHTMLを活かしつつ、コンポーネントや動的生成のような便利な機能を簡単に使えます。
コンテンツの管理を技術者のみが行う場合は、このまま運用してもいいですが、先程のキャンプ場等の場合、現地のメンバーがコンテンツの運用を行う場合がほとんどです。
そのため弊社では更新頻度の低いサイトに関しては、Headless CMSを導入しJamstack構成で運用しています。
CMSには、Headless CMSの中でも管理画面が日本語で使いやすいmicroCMSを使用させていただいています。
JamstackについてはmicroCMSさんの記事「Jamstackとは何か？まずは基本を理解しよう！」でとてもわかり易く書かれています。

今回のテックブログの技術構成

フレームワーク

普段はAstro Jamstack推しですが、今回はテックブログということもあり、フレームワークは最近何かと話題なNext.jsを採用しました。
静的ではないWebアプリの開発にNext.jsのPages Router(=<v13)を使用しており、App Routerにマイグレーションする前段階の練習のために選定しました。
また、0からデザイン・マークアップする時間を取れなかったため、microCMSさんのテンプレートの中から「シンプルなブログ」を使わせていただきました。
microCMSさんのテンプレートはモダンな技術構成のものがあり、GitHub連携することで簡単に始める事ができるのでおすすめです。

↓のように、APIの設定が完了している状態から始めることができ、学習面・時間面で助かりました。

// ブログ一覧を取得
export const getList = async (queries?: microCMSQueries) => {
	const listData = await client
		.getList<Blog>({
			endpoint: "blog",
			queries,
		})
		.catch(notFound);
	return listData;
};

// ブログの詳細を取得
export const getDetail = async (
	contentId: string,
	queries?: microCMSQueries,
) => {
	const detailData = await client
		.getListDetail<Blog>({
		endpoint: "blog",
		contentId,
		queries,
	})
		.catch(notFound);
	return detailData;
};

ホスティング

ホスティングにはVercelを使用しています。GitHubと連携し、ブランチごとの環境分けを行い、microCMSのWebHookから新規ブログの作成時に再ビルドするようにしています。
詳しくはmicroCMSさんの記事「microCMS + Next.jsでJamstackブログを作ってみよう」の10.microCMSとVercelを連携するでわかり易く解説されています。

まとめ

Jamstack構成はいいぞ的な記事になりましたが、Wordpress・Jimdo・Wix等と比べると

• エディターの自由度が低い(非技術者が見た目を変更しづらい)
• 管理運用に技術者が必要
• 再ビルドが必要(ページ数が多いとビルド時間が課題)

等、まだ課題はあるかなとも思います。
余談ですが、やっとテックブログっぽいものを書けて嬉しいです。