아키텍처

이 페이지

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 라우트, 설정 또는 관리 인터페이스를 추가할 수 있습니다. 네이티브 플러그인은 호스트 애플리케이션의 접근 권한으로 실행됩니다. 표준 형식 플러그인은 사이트가 샌드박스 러너를 구성하고 기능을 부여할 때 격리된 런타임에서 실행할 수 있습니다. 설치하거나 만들기 전에 플러그인 형식 선택을 참조하세요.