Zenn
⬆️

ローカル管理のコンテンツを Contentful に移行する

2021/08/30に公開
JavaScript
Contentful
tech

CMS には Git ベースのものと API ベースのものがあり、Git ベースのものは GitHub などと連携して、CMS でのコンテンツの更新を GitHub にプッシュします。GitHub と Netlify や Vercel などのホスティングサービスが連携していれば、GitHub へのプッシュがデプロイを引き起こしてもとのサイトが更新されます。つまりコンテンツが同じリポジトリにあり、ローカルでは同じプロジェクトディレクトリにあります。

対して API ベースのものは、API によって記事の取得や更新を行うことができるタイプのものです。もとのサイトではコンテンツの取得も API で行うため、リポジトリ（プロジェクトディレクトリ）にコンテンツが存在しないのがふつうです。CMS での更新は Git の差分として現れないため、ホスティングサービスと直接連携することでもとのサイトを更新します。

コンテンツのある場所が違うので、Git ベースで管理していたコンテンツを API ベースの CMS に移す際には、API を利用してコンテンツを CMS 側に作成する必要があります。

この記事ではローカルで保管しているコンテンツを API ベースの Headless CMS のひとつである Contentful に移す手順を紹介します。

Content Management API

Contentful には Content Management API があるので、これを使っていきます。

プロジェクトにパッケージをインストールして、

yarn add contentful-management

よきところに main.js（ts-node などを使うなら ts でも OK）を作成します。

基本的な使い方はこんな感じです。

main.ts
import { createClient } from 'contentful-management';

const client = createClient({
  accessToken: '<access-token>'  // Contentful のダッシュボードから取得したアクセストークンを指定
});

const main async () => {
  const space = await client.getSpace('<space-id>');  // Space を取得
  const env = await space.getEnvironment('<environment-id>');  // Environment を取得
  const entry = await env.createEntry('<content-type-id>', {
    fields: {
      title: { ja: 'たいとる' },
      content: { ja: 'てすと' },
    }
  });
};

main();

公式のドキュメントなどでは .then をつなげて書いていることが多いですが、async await を使って書くこともできます。

fields には Contentful であらかじめ作成しておいた Content Model に合わせたものを指定します。

このコードをコマンドで走らせれば、新たな記事が作成されていることが Contentful のダッシュボードから確認できます。

node main.js
ts-node main.ts

記事の移行

ローカルの .md （または .mdx）ファイルの内容を Contentful に移行します。

仮に記事のディレクトリ構成が以下のようになっているとします。

▼ 📂 posts
  ▼ 📂 xxx
    🖼️ index.jpg
    🖼️ image.jpg
    📄 index.md
  ▶ 📁 yyy
  ▶ 📁 zzz

Markdown のフロントマターの情報を取得するために、gray-matter を使います。

yarn add gray-matter

posts 下のすべての記事を移行する場合、移行コードは次のようになります。

main.ts
import fs from 'fs';
import { join } from 'path';
import matter from 'gray-matter';
import { createClient } from 'contentful-management';

const postsDirectory = join(process.cwd(), 'posts');  // 記事ディレクトリのパス

const getPostBySlug = (slug: string) => {
  const postPath = join(postDirectory, `${slug}/index.md`);
  const fileContents = fs.readFileSync(postPath, 'utf8');
  const { data, content } = matter(fileContents);

  // data にフロントマターの情報が入る
  // slug も必要なら加えておく
  return { slug, content, ...data };
};

const getPosts = () => {
  const slugs = fs.readdirSync(postsDirectory);
  const posts = slugs.map((slug: string) => getPostBySlug(slug));
  return posts;
};

const client = createClient({
  accessToken: '<access-token>'
});

const main async () => {
  const space = await client.getSpace('<space-id>');
  const env = await space.getEnvironment('<environment-id>');

  const posts = getPosts();
  for (const post of posts) {
    try {
      const entry = await env.createEntry('<content-type-id>', {
        fields: Object.fromEntries(
          Object.entries(post).map(([k, v]) => [k, { ja: v }])
        )
      });
      console.log(`\u001b[32m✅ Updated successfully: ${entry.fields.slug.ja}\u001b[0m`);
    } catch (e) {
      console.log(`\u001b[31m❌ Update failed: ${post.slug}\u001b[0m`);
      console.log(e);
    }
  }
};

main();

メディアファイルの移行

画像や動画など、Markdown 以外のコンテンツを移行します。

Contentful ではメディアファイルは Media というところで管理します。

どう運用するかはいくつか方法があって、それによって移行の仕方が若干変わってきます。

タイトルなどのメタデータを記事内に書いておき、それを元に検索して asset を取得する（記事とリンクさせない）方法と、

記事に asset へのリンクを貼って、記事の取得時に asset の情報も一緒に取得する方法があります。

ひとつの記事内で複数の asset を扱う場合、どちらにしても Markdown 内にファイルのパスや名前などを書くことになると思います。

また、asset を登録するさいに contentType というのを求められるので file-type を使います。

yarn add file-type

記事とリンクさせない場合

記事とリンクをしない場合、Media にファイルを移行していくだけです。

注意点として、asset を表示させるときに例えば title をキーとして検索するなら、当然 title はユニークでなければなりません。

ディレクトリ構成が先述のと同じとすると移行コードは次のようになります。

main.ts
import fs from 'fs';
import { join } from 'path';
import filetype from 'file-type';
import { createClient } from 'contentful-management';

const postsDirectory = join(process.cwd(), 'posts');

const getAssets = () => {
  const assets: Record<string, string[]> = {};
  const slugs = fs.readdirSync(postsDirectory);
  for (const slug of slugs) {
    const postAssets = fs.readdirSync(join(postsDirectory, slug))
      .filter(filename => filename !== 'index.md');
    assets[slug] = postAssets;
  }
  return assets;
};

const client = createClient({
  accessToken: '<access-token>'
});

const main async () => {
  const space = await client.getSpace('<space-id>');
  const env = await space.getEnvironment('<environment-id>');

  const assets = getAssets();
  for (const [slug, assetName] of Object.entries(assets)) {
    try {
      const path = join(postDirectory, slug, assetName);
      const type = await filetype.fromFile(path);
      const asset = await env.createAssetFromFiles({
        fields: {
          title: {
            ja: assetName
          },
          description: {
            ja: ''
          },
          file: {
            ja: {
              contentType: type.mime,	// image/png など
              fileName: assetName,
              file: fs.createReadStream(path),	// 変数代入ではなく直接渡さないとうまく動きませんでした
            }
          },
        }
      });
      const processedAsset = await asset.processForLocale('ja');  // 画像をプロセスする
      const publishedAsset = await processedAsset.publish();      // 画像を publish する
      console.log(`\u001b[32m✅ Updated successfully: ${publishedAsset.fields.title}\u001b[0m`);
    } catch (e) {
      console.log(`\u001b[31m❌ Update failed: ${assetName}\u001b[0m`);
      console.log(e);
    }
  }
};

main();

記事とリンクさせる場合

記事に Media というタイプの field を作成しておきます。

記事を作成するさいにその field に特定の形のデータを指定します。

以下は記事と一緒に作ってしまう例ですが、記事がすでに移行済の場合は API から取得した記事を使うことになります。

main.ts
const main async () => {
  const space = await client.getSpace('<space-id>');
  const env = await space.getEnvironment('<environment-id>');

  const posts = getPosts();
  for (const post of posts) {
    const assetsForEntry = [];
    for (const assetName of assets[post.slug]) {
      try {
        const path = join(postDirectory, slug, assetName);
        ...
        assetsForEntry.push({
          sys: {
            type: 'Link',
            linkType: 'Asset',
            id: publishedAsset.sys.id,
          }
        });
      } catch (e) {
        ...
      }
    }
    post.assets = assetsForEntry;
    try {
      const entry = await env.createEntry('<content-type-id>', {
        fields: Object.fromEntries(
          Object.entries(post).map(([k, v]) => [k, { ja: v }])
        )
      });
      console.log(`\u001b[32m✅ Updated successfully: ${entry.fields.slug.ja}\u001b[0m`);
    } catch (e) {
      console.log(`\u001b[31m❌ Update failed: ${post.slug}\u001b[0m`);
      console.log(e);
    }
  }
};

これでうまくいけば移行したコンテンツが Contentful のダッシュボードに表示されるはずです。

この記事が参考になればうれしいです。

では 👋

Discussion