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