やること

Gatsby.js, Nuxt.jsでJAMstackなサイトを作ったことはあったけど、最近使い初めてるSapperでは作ったことなかったので、実際に作ってみることにした。
Headless CMSはContentful, NetlifyCMSなど有名なものがありますが、今回は日本製のmicroCMSを使うことにしました。日本製とのことだけあって、管理画面が日本語ですごく見易くていい感じです。
デプロイ先は安定のNetlifyです。

そもそもJAMstackって？

JavaScript, API, Markupで構成されたアーキテクチャ

microCMSで新規プロジェクトを作成

今回はSapperからmicroCMSで作成したサービスを表示するのがメインなので、省略します。サービスについての詳しい作成は公式のmicroCMSのはじめ方をご覧ください。

APIの設定についてですが、今回は最低限の設定にしております。
API型：リスト型
スキーマ情報は以下の内容になります。

サービスを作成したら、Sapper側に表示するためのコンテンツを新規作成してみましょう！内容はわかりやすいもので大丈夫です。

自分はこんな感じで作成しました。

SapperでmicroCMSのコンテンツを取得する

microCMS側の準備はできたので、次にSapperの準備をしていきます。
まずは新規作成と、環境変数を取り扱うのでdotenvもインストールしていきます。

npx degit "sveltejs/sapper-template#rollup" sapper-jam
cd sapper-jam
npm install
npm run dev & open http://localhost:3000
npm install dotenv

そして環境変数用の設定をrollup.config.jsに記載します。

...
import dotenv from 'dotenv';

dotenv.config();

const api_key = process.env.API_KEY;

export default {
	client: {
		input: config.client.input(),
		output: config.client.output(),
		plugins: [
			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode),
                 'process.env.API_KEY': JSON.stringify(api_key) # ここを追加してあげてください。

microCMSのAPIリファレンスにあるX-API-KEYを.envファイルに設定します。

API_KEY=XXXXXXXXXXXX

Sapperのテンプレートにはsrc/routes/blog/にブログ用のテンプレートが存在します。
今回はこちらを使って、microCMSのコンテンツを表示していきます。
まずは一覧表示の部分を変えていきましょう。
src/routes/blog/index.svelteを以下のように編集してください。

<script context="module">
	export function preload({ params, query }) {
    return this.fetch(`https://your-service-name.microcms.io/api/v1/your-endpoint`, { headers: { 'X-API-KEY': process.env.API_KEY  } }).then(r => r.json()).then(posts => {
			return { posts };
		});
  }

  
</script>

<script>
	export let posts;
</script> 

...

<svelte:head>
	<title>Blog</title>
</svelte:head>

<h1>Recent posts</h1>

<ul>
  {#each posts.contents as post}
    <li>{post.title}</li>
    <a rel='prefetch' href='blog/{post.id}'>リンク</a>
	{/each}
</ul>

※APIのURL部分は自分のものを使うようにお願いします。

APIの取得結果をposts入れて、eachで一覧表示しています。これはもともとのテンプレートのものを差し替えてるだけなので、あまり変わりません。

個別詳細ページ用のslug部分はidがuniqueで都合がよかったのでそのままidを設定しています。

これで画面側を確認するとこんな感じで一覧が表示されてるかと思います。

最後に個別詳細ページの設定を行います。
src/routes/blog/[slug].svelteを以下のように編集します。


<script context="module">
	export async function preload({ params, query }) {
    const res = await this.fetch(`https://your-service-name.microcms.io/api/v1/your-endpoint/${params.slug}`, { headers: { 'X-API-KEY': process.env.API_KEY } });
		const data = await res.json();

		if (res.status === 200) {
			return { post: data };
		} else {
			this.error(res.status, data.message);
		}
	}
</script>

<script>
	export let post;
</script>

...

<svelte:head>
	<title>{post.title}</title>
</svelte:head>

<h1>{post.title}</h1>

<div class='content'>
	{@html post.body}
</div>

idを渡している部分は、個別詳細ページではparams.slugとして受け取ってるみたいです。
その他はとくに変わったところはありません。
画面の方を確認してみましょう。

表示されましたね！

Netlifyにデプロイ

それではNetlifyにデプロイします。
今回のプロジェクトをGitHubに上げてる状態でNetlifyの管理画面からNew site from Gitを押して今回作成した、ブログプロジェクトを選択します。

ビルドコマンドと公開ディレクトリは以下の内容で設定してデプロイ。

Build command: npm run export
Publish directory: __sapper__/export

※サイトの設定からAPI_KEYの環境変数を設定することもお忘れずに

この時点でサイトは表示されているかと思いますが、このままだとmicroCMSで新規にコンテンツ作成しても反映されないので、microCMSとNetlifyをWebhookします。

Netlifyの作成したサイトからSettings→Build & deploy→Build HooksでURLを生成。
そのURLをコピーして、microCMSのAPI設定→WebhookにURLを追加すれば、新規にコンテンツを追加してもNetlifyで自動ビルドするようになります。

実際に新規追加してデプロイ一覧にmicroCMSのものがあれば成功です。

おわりに

こんな感じで簡単にSapperからmicroCMSのデータを表示、Netlifyへのデプロイをすることができました。
Sapper自体もStaticGenにのっている他のStatic Generatorよりも比較的に使いやすいと思うので、是非試してみてください。

参考資料

microCMSのはじめ方
 JamStack.org