mcpField
V
vscode-sftp-config

vscode-sftp-config

github.com/libukaiクラウド・DevOps557 回インストール
リポジトリ

vscode-sftp-config について

VSCode SFTP で静的サイトを本番サーバーへ配置するためのスキルです。プロジェクト分析から接続設定、Nginx 設定、配置確認までを案内し、HTTPS、セキュリティヘッダー、キャッシュを含むテンプレートを備えています。

主な機能

  1. 01静的プロジェクトとビルド出力の分析
  2. 02VSCode SFTP 設定の生成
  3. 03SSH ホストエイリアスの設定
  4. 04メインドメイン・サブドメイン用 Nginx テンプレート
  5. 05配置と検証のチェックリスト

活用シーン

  1. 01静的サイトを本番サーバーへ同期
  2. 02Nginx の仮想ホスト設定を作成
  3. 03開発・テスト・本番の接続設定を計画
  4. 04配置ファイル、HTTPS、レスポンスヘッダーの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/libukai/awesome-agent-skills --skill vscode-sftp-config

インストール後、Claude Code で/vscode-sftp-configを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/
deploy-checklist.md
nginx-static.conf.template
nginx-subdomain.conf.template
sftp.json.template
references/
nginx-best-practices.md
ssh-config.md
ssl-security.md

詳細

VSCode SFTP の設定

静的ウェブサイトを本番サーバーにデプロイするために、VSCode SFTP を設定します。セキュリティヘッダー、キャッシュ戦略、パフォーマンス最適化を含む、本番環境向けの Nginx 設定テンプレートを使った完全なワークフローを提供します。

基本的なワークフロー

ステップ 1：プロジェクト構成を分析する

デプロイする静的ファイルを特定します。

  • 純粋な静的プロジェクト：ルートディレクトリにある HTML、CSS、JS
  • ビルドベースのプロジェクト：dist/、build/、public/ の出力ディレクトリを確認します
  • 静的サイトジェネレーター：package.json またはドキュメントに記載されたビルドコマンドを確認します

デプロイの詳細をユーザーに確認します。

  1. リモートサーバーのアドレス（IP またはホスト名）
  2. リモートパス（例：/var/www/sitename）
  3. SSH 認証方式（パスワードまたは SSH キーのパス）
  4. Nginx の設定に使用するドメイン名
  5. メインドメインかサブドメインか
ステップ 2：SFTP の設定を生成する

VSCode 拡張機能：このスキルでは、Satiro Marra による code-sftp 拡張機能を使用します。

ステップ 2A：SSH Config を設定する（推奨されるベストプラクティス）

sftp.json を作成する前に、管理しやすくするため、~/.ssh/config に SSH ホストのエイリアスを設定します。

Host project-prod
    HostName 82.157.29.215
    User root
    Port 22
    IdentityFile ~/.ssh/id_rsa
    IdentitiesOnly yes
    ServerAliveInterval 60
    ServerAliveCountMax 3

SSH config の利点：

  • ✅ SFTP 拡張機能の警告（Section for 'IP' not found）を解消します
  • ✅ ターミナルでホストエイリアスを使用できます：ssh project-prod
  • ✅ SSH 設定（接続の keep-alive、圧縮など）を一元管理できます
  • ✅ 複数の環境（開発、ステージング、本番）を簡単に管理できます

~/.ssh/config にサーバーがすでに登録されているか確認します。

cat ~/.ssh/config | grep -A 5 "82.157.29.215"

登録されている場合は、その既存のホストエイリアスを使用します。登録されていない場合は、新しいエントリを追加します。

ステップ 2B：SFTP の設定を作成する

assets/sftp.json.template のテンプレートを使って、.vscode/sftp.json を作成します。

必須の設定項目：

  • name：識別しやすいプロファイル名
  • host：SSH ホストエイリアス（例："Tencent_Pro"）または IP アドレス
  • protocol：SFTP（セキュア）には「sftp」、FTP には「ftp」
  • port：SFTP は 22、FTP は 21
  • username：SSH/FTP のユーザー名
  • privateKeyPath：SSH 秘密鍵のパス（例：/Users/username/.ssh/id_rsa）
  • remotePath：リモートディレクトリのパス（例：/var/www/sitename）
  • uploadOnSave：false を推奨します（手動同期のほうが安全です）

任意の高度な設定項目：

  • ignore：アップロード対象から除外するファイルやフォルダーの配列
  • watcher：自動アップロード用のファイル監視設定
  • syncOption：同期の動作（ファイルの削除、更新、既存ファイルのスキップ）
  • useTempFile：アップロード中に一時ファイルを使用します
  • downloadOnOpen：ファイルを開いたときに自動ダウンロードします

プロジェクトに合わせてカスタマイズします。

  • {{HOST_ALIAS}} を SSH config のエイリアス（推奨）または IP アドレスに置き換えます
  • その他の {{PLACEHOLDERS}} を実際の値に置き換えます
  • プロジェクト固有のファイルを ignore 配列に追加します（.claude、nginx.conf、ビルド成果物など）
  • ビルドベースのプロジェクトの場合：uploadOnSave: false のままにし、ビルド後に手動で同期します
  • 純粋な静的プロジェクトの場合：必要に応じて uploadOnSave: true を有効にし、即時にデプロイできるようにします
ステップ 3：Nginx の設定を生成する

適切なテンプレートを選択します。

  • メインドメイン：メインのウェブサイトには assets/nginx-static.conf.template を使用します
  • サブドメイン：slides.example.com のようなサブドメインには assets/nginx-subdomain.conf.template を使用します

設定をカスタマイズします。

  1. {{DOMAIN}} を実際のドメイン名に置き換えます
  2. {{DOCUMENT_ROOT}} をリモートパス（例：/var/www/aiseed）に置き換えます
  3. カスタム証明書を使用する場合は、SSL 証明書のパスを調整します
  4. 必要に応じてサブドメイン固有の設定を行います

references/nginx-best-practices.md の基本的な機能を含めます。

  • HTTP から HTTPS へのリダイレクト
  • HTTP/2 のサポート
  • Gzip 圧縮
  • 静的リソースのキャッシュ（JS/CSS/画像は 1 年間、HTML は 1 時間）
  • セキュリティヘッダー（HSTS、X-Frame-Options、CSP など）
  • アクセスログとエラーログ
ステップ 4：デプロイ手順を提示する

assets/deploy-checklist.md に基づいて、デプロイチェックリストを作成します。

  1. 初期設定（初回のみ）：

    • VSCode 拡張機能をインストールします：code-sftp by Satiro Marra
    • コマンドパレット（Cmd/Ctrl+Shift+P）を開き、SFTP: Config を実行して .vscode/sftp.json を作成します
    • サーバーへの SSH アクセスを確認します：ssh user@host
    • リモートディレクトリが存在することを確認します：ssh user@host "mkdir -p /var/www/sitename"
    • 適切な権限を設定します：ssh user@host "chmod 755 /var/www/sitename"

  2. ファイルのデプロイ：

    • ビルドが必要なプロジェクトの場合：まずビルドコマンドを実行します（例：npm run build）
    • VSCode のコマンドパレットを開き、SFTP: Sync Local → Remote を実行してすべてのファイルをアップロードします
    • または、エクスプローラーでフォルダーを右クリックし、「Upload Folder」を選択します
    • VSCode の出力パネル（表示 → 出力 → SFTP）でアップロードの進行状況を確認します
    • ファイルがアップロードされたことを確認します：ssh user@host "ls -la /var/www/sitename"

  3. Nginx の設定：

    • 生成された設定ファイルを /etc/nginx/sites-available/ にアップロードします
    • シンボリックリンクを作成します：ln -s /etc/nginx/sites-available/site.conf /etc/nginx/sites-enabled/
    • 設定をテストします：sudo nginx -t
    • リロードします：sudo systemctl reload nginx

  4. SSL/TLS の設定（未設定の場合）：

    • 証明書の設定については references/ssl-security.md を参照してください
    • 無料の証明書には Let's Encrypt を使用します：certbot --nginx -d example.com

  5. 確認：

    • HTTPS をテストします：curl -I https://example.com
    • セキュリティヘッダーを確認します：securityheaders.com を使用します
    • パフォーマンスをテストします：PageSpeed Insights を使用します
ステップ 5：セットアップを文書化する

プロジェクトのドキュメント（README.md または CLAUDE.md）を更新し、以下を記載します。

  • デプロイ方法（SFTP で /var/www/path にデプロイ）
  • SFTP 設定ファイルの場所（.vscode/sftp.json）
  • Nginx 設定の参照先
  • ビルドコマンド（該当する場合）
  • 今後の更新時のデプロイワークフロー

このアーキテクチャの利点

静的ファイル＋SFTP によるデプロイが有利な理由をユーザーに説明します。

  1. シンプル：編集 → アップロード → 公開（ビルドパイプラインもコンテナも不要）
  2. 高パフォーマンス：Nginx は Node.js／Python バックエンドよりも高速に静的ファイルを配信します
  3. 高い信頼性：クラッシュやハングを起こすバックエンドプロセスがありません
  4. リソース効率：サーバーのメモリと CPU の使用量を抑えられます
  5. 低コスト：最小構成の VPS または共有ホスティングでホストできます
  6. 簡単なロールバック：バックアップディレクトリから前のバージョンをコピーできます

このアーキテクチャを使用すべきでない場合

以下の場合、静的ファイル＋SFTP によるデプロイは適していません。

  • バックエンド API エンドポイントが必要な場合
  • サーバー側でのフォーム処理が必要な場合（n8n、FormSpree などの外部サービスを使用する場合を除く）
  • ユーザー認証やセッションが必要な場合
  • データベースとの連携が必要な場合
  • サーバーサイドレンダリング（SSR）が必要な場合

リソース

references/
  • ssh-config.md - SSH 設定ファイルのセットアップとベストプラクティス（ホストエイリアス、ジャンプホスト、セキュリティ）
  • nginx-best-practices.md - 静的サイト向けの包括的な Nginx 最適化ガイド
  • ssl-security.md - SSL/TLS 証明書のセットアップとセキュリティ設定
assets/
  • sftp.json.template - VSCode SFTP 設定テンプレート（配列形式、SSH ホストエイリアスを使用）
  • nginx-static.conf.template - メインドメイン用 Nginx 設定テンプレート
  • nginx-subdomain.conf.template - サブドメイン用 Nginx 設定テンプレート
  • deploy-checklist.md - デプロイを段階的に確認するためのチェックリスト

コメント

Markdown 対応