Github Html Preview — VPS (Ubuntu 24.04) / Docker 環境でのセットアップ手順

forked from dohyeon5626/github-html-preview-extension

This Chrome extension allows you to instantly preview HTML files on GitHub. With a single click, you can see the rendered HTML in a new tab, and it also supports private repositories when configured with your GitHub token.

このリポジトリでは元の拡張実装をベースに、
元のハードコードされていたAPI サーバ（ https://api.dohyeon5626.com ）とプレビューサーバ（ https://github-html-preview.dohyeon5626.com ）を
利用者独自のHTTPS 環境で起動する Docker Compose テンプレートおよび自動化スクリプトを追加しました。
nginx-proxy と acme-companion を使用して、Let's Encrypt による SSL 証明書の自動取得・更新を行います。

前提条件

• 公開可能なドメイン（例: example.com）を所有し、DNS 設定でサーバの IP を指していること
• ポート 80 と 443 が開放されていること
• Ubuntu 24.04 VPS（推奨）または Docker が動作する環境
• Docker Engine がログインするユーザーの実行権限付きでインストールされていること

手順（概要）

1. リポジトリのクローン

git clone https://github.com/CTD-Networks-CO-LTD/github-html-preview-extension-private
cd github-html-preview-extension-private

2. 環境変数の設定

.env ファイルを編集して、実際のドメインとメールアドレスを設定します。

sudo cp -p env.example .env
sudo vi .env

設定例:

# Example .env for build-time configuration
# Set your API base URL (no trailing slash preferred)
API_BASE_URL=https://api.example.com
API_DOMAIN=api.example.com

# Set your preview site base URL (no trailing slash)
PREVIEW_BASE_URL=https://github-html-preview.example.com
PREVIEW_DOMAIN=github-html-preview.example.com

# Email for Let's Encrypt notifications (Required for HTTPS setup)
LETSENCRYPT_EMAIL=mail@example.com

3. サーバの起動

Docker Compose を使用して、リバースプロキシと各サーバを起動します。

docker compose up -d

これにより、以下のコンテナが起動します:

• nginx-proxy: リバースプロキシ
• acme-companion: Let's Encrypt 証明書の自動取得
• api: API サーバ (https://api.example.com)
• preview: プレビューサーバ (https://github-html-preview.example.com)

4. 拡張機能のビルド

VPS 上で拡張機能をビルドします。ビルドスクリプトにより Node.js のインストールからビルドまで自動で行われます。

sudo bash ./build.sh

成功すると dist ディレクトリが生成されます。このディレクトリ内の manifest.json は、.env で設定したドメインに自動的に書き換えられています。

5. ブラウザへの読み込み

1. VPS 上の dist フォルダをローカル PC にダウンロードします。
2. distは削除するとこのプラグインが動作しなくなるのでローカルPCの保管場所（例：ドキュメント）に移動させます。
3. Chrome の拡張管理ページ（chrome://extensions）を開き、「デベロッパーモード」を有効にします。
4. 「パッケージ化されていない拡張機能を読み込む」から、ダウンロードした dist フォルダを選択します。

注意事項 / セキュリティ

• ドメインの所有: Let's Encrypt は実際にインターネットからアクセス可能なドメインに対してのみ証明書を発行します。
• API の実装: 追加した Docker の API はモック実装です。実運用で使う場合は適切な認証・トークン保護を実装してください。
• シークレットの管理: .env にはクライアント側の URL 設定のみを記述してください。サーバ側のシークレットは別途安全に管理してください。

ファイル構成（追加・更新分）

• docker-compose.yml: HTTPS/Let's Encrypt 対応のコンテナ構成
• build.sh: 拡張機能自動ビルドスクリプト
• .env.example: 環境変数のテンプレート
• docker/api/*: 簡易 API サーバ
• docker/preview/*: 簡易プレビューサーバ