Zenn
Open6

Cloudflare pages + D1, Headless CMS 作成メモ

React
Preact
Cloudflare Pages
Hono
Cloudflare D1
knaka Tech-Blogknaka Tech-Blog

概要

pagesに、ヘッドレスCMS的な設置して使用するメモです

  • プロト版ですが、機能追加予定です

  • 複数CMSを、HeadlessにAPI経由で接続し

  • D1インスタンスの数を、１のみ作成する。

[ 公開: 2023/12/30 ]

環境

  • cloudflare pages
  • cloudflare D1
  • vite
  • React, React-dom
  • preact
  • hono

作成したコード

https://github.com/kuc-arc-f/hono_vite_35head

  • フルスタック構成
  • React SSR: react-dom/server 使用
  • フロントは、preact.js
  • 予定している構成
  • headlessは、フルスタック
  • 表示系CMSは、API経由で連携する

手順

  • D1インスタンス作成しておく
  • pagesにデプロイ
  • pages 設定画面、D1　バインディングを。作成したD1に設定する
  • ローカルDBに、接続できない場合。.wrangler　.mf　フォルダを削除し。ローカルDB作成からやり直す
knaka Tech-Blogknaka Tech-Blog
  • package.json
{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build && vite build --mode client",
    "preview": "wrangler pages dev dist",
    "deploy": "$npm_execpath run build && wrangler pages deploy dist"
  },
  "dependencies": {
    "hono": "^3.11.11",
    "htm": "^3.1.1",
    "marked": "^11.1.0",
    "micromodal": "^0.4.10",
    "preact": "^10.19.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20231218.0",
    "@hono/vite-cloudflare-pages": "^0.1.2",
    "@hono/vite-dev-server": "^0.3.1",
    "@preact/preset-vite": "^2.7.0",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "vite": "^5.0.10",
    "wrangler": "^3.22.0"
  }
}
knaka Tech-Blogknaka Tech-Blog
  • vite.config.ts
vite.config.ts
import pages from '@hono/vite-cloudflare-pages'
import devServer from '@hono/vite-dev-server'
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      build: {
        lib: {
          entry: [
            './src/client.ts',
            './src/client/SiteIndex.ts',
            './src/client/PostIndex.ts',
            './src/client/PostCreate.ts',
            './src/client/PostEdit.ts',
          ],
          formats: ['es'],
          fileName: '[name]',
        },
        rollupOptions: {
          output: {
            dir: './dist/static'
          }
        },
        emptyOutDir: false,
        copyPublicDir: false
      }
    }
  } else {
    return {
      plugins: [
        pages(),
        devServer({
          entry: 'src/index.tsx',
          cf: {
            d1Databases: ['DB'],
            d1Persist: true
          }
        })
      ]
    }
  }
})
knaka Tech-Blogknaka Tech-Blog

  • API認証を追加、Middlewareで。 /api/*　にKEY認証を追加しました

  • src/index.tsx

index.tsx
app.use("/api/*", async (c, next) => {
  const body = await c.req.json();
  console.log(body);
  const v = await Common.validApiKey(body);
console.log(v);
  if(!v){
    return c.json({ret: "NG", data: [], message: "Error, api-Middleware-auth"});
  }
  await next();
});
  • .env に、VITE_API_KEYを追加
  • key不正値の場合、認証エラーにしてます。
VITE_USER_NAME=hoge
VITE_USER_PASSWORD=123456
VITE_API_KEY="123"