웹 호스팅, Docker, nginx에 마크다운 에디터를 직접 설치하는 방법

마크다운 에디터를 직접 호스팅하면 팀 전체가 내 도메인에서 익숙한 도구 하나를 함께 쓸 수 있습니다. 계정도, 구독도 없고, 다른 회사의 서비스가 계속 운영되기를 바랄 필요도 없습니다. 에디터가 정적 웹 앱이라면 호스팅은 HTML 파일 몇 개를 올리는 것만큼 간단합니다. 관리할 데이터베이스도, 업데이트할 서버 측 코드도 없고, 서버 부하도 거의 없습니다.

이 가이드에서는 Markdown Preview Editor를 예로 듭니다. 무료 오픈 소스(MIT)이며, 같은 단계를 어떤 정적 웹 애플리케이션에도 적용할 수 있습니다.

왜 마크다운 에디터를 직접 호스팅할까?

• 내 도메인, 내 규칙. markdown.your-company.com처럼 내가 관리하는 주소에서 에디터를 쓸 수 있고, 모든 사용자에게 똑같이 작동합니다.
• 관리할 것이 없습니다. 정적 사이트에는 백엔드가 없으므로 서버 코드 보안 패치도, 데이터베이스 백업도 필요 없습니다.
• 문서는 로컬에 머뭅니다. Markdown Preview Editor는 모든 것을 방문자의 브라우저에서 렌더링합니다. 서버는 앱 파일만 전달할 뿐, 문서를 받지 않습니다.
• 운영 비용이 들지 않습니다. 공유 웹 호스팅 요금제, 작은 VPS, 컨테이너 플랫폼이면 충분합니다.

준비물

HTTPS로 정적 파일을 제공할 수 있는 웹 서버라면 무엇이든 됩니다.

• cPanel, Plesk, DirectAdmin이 있는 공유 웹 호스팅(Apache 또는 LiteSpeed),
• Docker가 설치된 서버,
• VPS의 nginx 또는 Caddy,
• 로컬에서 쓸 거라면 내 컴퓨터도 가능합니다.

서버에 PHP, Node.js, 데이터베이스는 필요 없습니다.

방법 1: 웹 호스팅(cPanel 등)

가장 빠른 방법이며 명령줄이 필요 없습니다.

1. 사이트 압축 파일 다운로드. 최신 릴리스에서 markdown-preview-editor-site.zip을 받으세요. 미리 빌드된 웹사이트가 들어 있습니다.
2. 주소 정하기. 메인 도메인을 쓰거나, 호스팅 관리 패널에서 markdown.example.com 같은 서브도메인을 만드세요. 서브도메인의 문서 루트(document root) 폴더를 확인해 두세요.
3. HTTPS 켜기. 대부분의 호스팅 업체는 무료 인증서(AutoSSL 또는 Let’s Encrypt)를 자동으로 발급합니다. 도메인이나 서브도메인에 인증서가 활성화되어 있는지 확인하세요.
4. 업로드하고 압축 풀기. 파일 관리자를 열고 문서 루트로 이동해 zip 파일을 올린 뒤 압축 풀기(Extract)를 선택하세요. 숨김 파일인 .htaccess를 포함한 모든 파일이 하위 폴더가 아니라 문서 루트 바로 아래에 있어야 합니다.
5. 도메인 열기. 에디터가 준비되었습니다.

함께 들어 있는 .htaccess는 Apache와 LiteSpeed 서버에서 HTTP를 HTTPS로 리디렉션하고, 보안 헤더를 설정하고, 캐싱을 구성합니다.

방법 2: Docker

컨테이너를 운영한다면 저장소를 복제하고 포함된 Compose 파일로 실행하세요.

bashgit clone https://github.com/ovasendin/markdown_preview_editor.git
cd markdown_preview_editor
PORT=8080 docker compose -f deploy/docker-compose.yml up -d --build

http://localhost:8080(또는 지정한 포트)을 여세요. 이미지는 사이트를 빌드하고 같은 보안 헤더를 적용해 nginx로 제공합니다. 공개 도메인에서 쓰려면 평소 쓰는 HTTPS 리버스 프록시 뒤에 컨테이너를 두세요.

방법 3: nginx

사이트를 빌드하거나(또는 릴리스 압축 파일을 풀고) 파일을 웹 루트에 복사하세요.

bashnpm ci && npm run build
sudo cp -r dist/* /var/www/markdown/

저장소의 deploy/nginx.conf에 보안 헤더와 캐싱 규칙이 포함된 설정이 준비되어 있습니다. 정적 사이트 설정의 핵심은 짧습니다.

nginxserver {
    listen 443 ssl;
    server_name markdown.example.com;
    # ssl_certificate와 ssl_certificate_key 설정은 여기에

    root /var/www/markdown;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

sudo nginx -s reload로 nginx를 다시 불러온 뒤 도메인을 여세요.

방법 4: Caddy

Caddy는 HTTPS 인증서를 자동으로 발급받으므로 VPS에서 가장 간단한 선택입니다.

bashSITE_ADDRESS=markdown.example.com caddy run --config deploy/Caddyfile

먼저 빌드된 파일을 /srv에 복사하세요. 포함된 Caddyfile이 다른 방법과 같은 헤더로 파일을 제공합니다.

방법 5: 로컬에서 실행

개인적으로 쓴다면 서버가 아예 필요 없습니다.

bashnpm ci
npm run dev

출력된 로컬 주소를 브라우저에서 여세요.

최신 상태로 유지하기

정적 사이트를 업데이트한다는 것은 파일을 교체한다는 뜻입니다. 새 릴리스 압축 파일을 받아 기존 파일 위에 풀고 페이지를 새로 고치세요. 앱의 파일 이름에 콘텐츠 해시가 들어 있으므로, 브라우저가 오래된 캐시 없이 새 버전을 불러옵니다. 새 버전 알림을 받으려면 GitHub 저장소를 Watch하세요(Watch → Custom → Releases).

배포 후 체크리스트

• 사이트가 https://로 열리고, http://가 그쪽으로 리디렉션된다.
• 마크다운 파일을 편집기로 끌어 놓으면 새 탭에서 열린다.
• 설정에서 테마와 언어를 바꿀 수 있다.
• 테스트 문서를 HTML로 내보내 다운로드가 되는지 확인한다.

에디터가 가동되면 팀과 마크다운 문법 총정리를 공유하고, 마크다운 미리 보기와 HTML·PDF 내보내기 가이드도 북마크해 두세요.