Markdown エディターをセルフホストする方法：レンタルサーバー、Docker、nginx

セルフホストの Markdown エディターがあれば、チーム全員が自分たちのドメインで、使い慣れた 1 つのツールを使えます。アカウントもサブスクリプションも不要で、他社のサービスが動き続けるかどうかに左右されることもありません。エディターが 静的 Web アプリ なら、ホスティングはいくつかの HTML ファイルを置くのと同じくらい簡単です。管理すべきデータベースも、更新すべきサーバーサイドのコードもなく、サーバーへの負荷もほとんどありません。

このガイドでは Markdown Preview Editor を例に説明します。無料のオープンソース（MIT）で、同じ手順はどんな静的 Web アプリケーションにも応用できます。

Markdown エディターをセルフホストする理由

• 自分のドメイン、自分のルール。 エディターは markdown.your-company.com のような自分で管理するアドレスで使え、利用する全員に同じように動作します。
• メンテナンス不要。 静的サイトにはバックエンドがないため、サーバーコードのセキュリティパッチも、データベースのバックアップも必要ありません。
• ドキュメントはローカルに。 Markdown Preview Editor はすべてを訪問者のブラウザー内で表示します。サーバーはアプリのファイルを配信するだけで、ドキュメントを受け取ることはありません。
• 運用コストは無料。 どんなレンタルサーバーのプランでも、小さな VPS でも、コンテナプラットフォームでも十分です。

必要なもの

HTTPS で静的ファイルを配信できる Web サーバーなら何でもかまいません。

• cPanel、Plesk、DirectAdmin を備えたレンタルサーバー（Apache または LiteSpeed）
• Docker が動くサーバー
• VPS 上の nginx または Caddy
• ローカルで使うなら、自分のパソコンでも

サーバーに PHP、Node.js、データベースは不要です。

方法 1：レンタルサーバー（cPanel など）

いちばん手軽な方法で、コマンドラインも必要ありません。

1. サイトのアーカイブをダウンロードする。 最新リリース から markdown-preview-editor-site.zip を入手します。ビルド済みの Web サイトが含まれています。
2. アドレスを決める。 メインのドメインを使うか、ホスティングのコントロールパネルで markdown.example.com のようなサブドメインを作成します。サブドメインの ドキュメントルート のフォルダーを控えておきましょう。
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

サイトをビルドし（またはリリースアーカイブを展開し）、ファイルを Web ルートにコピーします。

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 and ssl_certificate_key lines go here

    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 → Custom → Releases）すれば、新しいバージョンの通知を受け取れます。

デプロイ後のチェックリスト

• サイトが https:// で開き、http:// からリダイレクトされる。
• Markdown ファイルをエディターにドラッグすると、新しいタブで開く。
• 設定でテーマと言語を切り替えられる。
• テスト用のドキュメントを HTML にエクスポートして、ダウンロードが機能することを確認する。

エディターが稼働したら、Markdown チートシート をチームに共有し、Markdown のプレビュー や HTML・PDF へのエクスポート のガイドもブックマークしておきましょう。