CursorエディタでPHP・Webサイト開発をしている方向けに、FTP/SFTP/SSH Sync プラグインを使ってエックスサーバーにSFTP接続する手順をまとめました。
はじめに
使用するプラグイン
FTP/SFTP/SSH Sync(Cursor / VS Code 拡張機能)
このプラグインを使うと、ローカルで編集したファイルをSFTP経由でサーバーに自動または手動でアップロードできます。
前提条件
- エディタ: Cursor(VS Codeでも同様に使用可能)
- OS: Windows(他OSでも考え方は同じ)
- サーバー: エックスサーバー(サーバーパネルにログインできること)
1. エックスサーバー側の設定(必須)
SSH を有効化
- サーバーパネルにログイン
- 左メニューから 「SSH設定」 を開く
- SSHを「ON」 にする
公開鍵認証用の鍵を作成
- サーバーパネル → 「SSH設定」
- 「公開鍵認証用鍵ペアの生成」 をクリック
- パスフレーズは空欄(パスフレーズ無し)を推奨
- 秘密鍵(private key)をダウンロード してPCの安全な場所に保存
⚠️ 注意: 秘密鍵は漏洩すると第三者にサーバーへのアクセスを許すことになります。権限設定と保管場所に十分注意してください。
2. sync_config.jsonc の設定
プロジェクトのルートディレクトリに sync_config.jsonc を作成し、接続情報を記入します。
エックスサーバーの接続情報
| 項目 | 値 |
|---|---|
| host | サーバーID.xserver.jp(例:sv12345.xserver.jp) |
| port | 10022(エックスサーバーのSSHポート) |
| username | サーバーID(例:sv12345) |
設定ファイルのテンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "MyProject": { "type": "sftp", "host": "sv12345.xserver.jp", "port": 10022, "username": "sv12345", "password": "", "privateKeyPath": "C:/Users/your-username/.ssh/xserver_nopass.key", "proxy": false, "upload_on_save": false, "watch": false, "upload_to_root": false, "distPath": ["./"], "remotePath": "/home/sv12345/example.com/public_html/project", "excludePath": [], "default": true } } |
各項目の説明
| 項目 | 説明 |
|---|---|
type |
接続タイプ。エックスサーバーは "sftp" |
host |
サーバーのホスト名 |
port |
SSHポート番号(エックスサーバーは 10022) |
username |
サーバーID |
password |
公開鍵認証の場合は空文字 "" |
privateKeyPath |
秘密鍵ファイルのパス |
upload_on_save |
保存時に自動アップロードするか |
watch |
ファイル監視を有効にするか |
distPath |
アップロード対象のローカルディレクトリ |
remotePath |
アップロード先のリモートディレクトリ |
excludePath |
アップロードから除外するパス |
3. privateKeyPath の書き方(Windows注意点)
JSONでは \(バックスラッシュ)がエスケープ文字として扱われるため、Windowsのパスをそのまま書くとエラーになります。
推奨:スラッシュに置き換える
|
1 |
"privateKeyPath": "C:/Users/your-username/.ssh/xserver.key" |
代替:バックスラッシュを二重にする
|
1 |
"privateKeyPath": "C:\\Users\\your-username\\.ssh\\xserver.key" |
4. remotePath の設定
remotePath はリモートサーバー上のアップロード先ディレクトリです。
よくある指定パターン
|
1 2 3 4 5 |
// ドメイン配下形式 "remotePath": "/example.com/public_html/project" // フルパス形式 "remotePath": "/home/sv12345/example.com/public_html/project" |
💡 どちらの形式が使えるかはサーバー環境によって異なります。接続できる方を採用してください。
5. distPath の設定
distPath はアップロード対象にするローカルディレクトリを指定します。
設定例
|
1 2 3 4 5 6 7 8 |
// プロジェクト全体をアップロード "distPath": ["./"] // distフォルダのみをアップロード "distPath": ["./dist"] // 複数フォルダを対象にする "distPath": ["./src", "./assets"] |
6. よくあるエラーと対処法
パスフレーズ付き秘密鍵のエラー
|
1 |
Cannot parse privateKey: Encrypted OpenSSH private key detected, but no passphrase given |
原因
秘密鍵がパスフレーズで暗号化されているが、プラグインがパスフレーズの入力を受け付けられない。
対処法
A. パスフレーズ無しの鍵を新規作成(推奨)
エックスサーバーで鍵を生成する際に、パスフレーズを空欄にして作成します。
B. 既存鍵のパスフレーズを解除(自己責任)
|
1 |
ssh-keygen -p -f "秘密鍵ファイルのパス" |
新しいパスフレーズを聞かれたら、何も入力せずEnterを押します。
⚠️ パスフレーズを解除すると、鍵ファイルが漏洩した場合のリスクが高まります。ファイルの管理には十分注意してください。
7. 秘密鍵ファイルの命名規則(おすすめ)
管理しやすいように、以下のような命名規則がおすすめです。
| 種類 | ファイル名例 |
|---|---|
| パスフレーズあり | xserver_sftp_encrypted.key |
| パスフレーズなし | xserver_sftp_nopass.key |
8. 接続前の最終チェックリスト
設定が完了したら、以下を確認してください。
- [ ]
typeが"sftp"になっている - [ ]
portが10022になっている - [ ]
privateKeyPathが実際に存在するファイルを指している - [ ]
remotePathが書き込み可能なパスである - [ ] エックスサーバー側でSSHが有効になっている
- [ ] 公開鍵がサーバーに登録されている
まとめ
Cursorの FTP/SFTP/SSH Sync プラグインを使えば、エックスサーバーへのファイルアップロードがとても簡単になります。
ポイントをまとめると:
- エックスサーバーでSSHを有効化し、パスフレーズ無しの鍵を作成
sync_config.jsoncに接続情報を記入- ポートは 10022 を指定
- Windowsではパスに スラッシュ(/) を使用
一度設定してしまえば、開発効率が大幅に向上しますので、ぜひ試してみてください!
この記事がお役に立ちましたら、シェアしていただけると嬉しいです。
