Jamstack Handson

# 3.microCMSを使ってコンテンツを管理する

# 概要

  • 前章ではQiitaのAPIからコンテンツを取得し表示していました
  • ですが、実際にJamstackなアプリを開発する場合はコンテンツも自前で用意することが多いでしょう
  • この章ではコンテンツを管理しAPIとして公開できるHeadlessCMSを使ってみます
  • HeadlessCMSと呼ばれるサービスは世の中に数多くありますが今回はmicroCMSを使います

# ゴール

  • microCMSを使ってコンテンツをAPI公開する
  • JamstackなアプリでmicroCMSからデータを取得し表示する
  • microCMSのデータ更新をトリガーに自動でビルド/デプロイを実行させてWebページを最新化する

ゴール

# 3-1.microCMSのセットアップ

# アカウント作成

  • まずはmicroCMSのアカウント登録をします

手順1 手順2 手順3 手順4 手順5 手順6

# ブログサービスを作成

  • タイトルと本文の項目を持ったブログサービスを作ります

手順7 手順8 手順9 手順10

# ブログサービスにデータを追加

  • サンプルのブログ記事を作成しておきます

手順11 手順12 手順13

# ブログサービスのAPI情報を確認

  • ブログサービスのAPI情報を確認しレスポンスの構造を確認します

手順14 手順15 手順16 手順17

# 3-2.microCMSからデータを取得する

  • 前章のNext.jsで作成したアプリを改修していきます
  • 通信先を変更するためapi/qiitaApi.jsを修正します
    • アクセス先がQiitaじゃなくなるためファイル名が不適切ですが気にせず進めます
import fetch from 'node-fetch';

// microCMSで作成した自身のAPIのURLに変更
const baseUrl = 'https://xxxxxxxxxxx.microcms.io/api/v1';

const headers = {
  // APIキーを設定
  'X-API-KEY': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
};

export async function getItems() {
  const res = await fetch(`${baseUrl}/items`, { headers });
  return res.json();
}

export async function getItem({ id }) {
  const res = await fetch(`${baseUrl}/items/${id}`, { headers });
  return res.json();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • QiitaのAPIとmicroCMSのAPIではレスポンスのデータ構造が異なるのでmicroCMS仕様に修正します
  • pages/items/index.jsのgetStaticProps内を修正






















 
 





import Link from 'next/link';
import { Container, ListGroup } from 'react-bootstrap';
import { getItems } from '../../api/qiitaApi';

function Items({ items }) {
  return (
    <Container>
      <h1>Hello</h1>
      <ListGroup>
        {items.map(item => (
          <Link key={item.id} href="/items/[id]" as={`/items/${item.id}`}>
            <ListGroup.Item action>{item.title}</ListGroup.Item>
          </Link>
        ))}
      </ListGroup>
    </Container>
  );
}


export async function getStaticProps() {
  const data = await getItems();
  // data.map を data.contents.map に修正
  const items = data.contents.map(item => ({ id: item.id, title: item.title }));
  return { props: { items } };
}

export default Items;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  • pages/items/[id].jsのgetStaticPropsとgetStaticPathsを修正















 
 





 
 





import { Container } from 'react-bootstrap';
import { getItem, getItems } from '../../api/qiitaApi';

function Item({ item }) {
  return (
    <Container>
      <h1>{item.title}</h1>
      <hr />
      <div dangerouslySetInnerHTML={{ __html: item.body }}></div>
    </Container>
  );
}

export async function getStaticProps({ params }) {
  const data = await getItem({ id: params.id });
  // rendered_body を body に修正
  const item = { id: data.id, title: data.title, body: data.body };
  return { props: { item } };
}

export async function getStaticPaths() {
  const data = await getItems();
  // data.map を data.contents.map に修正
  const paths = data.contents.map(item => `/items/${item.id}`);
  return { paths, fallback: false };
}

export default Item;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  • アプリにアクセスして確認してみましょう
    • アプリを停止してしまった人はyarn devで起動しましょう
  • うまくいっていればmicroCMSに登録した記事が表示されているはずです

一覧 詳細

  • 最新版をnowにデプロイしましょう
now --prod
1
  • これでローカルで表示していたページを公開することができました

# 3-3.microCMSのデータ追加をトリガーに再デプロイする

  • 前節でmicroCMS化対応は完了しました
  • ですが、コンテンツのデータはビルド時に取得するためmicroCMS上でブログ記事を追加したら再ビルド/デプロイを実行する必要があります
  • 毎回手動で叩くのは面倒なので自動化してしまいましょう

# GitHubにソースをアップロード

  • ビルド/デプロイを自動化するためにはソースコードをネット上にあげておく必要があります
  • GitHubにリポジトリを作成しアップロードしましょう
  • 以下のURLから作成します

リポジトリ作成 コピーURL

  • gitコマンドを使ってアップロードします

TIP

gitコマンドが入っていない人は公式サイトからダウンロードしてください

# URL部分はコピーしたものを貼り付け
git remote add origin https://github.com/xxxx/jamstack-sample.git
git add .
git commit -m "Jamstackハンズオン"
git push origin master
1
2
3
4
5
  • 最後のコマンドでGitHub上にアップロードされます
    • ID/パスワードを求められたら適宜入力してください
  • GitHubのページに戻りリロードするとアップロードできていることを確認できます

リポジトリ

# nowとGitHubを連携する

  • デプロイ先のnowと先程作成したGitHubのリポジトリを連動させます
  • nowのダッシュボードにアクセスしてください
  • これまでnowコマンドでデプロイしていたアプリが表示されています

nowダッシュボード Settings リポジトリを保存

  • 次の手順はこの画面からスタートするので閉じずにそのまま残しておいてください

# microCMSの更新をnowのトリガーに設定する

create hook copy url

microcms microcms microcms

  • これで設定が完了しました

# 3-4.動作確認

  • microCMSで記事を追加してみましょう

create item

  • nowのダッシュボードに戻ってしばらくすると黄色いビルド中のステータスに変更されるはずです

now

  • ビルド/デプロイが完了すると緑のステータスに戻ります
  • 完了したらWebページに再度アクセスしてみましょう

now now

  • コンテンツが最新化されていることを確認できました！

app app

# まとめ

  • microCMSを使ってコンテンツの管理しAPIとして公開する方法を学びました
  • GitHub、now、microCMSを連動させてコンテンツを更新すると自動でビルドデプロイされる仕組みを構築しました
  • 本番システムとしての使用例も多くある構成なのでJamstackなアプリを作りたくなったらこの構成を試してみてください
Last Updated: 2020/04/27

←