EmDash는 Astro 애플리케이션 내에서 실행됩니다. 공개 페이지와 관리 패널은 EmDash 런타임, 데이터베이스, 미디어 스토리지를 공유합니다. 프론트엔드와 별도의 CMS 서비스가 아닌 하나의 배포된 애플리케이션의 일부입니다.
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()를 호출합니다. 다음 쿼리는 페이지가 렌더링될 때 게시물을 로드합니다:
---
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 라우트, 설정 또는 관리 인터페이스를 추가할 수 있습니다. 네이티브 플러그인은 호스트 애플리케이션의 접근 권한으로 실행됩니다. 표준 형식 플러그인은 사이트가 샌드박스 러너를 구성하고 기능을 부여할 때 격리된 런타임에서 실행할 수 있습니다. 설치하거나 만들기 전에 플러그인 형식 선택을 참조하세요.