自前のVS Code拡張機能マーケットプレイス構築入門 - code-marketplace活用術

はじめに

「インターネットに接続できない環境で VS Code の拡張機能を使いたい」
「社内だけで利用する独自の拡張機能を、安全に配布・管理したい」
「プロジェクトごとに利用する拡張機能を統一して、開発環境の差異をなくしたい」

VS Code を利用する上で、このような課題に直面したことはないでしょうか。
本記事では、これらの課題を解決するオープンソースのプライベートマーケットプレイス「code-marketplace」に焦点を当て、その構築方法と活用術を詳しく解説します。

code-marketplace とは

code-marketplace は、VS Code の拡張機能を提供するオープンソースの代替マーケットプレイスであり、インターネットに接続できない環境下でのソリューションとして Coder によって提供されています。
以下のような特徴があります。

• 単一のバイナリとして提供: 軽量でデプロイが非常に簡単です。
• ファイルストレージベース: 拡張機能はサーバー上のファイルとして管理され、シンプルで分かりやすい構成です。
• 署名機能: 拡張機能に署名を行うことで、セキュリティを確保します。

詳細は code-marketplace の GitHub リポジトリ を参照してください。

なぜ自前のマーケットプレイスが必要か？

公式の Visual Studio Marketplace は非常に便利ですが、特定の状況下では利用が難しい、あるいは不適切な場合があります。code-marketplace は、そうしたシナリオで真価を発揮します。

シナリオ 1: オフライン・閉鎖環境での利用

セキュリティ要件が厳しい金融機関や研究施設など、インターネットに接続できない環境では、公式マーケットプレイスにアクセスできません。code-marketplace を内部ネットワークに構築すれば、オフライン環境でも安全に拡張機能を利用できます。

シナリオ 2: 社内・チーム内での独自拡張機能の配布

社内の API クライアントや、定型業務を自動化するスニペット集など、組織内部でのみ利用したい独自の拡張機能を開発するケースは少なくありません。これらを code-marketplace で限定的に公開すれば、外部に漏れることなく、関係者のみに安全に配布できます。

シナリオ 3: 拡張機能の利用統制

プロジェクトで使用する拡張機能を特定のバージョンに固定したり、セキュリティ上問題のある拡張機能の利用を禁止したりするなど、開発環境の標準化と統制を図りたい場合に有効です。承認された拡張機能のみをプライベートマーケットプレイスで提供することで、チーム全体の開発環境を統一し、不要なトラブルを防ぎます。

アーキテクチャ概要

今回構築するシステムの全体像は以下の通りです。ユーザーの PC 上で Docker コンテナを起動し、ブラウザからアクセスすることを想定しています。nginx がリクエストの窓口となり、リクエストされたドメイン名に応じて、code-marketplace または code-server へとリクエストを振り分けます。

環境構築：プライベートマーケットプレイスを立ち上げる

それでは、実際に code-marketplace を Docker を使って構築してみましょう。
ここでは、HTTPS 化を行うリバースプロキシとして nginx を利用します。

事前準備

まず、作業ディレクトリを以下の構成で作成します。

code-marketplace-server/
├── .gitignore
├── compose.yml
├── nginx.conf
├── marketplace/
│   └── Dockerfile
└── ssl/
    ├── nginx.crt
    └── nginx.key

1. .gitignore の作成

.gitignore

# SSL証明書
ssl/*
!ssl/.gitkeep

# 拡張機能ファイル
*.vsix

2. SSL 証明書の作成

自己署名証明書を作成します。

ターミナル

cd code-marketplace-server
mkdir -p ssl
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout ssl/nginx.key \
  -out ssl/nginx.crt \
  -subj "/C=JP/ST=Tokyo/L=Chiyoda/O=Example Inc./OU=IT/CN=*.local"

3. hosts ファイルの編集

/etc/hosts (macOS/Linux) または C:\Windows\System32\drivers\etc\hosts (Windows) に以下を追記します。

127.0.0.1 code-marketplace.local

4. 拡張機能ファイルのダウンロード

Important:
Microsoft が提供する Visual Studio Marketplace の利用規約では、そこで公開されている拡張機能を公式の Visual Studio Code 以外で利用することは許可されていません。
そのため、本記事では代替マーケットプレイスである Open VSX Registry を利用します。

今回は例として、日本語化拡張機能をダウンロードし、code-marketplace-server ディレクトリ直下に配置してください。

Docker 関連ファイルの設定

1. marketplace/Dockerfile

code-marketplace のコンテナイメージを定義します。

marketplace/Dockerfile

FROM alpine:latest

ARG OS=linux
ARG ARCH=amd64

RUN apk add --no-cache wget

RUN wget "https://github.com/coder/code-marketplace/releases/latest/download/code-marketplace-${OS}-${ARCH}" -O /usr/local/bin/code-marketplace \
    && chmod +x /usr/local/bin/code-marketplace

RUN mkdir -p /var/lib/code-marketplace/extensions
WORKDIR /var/lib/code-marketplace/extensions

2. nginx.conf

nginx の設定ファイルです。

nginx.conf

events {
    worker_connections  1024;
}

http {
    resolver 127.0.0.11 valid=10s;

    upstream code-marketplace {
        zone code-marketplace 64k;
        server marketplace:3000 resolve;
    }

    ssl_certificate /etc/nginx/ssl/nginx.crt;
    ssl_certificate_key /etc/nginx/ssl/nginx.key;

    server {
        listen       443 ssl;
        server_name  code-marketplace.local;

        location / {
            proxy_pass http://code-marketplace;
            proxy_set_header X-Forwarded-Host $http_host;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

3. compose.yml

Docker Compose の設定ファイルです。

compose.yml

services:
  marketplace:
    build:
      context: ./marketplace
      dockerfile: Dockerfile
    container_name: marketplace
    restart: always
    entrypoint: [
        "code-marketplace",
        "server",
        "--address=0.0.0.0:3000",
        "--sign",
        "--extensions-dir=/var/lib/code-marketplace/extensions",
      ]
    volumes:
      - marketplace-data:/var/lib/code-marketplace/extensions

  nginx:
    image: nginx:alpine
    container_name: nginx
    restart: always
    ports:
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./ssl/nginx.crt:/etc/nginx/ssl/nginx.crt:ro
      - ./ssl/nginx.key:/etc/nginx/ssl/nginx.key:ro
    depends_on:
      - marketplace

volumes:
  marketplace-data:

起動と拡張機能の登録

1. サービスの起動

   ターミナル

   docker compose up -d --build
   

2. 拡張機能の登録

   ターミナル

   # コンテナにvsixファイルをコピー
   docker compose cp MS-CEINTL.vscode-language-pack-ja-1.96.0.vsix marketplace:/tmp
   
   # マーケットプレイスに拡張機能を追加
   docker compose exec marketplace code-marketplace add /tmp/MS-CEINTL.vscode-language-pack-ja-1.96.0.vsix
   

これで、https://code-marketplace.local にアクセスすると、登録した拡張機能の一覧が表示されるプライベートマーケットプレイスが完成しました。

利用例：code-server と連携する

構築したプライベートマーケットプレイスを、ブラウザベースの VS Code である code-server から利用してみましょう。

compose.yml に code-server のサービス定義を追記します。
このとき、環境変数 EXTENSIONS_GALLERY に自前のマーケットプレイスの情報を設定することが必須です。これにより、code-server は拡張機能の問い合わせ先を、公式のマーケットプレイスから今回構築したものへと変更します。

compose.yml (追記)

services:
  code-server:
    image: codercom/code-server:latest
    container_name: code-server
    restart: always
    environment:
      - PASSWORD=your_strong_password # 必ず強力なパスワードに変更してください
      - EXTENSIONS_GALLERY={"serviceUrl":"https://code-marketplace.local/api","itemUrl":"https://code-marketplace.local/item","resourceUrlTemplate":"https://code-marketplace.local/files/{publisher}/{name}/{version}/{path}"}
    volumes:
      - code-server-data:/home/coder

  # ... marketplace, nginx の定義は省略 ...

nginx.conf にも code-server 用の設定を追記し、hosts ファイルに 127.0.0.1 code-server.local を追加後、docker compose up -d を実行すれば、code-server から自前のマーケットプレイスを利用できます。

Note: > code-server の詳細な設定方法は、本記事の主旨と異なるため割愛します。興味のある方は、公式ドキュメントをご参照ください。

まとめ

本記事では、プライベートな VS Code 拡張機能マーケットプレイスを構築できる code-marketplace に焦点を当て、その必要性から具体的な構築手順までを解説しました。

• オフライン環境での拡張機能利用
• 独自拡張機能のセキュアな配布
• 開発環境の標準化と統制強化

これらの課題を抱えているチームや組織にとって、code-marketplace は非常に強力なソリューションとなります。ぜひ、独自のマーケットプレイス構築に挑戦してみてください。