アーキテクチャ

このページ

EmDashはAstroアプリケーション内で動作します。公開ページと管理パネルはEmDashランタイム、データベース、メディアストレージを共有します。フロントエンドと別のCMSサービスではなく、1つのデプロイされたアプリケーションの一部です。

EmDashサイトの構成要素

以下の表は、各パーツがEmDashランタイムを通じてどのように接続されるかを示しています:

パーツアクション接続
管理パネルエントリとメディアを保存変更をEmDashランタイムに送信
Astroページとコンポーネント公開サイト用のエントリをクエリEmDashランタイムを通じてコンテンツを読み取り
EmDashランタイムコンテンツモデル、公開ルール、クエリ、プラグイン、API動作を適用データベースとメディアストレージの読み書き
SQLデータベースコンテンツモデル、エントリ、ユーザー、設定、その他のレコードを保存EmDashランタイムが使用
メディアストレージアップロードされたファイルを保存EmDashランタイムが使用

エディターは管理パネルを使用してコンテンツを操作します。サイト開発者は、Astroのページとコンポーネントを書くことで、そのコンテンツの表示方法を決定します。両者は同じコンテンツモデル、つまり各エントリを記述するコレクションとフィールドの定義を使用します。

データベースはコンテンツモデル、エントリ、ユーザー、設定、その他のCMSレコードを保存します。メディアストレージアダプターはアップロードされたファイルを保持します。エントリ内のメディアフィールドは、コンテンツテーブルにファイルバイトを配置するのではなく、保存されたメディアアイテムを参照します。

Astroが設定するもの

EmDashサイトは、管理画面、APIルート、現在のコンテンツが実行時に配信されるため、サーバーレンダリングが必要です。Astroをoutput: "server"とデプロイプラットフォーム用のアダプターで設定してください。

Astroインテグレーション配列にReactとEmDashの両方を登録してください。Reactは管理パネルをハイドレーションします。@astrojs/reactがインストールされていても配列にreact()がない場合、管理ページは**EmDashを読み込み中…**のままになります。

次のNode.jsの例ではSQLiteデータベースとローカルメディアストレージを提供します:

import node from "@astrojs/node";
import react from "@astrojs/react";
import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
	output: "server",
	adapter: node({ mode: "standalone" }),
	integrations: [
		react(),
		emdash({
			database: sqlite({ url: "file:./data.db" }),
			storage: local({
				directory: "./uploads",
				baseUrl: "/_emdash/api/media/file",
			}),
		}),
	],
});

インテグレーションは他のサポートされたデータベースとストレージアダプターを使用できます。storageを省略した場合、ローカルストレージアダプターがデフォルトですが、本番デプロイにはアプリケーションのリリースとインスタンスにわたって永続するストレージが必要です。利用可能なアダプターとオプションについては設定を参照してください。

ページがコンテンツをクエリする方法

src/live.config.tsはEmDashローダーをAstroライブコンテンツコレクションとして登録します:

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
	_emdash: defineLiveCollection({ loader: emdashLoader() }),
};

ページはgetEmDashCollection()でリストを、getEmDashEntry()で1つのエントリを取得します。次のクエリはページがレンダリングされるときに投稿を読み込みます:

---
import { getEmDashCollection } from "emdash";

const { entries: posts, error } = await getEmDashCollection("posts");

if (error) throw error;
---

<ul>{posts.map((post) => <li>{post.data.title}</li>)}</ul>

サーバーレンダリングされたページは、設定したキャッシュに従って、受信リクエストに対してこのクエリを実行します。プリレンダリングされたページはビルド中に実行し、次のビルドまで後の編集を表示できません。

モデルの変更方法

管理者は管理パネルでコレクションとフィールドを作成できます。EmDashはデータベーススキーマを変更し、以降のエントリとクエリが新しいモデルを使用するようにします。シードファイルは別の環境の開始モデルをバージョン管理された方法で記述し、生成されたTypeScript宣言は開発者がコード内で現在のモデルを使用するのに役立ちます。

これらのツールは同じモデルを記述し変更します。並行コピーは作成しません。ワークフローとデータ安全性の境界についてはコンテンツモデルをお読みください。

プラグインがランタイムを拡張する方法

プラグインはコンテンツとメディアのイベントに応答し、APIルート、設定、管理インターフェースを追加できます。ネイティブプラグインはホストアプリケーションのアクセス権で実行されます。標準フォーマットプラグインは、サイトがサンドボックスランナーを設定し機能を付与する場合、分離されたランタイムで実行できます。インストールまたは構築する前にプラグイン形式の選択をお読みください。