ConoHa WINGでVS Codeを直接連携させる

ConoHa WING（レンタルサーバー）上のファイルを VS Code と直接連携させて編集・開発を行うには、主に2つのアプローチがあります。

ConoHa WINGは通常のVPSとは異なり、サーバーリソースの制限があるため、方法1（SFTP拡張機能を使う方法）が最も安全で推奨されます。

---

方法1：拡張機能「sfTP」を使う（推奨・安全）

VS Code の拡張機能「sfTP」を使い、ローカルのフォルダと ConoHa WING のサーバー上のフォルダをリアルタイムで同期（保存時に自動アップロード）させる方法です。サーバー側に負荷をかけないため、レンタルサーバーではこの方法が一般的です。

1. ConoHa WING でFTPアカウントを作成する

1. ConoHa WINGのコントロールパネルにログインします。
2. 「サイト管理」＞「FTP」を開き、「+ FTPアカウント」をクリックします。
3. 任意の「ユーザー名」「パスワード」を設定し、接続許可ポートが 21（またはSFTP用のポート）であることを確認して保存します。
4. 画面に表示される 「FTPサーバー（ホスト名）」 をメモしておきます。

2. VS Code に「sfTP」をインストールする

1. VS Codeを開き、拡張機能（Ctrl+Shift+X / Cmd+Shift+X）で 「sftp」 と検索します。
2. Natizyskunk 氏などがメンテナンスしている、現在アクティブな 「SFTP」 拡張機能をインストールします。

3. 同期用のローカルフォルダを開く

1. パソコン側に、ConoHa WINGのファイルと同期するための空のフォルダ（例: my-wing-site）を作成します。
2. VS Code でそのフォルダを開きます（「ファイル」＞「フォルダーを開く」）。

4. 設定ファイル（sftp.json）を作成・編集する

1. コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）を開き、SFTP: Config と入力して選択します。
2. 開いた sftp.json を以下のように書き換えます。

JSON

{
    "name": "ConoHa WING",
    "host": "メモしたFTPサーバー名（例: ftp***.conoha.ne.jp）",
    "protocol": "sftp",
    "port": 22,
    "username": "作成したFTPユーザー名",
    "password": "設定したパスワード",
    "remotePath": "/public_html/あなたのドメイン名",
    "uploadOnSave": true,
    "ignore": [
        "**/.vscode/**",
        "**/.git/**"
    ]
}

💡 ポイント:

• ConoHa WINGは通常、ポート 22 でSFTP接続が可能です。もし繋がらない場合は、protocol: "ftp", port: 21 をお試しください。
• uploadOnSave: true にしておくことで、VS Codeでファイルを上書き保存（Ctrl+S）した瞬間に自動でサーバーへアップロードされます。