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

EmDash, Node.js 어댑터, React 지원을 설치합니다:

npm install emdash @astrojs/node @astrojs/react react react-dom

pnpm add emdash @astrojs/node @astrojs/react react react-dom

yarn add emdash @astrojs/node @astrojs/react react react-dom

EmDash는 공개 사이트에 React 컴포넌트가 없더라도 관리자 패널에 React를 사용합니다.

astro.config.mjs에서 어댑터, React, EmDash를 등록합니다. 파일에 이미 다른 통합이나 설정이 있는 경우 유지하고 이 예제에서 관련 항목을 추가하세요:

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",
            }),
        }),
    ],
});

SQLite는 콘텐츠와 콘텐츠 모델을 data.db에 저장합니다. 로컬 스토리지 어댑터는 미디어를 uploads/에 쓰고 EmDash의 미디어 라우트를 통해 제공합니다. 아직 제외되지 않은 경우 두 경로를 .gitignore에 추가하세요.

src/live.config.ts를 생성하여 EmDash를 Astro의 콘텐츠 시스템에 연결합니다:

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

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

프로젝트에 이미 src/live.config.ts가 있는 경우, 파일을 교체하는 대신 내보낸 collections 객체에 _emdash 항목을 추가하세요. 파일 기반 컬렉션을 위한 별도의 src/content.config.ts는 함께 계속 작동합니다.

로컬 암호화 키를 생성하고 .env에 작성합니다:

npx emdash secrets generate --write .env

.env가 .gitignore에서 제외되어 있는지 확인하세요. 키는 데이터베이스에 저장된 플러그인 시크릿을 보호합니다. 키를 교체하거나 잃으면 암호화된 값을 읽을 수 없게 되므로, 사이트를 배포하기 전에 보호된 백업을 유지하세요.

개발 서버를 시작합니다:

npm run dev

http://localhost:4321/_emdash/admin/을 엽니다. 첫 방문 시 설정 마법사로 리디렉션됩니다. 사이트 세부 정보를 입력하고, 관리자 계정을 만들고, 패스키를 등록합니다.

이 프로젝트에는 시드 파일이 없으므로, 설정은 EmDash의 내장 시작 모델을 적용합니다. Posts와 Pages 컬렉션, 제목과 콘텐츠 필드, 카테고리와 태그 택소노미를 생성합니다. 샘플 항목은 추가하지 않습니다.

Posts를 열고 New Post를 선택하고 제목으로 EmDash is connected를 입력합니다. Save를 선택하여 항목을 생성한 다음 Publish를 선택합니다.