관리자 패널 프록시 설정
웹사이트에 관리자 패널을 연결하는 것은 간단한 단계입니다.
이는 편집 경험이 끊김 없이 이루어지도록 보장합니다. 프록시를 통해 관리자 패널이 웹사이트에 연결되어 있으면 동일한 URL에서 웹사이트를 편집하고 실시간으로 변경 사항을 시각적으로 미리 볼 수 있습니다. 또한 오버레이 편집을 사용할 수 있어 웹페이지를 편집할 때 더 나은 사용자 경험을 제공합니다.
프록시 설정은 프로젝트의 proxy.ts 파일만 있으면 되며 URL 재작성처럼 동작하여 웹사이트의 /admin 엔드포인트가 CMS에 연결되도록 해 줍니다.
localhost의 경우: CMS가 localhost에 직접 접근할 수 없으므로 터널을 사용해야 합니다.// proxy.ts
import { createCmsProxy } from 'cms-renderer/lib/proxy';
export const proxy = createCmsProxy({
upstream: "https://cms.dev.tryprofound.com", // CMS 관리자 패널
이제 웹사이트에서 /admin으로 이동하면 관리자 패널에 접근할 수 있습니다. 이렇게 하면 실시간 미리보기가 활성화됩니다.
오버레이는 자동으로 처리됩니다. 렌더러에 searchParams만 전달하면 됩니다.
// page.tsx
interface PageProps {
params: Promise<{ slug: string[] }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function Page({ params, searchParams }: PageProps) {
const { slug } = await params;
return (
<ParametricRoutePage
registry={registry}
apiKey="sk_..."
websiteId="a2717ba3-29db-..."
cmsUrl={"https://cms.dev.tryprofound.com"}
params={Promise.resolve({ slug })}
searchParams={searchParams}
/>
);
}
/admin으로 이동합니다.오버레이와 실시간 미리보기는 자동으로 작동해야 합니다.