実案件で実際に使用しているリアルな設定例をベースに、初心者にもわかりやすく構成しています。
目次
✅ このガイドでできること
- エックスサーバーでSSHを有効化する方法
- 鍵ペア（公開鍵・秘密鍵）の生成と設定方法
- VS CodeとSFTP拡張機能による自動アップロード設定
- MacとWindowsそれぞれの注意点と対応方法
1. なぜSSH接続が便利なのか？
Web制作やWordPress案件で、サーバーに毎回FTPでファイルをアップするのは面倒ですよね。
そんなときに便利なのが、VS Code × SFTP（SSH）による自動アップロードです。
✅ 主なメリット：
- ファイル保存でそのままサーバーへ反映
- 公開鍵認証でセキュアに接続
- 複数環境（本番／テスト）も簡単に切り替え可能
2. 準備するもの
| 項目 | 説明 |
|---|---|
| エックスサーバーのアカウント | サーバーパネルにログインできる状態 |
| VS Code | 最新版をインストールしておく |
| 拡張機能「SFTP」 | 作者：Natizyskunk（Marketplaceで検索） |
※ 以前は liximomo 版が主流でしたが、現在は開発が止まっており、Natizyskunk によるフォーク版が安定して利用されています。
3. エックスサーバーでSSHを有効にする
- サーバーパネルにログイン
- 「SSH設定」をクリック
- 「ON（国内からのアクセスのみ許可）」に設定
🔍 ポイント：XserverのSSHポートは「10022」です。22では接続できません。
4. 鍵ペアを生成して秘密鍵をダウンロード
方法①：Xserver上で生成（初心者向け）
- サーバーパネル > SSH設定 > 「公開鍵認証用鍵ペアの生成」
- 任意のパスフレーズを入力（例：
MyStr0ngPass!） - 秘密鍵（
.keyファイル）をダウンロードしてPCに保存
方法②：手動で生成（中〜上級者）
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"→ .pub ファイルをXserverにアップロードすればOK。
5. VS CodeのSFTP設定（sftp.json）
- VS Code に「SFTP」（作者：Natizyskunk）をインストール
- プロジェクト直下に
.vscode/sftp.jsonを作成 - 以下のように記述します：
{
"name": "本番環境",
"host": "sv16186.xserver.jp",
"protocol": "sftp",
"port": 10022,
"username": "huktest",
"remotePath": "/home/huktest/huk-demo.com/public_html/terumi-html",
"privateKeyPath": "F:/arisa/Documents/ssh/huktest.key",
"passphrase": "9bgJ2eNprWtJ",
"uploadOnSave": true,
"ignore": [".vscode", ".git", ".DS_Store", "sftp.json"]
}補足説明
| 項目 | 内容 |
|---|---|
remotePath | サーバー側のディレクトリ（常に / スラッシュ使用） |
privateKeyPath | ローカルPC上の秘密鍵パス（Windowsでもスラッシュで） |
passphrase | 鍵作成時に設定した補助パスワード |
uploadOnSave | ファイル保存時に自動アップロード |
6. MacとWindowsの違いは？
✅ 結論：記述の大部分は共通
| 項目 | Mac | Windows |
|---|---|---|
remotePath | /home/...（共通） | 共通（変更不要） |
privateKeyPath | /Users/... 形式 | C:/Users/... または F:/... 形式 |
| パスの区切り | / スラッシュ | / を使えば安定（\ は非推奨） |
✅ Windowsでもスラッシュ
/を使えばOK！
7. よくあるエラーと原因
| 症状 | 原因と対処 |
|---|---|
| 接続できない | .key ファイルの場所 or 中身 or passphrase が間違っている可能性 |
| アップロードされない | "uploadOnSave": true の記述ミスや無効化 |
| sftp.json が認識されない | .vscode/sftp.json の配置ミス、JSON構文エラー |
| Permission denied | 鍵がサーバーに登録されていない or 合っていない |
8. パスの調べ方（Windows / Mac）
SFTP設定の中でも重要なのが、privateKeyPath に正しい絶対パスを記述することです。
ここでは、Windows / Mac の両方で正しいパスを調べる方法をご紹介します。
💻 Windowsの場合
方法①：Shiftキー + 右クリックで「パスのコピー」
.keyファイルをエクスプローラーで選択Shiftキーを押しながら右クリック- 「パスのコピー」を選択
- VS Codeやメモ帳に貼り付けて
/スラッシュに修正
例：
コピー結果：F:\arisa\Documents\ssh\huktest.key
→ 修正：F:/arisa/Documents/ssh/huktest.key方法②：アドレスバーから手動でコピー
.keyファイルがあるフォルダを開く- アドレスバーをクリックするとパスがテキスト形式になる
- コピーしてファイル名を手動で追加
🍎 Macの場合
方法①：ファイルをFinderで右クリック →「情報を見る」
.keyファイルをFinderで右クリック- 「情報を見る」を選択
- 「場所」欄に表示されたパスと「ファイル名」を組み合わせて使用
例：
場所：/Users/uetashinji/Documents/ssh
ファイル名：huktest.key
→ /Users/uetashinji/Documents/ssh/huktest.key方法②：ファイルをターミナルにドラッグ＆ドロップ
- ターミナルを起動
.keyファイルをウィンドウ内にドラッグ- パスが自動で入力されるのでコピー
✅ 注意点（両OS共通）
sftp.jsonではパスの区切りを必ず/（スラッシュ）で統一しましょう
Windowsでも\（バックスラッシュ）はエスケープ文字になり、エラーの原因になります。- パスはダブルクオーテーションで囲む必要があります（JSONの構文）
✅ まとめ
| 項目 | 内容 |
|---|---|
| セキュリティ | 鍵認証＋国内IP制限で安全 |
| 効率 | 保存するだけで即アップロード可能 |
| 対応OS | Mac / Windows 両対応（記述の違いはパスの扱いだけ） |
💬 補足・ヒント
passphraseやpasswordはどこに保存していても関係ありません。内容が合っていればOK。- OneDriveや外付けドライブ上の
.keyファイルは、同期状態やドライブ接続に注意。 - 接続できないときは、VS Codeの「出力」パネル → SFTPを選んでログ確認が第一歩！
✍️ あとがき
「公開鍵って難しそう」「SFTPは上級者向けでは？」と思っていた方も多いと思いますが、手順を押さえれば実はとてもシンプルです。
ローカル開発と本番環境の橋渡しとして、VS Code × SFTPの組み合わせは本当に強力。
この記事があなたの制作業務を少しでもラクにする助けになれば幸いです！
