Sapper × microCMS × Netlifyで始めるJAMstackブログ

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

# そもそもJAMstackって？
JavaScript, API, Markupで構成されたアーキテクチャ

# microCMSで新規プロジェクトを作成
今回はSapperからmicroCMSで作成したサービスを表示するのがメインなので、省略します。サービスについての詳しい作成は公式の[microCMSのはじめ方](https://microcms.io/blog/getting-started/)をご覧ください。

APIの設定についてですが、今回は最低限の設定にしております。
API型：リスト型
スキーマ情報は以下の内容になります。
![スキーマ情報](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/22d71590-8953-7cc3-4eb9-2db77ade9eeb.png)

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

自分はこんな感じで作成しました。
![post](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/8cc32c89-590d-24ef-d909-aaea4b712663.png)


# 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`に記載します。

```javascript
...
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`を以下のように編集してください。

```javascript
<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`を設定しています。

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

![一覧](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/b19a782d-56aa-f065-5f31-fa88a0eee5cc.png)

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

```javascript

<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`として受け取ってるみたいです。
その他はとくに変わったところはありません。
画面の方を確認してみましょう。

![個別詳細ページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/57e13284-f681-3047-15ad-6da6e30560a9.png)

表示されましたね！

# Netlifyにデプロイ
それでは[Netlify](https://www.netlify.com/)にデプロイします。
今回のプロジェクトを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のものがあれば成功です。

![microCMS](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/0d31e3ae-d012-3929-c285-84db9360fad1.png)



# おわりに

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

# 参考資料
[microCMSのはじめ方](https://microcms.io/blog/getting-started/)
[JamStack.org](https://jamstack.org/)