AstroでmicroCMSのコンテンツを利用したサイトを静的ビルド + Cloudflare Pagesにデプロイした話

最近Astroをちょくちょく触っているので、microCMSのデータを使いたい時のやり方を簡単にまとめました。

microCMSのAPIキーを取得する

microCMSのAPIにアクセスするため、APIキーを取得しましょう。

取得はmicroCMSの管理画面から行えます。

取得後、環境変数に設定します。

.env

MICROCMS_API_KEY=XXXX

microCMSのJS SDKで記事情報を取得する

JS SDKと、環境変数に保存したAPIキーで記事情報を取得します。

まずはライブラリをインストールしましょう。

% npm i microcms-js-sdk

その後、APIクライアントを作成・exportするファイルを用意します。SSRやHybrid Renderingを利用する場合、すこし書き方が変わることに注意しましょう。SSRなどでの書き方は後日紹介します。

import { createClient } from 'microcms-js-sdk'

export const microCMSClient = process.env.MICROCMS_API_KEY
  ? createClient({
      serviceDomain: 'YOUR_DOMAIN_NAME',
      apiKey: process.env.MICROCMS_API_KEY as string,
    })
  : undefined

あとは作成したクライアントを利用して、情報を取得します。

ビルド時にだけ実行して欲しいので、—-のブロック内に書きましょう。

---
const { contents: events } = await microCMSClient.get({
    endpoint: 'events',
    queries: {
      limit: 20,
    },
})
---
<ul>
    {events.map(event => (
        <li>
            <span>{event.title}</span>    
        </li>
    ))}
</ul>

上手くいけば、npm run devやnpm run buildで記事情報が取得できていることを確認できます。

GitHub Actionsでビルド・デプロイする場合、環境変数に注意しよう

Astroにはビルド・デプロイ用のGitHub Actionが公開されています。

https://github.com/withastro/action

が、環境変数の読み込みに対応していない様子のため、microCMSなどのAPIキーを安全に扱うには自前でコマンドを用意した方が良さそうです。

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: yarn
      - name: Install
        shell: "bash"
        run: yarn install
      - name: Build
        shell: "bash"
        run: |
          MICROCMS_API_KEY=${{ secrets.MICROCMS_API_KEY }} yarn run build  
      - name: Publish
        uses: cloudflare/wrangler-action@2.0.0
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          command: pages publish --project-name=${{ secrets.CF_PROJECT_NAME }} ./dist

Ref

• https://docs.astro.build/en/guides/environment-variables/