기존 Astro 프로젝트에 EmDash 추가하기

npm create emdash@latest는 사전 구성된 프로젝트를 제공하지만, EmDash는 기존 Astro 사이트에도 통합할 수 있습니다. 이 가이드는 스타터 템플릿이 일반적으로 처리하는 각 요구사항을 순서대로 설명합니다.

사전 요구사항

Astro 6 이상 — 이전 메이저 버전인 경우 먼저 업그레이드 (npx @astrojs/upgrade)
Node.js v22.12.0 이상 (홀수 버전은 지원되지 않음)
서버 출력 — EmDash는 런타임에 콘텐츠를 제공하므로 프로젝트에 output: "server"와 어댑터가 필요합니다

패키지 설치

npm

npm install emdash @astrojs/react react react-dom

pnpm

pnpm add emdash @astrojs/react react react-dom

yarn

yarn add emdash @astrojs/react react react-dom

로컬 SQLite 데이터베이스의 경우:

npm install better-sqlite3

인테그레이션 등록

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import react from "@astrojs/react";
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",
			}),
		}),
	],
});

라이브 컬렉션 로더 추가

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

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

설치 확인

개발 서버를 시작합니다:
```
npm run dev
```
http://localhost:4321/_emdash/admin을 열고 설정 마법사를 완료합니다.

게시물을 생성하고 발행한 다음 페이지에서 쿼리합니다:

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

const { entries: posts } = await getEmDashCollection("posts", {
	status: "published",
});
---

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

Cloudflare에 배포

전체 구성은 Cloudflare에 배포를 참조하세요.

문제 해결

증상	원인	해결 방법
관리자가 “Loading EmDash…”에서 멈춤	`@astrojs/react` 미등록	`react()`를 `integrations`에 추가
`Could not resolve "astro:content"`	Astro 6 이전 버전	Astro 업그레이드
`getEmDashCollection`이 오류 반환	`src/live.config.ts` 누락	로더 추가
빌드 오류	peer 의존성 미설치	`@astrojs/react`, `react`, `react-dom` 설치
콘텐츠 변경사항이 나타나지 않음	페이지가 프리렌더링됨	`export const prerender = false` 설정