Open2023/06/16にコメント追加14

AstroをSSRでCloudflare Pagesにデプロイしたい

ハマったところメモ

[解決] microCMSのビルドエラー

error   parameter is required (check serviceDomain and apiKey)

hidetaka okamoto

APIクライアント作成時の処理をこんな感じにしてビルドエラーを回避してみた。

import { getRuntime } from "@astrojs/cloudflare/runtime";
import { createClient } from "microcms-js-sdk";
import type { MicroCMSClient } from "./types";

/**
 * @see https://discord.com/channels/1074874430485958716/1075435519300870244/1100981542660079646
 */
export const createCFMicroCMSClient = (request: Request):MicroCMSClient => {
    const runtime = getRuntime(request)
    if (runtime && runtime.env) {
        const cfRuntimeAPIKEY = (runtime.env as any).MICROCMS_API_KEY as string
        if (cfRuntimeAPIKEY) {
            return createClient({
                serviceDomain: 'hidetaka',
                apiKey: cfRuntimeAPIKEY,
            })
        }
    }
    const envAPIKEY = import.meta.env.MICROCMS_API_KEY
    if (envAPIKEY) {
        return createClient({
            serviceDomain: 'hidetaka',
            apiKey: import.meta.env.MICROCMS_API_KEY as string,
        })
    }
    console.log({
        message: "Failed to load the microcms API keys"
    })
    return {
        async get(props) {
            if (props.contentId) {
                return {}
            }
            return {
                contents: []
            }
        }
    } as MicroCMSClient
}

SSRでは動くので、ビルド時の環境変数読み込みに何かがありそう。

hidetaka okamoto

Astro SSG Mode: import.meta.env.MICROCMS_API_KEYでAPIキーを取得できる
Astro SSR Mode: import.meta.env.MICROCMS_API_KEYがundefinedになる

astro.config.mjsのこの2行を追加した以外は同じ条件なので、
Astroのビルド周りを調べることになりそう。

output: "server",
adapter: cloudflare()

hidetaka okamoto

serverモードで起動するなら、特定のページだけprerenderでビルドしておくみたいなことは無理っぽいかなぁ

hidetaka okamoto

Discordでいろいろ議論した結果「AstroもといViteのビルド挙動まわりを見るべきだ」となった。
Viteなら.envファイルを配置すれば読むはずなので、GitHub Actionsを次のようにしてみたところ、動いた様子。

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: Env
        shell: bash
        run: |
          echo "MICROCMS_API_KEY=${{ secrets.MICROCMS_API_KEY }}" > .env
      - name: Build
        shell: "bash"
        run: |
          yarn run build

hidetaka okamoto

[解決] `Could not resolve "http"`

14:12:32.577	✘ [ERROR] Could not resolve "http"
14:12:32.577	
14:12:32.578	    node_modules/rss-parser/lib/parser.js:2:21:
14:12:32.578	      2 │ const http = require('http');
14:12:32.578	        ╵                      ~~~~~~
14:12:32.578

hidetaka okamoto

rss-parserをfast-xml-parserに変更して解決。

fast-xml-parserはfetchしないので、こうなる。

      const parser = new XMLParser()
      const response = await fetch(url)
      const feedData = await response.text()
      const parsedItem = parser.parse(feedData)