こんにちはrey(@reydesign8376)です！ VS CodeのSFTPプラグインを使ってサイトにファイルをアップロードする方法を備忘録として残してきます。
では早速〜
SFTPって？
SFTPプラグインは、VS Codeでローカルファイルをリモートサーバーに簡単にアップロードできるようにする拡張機能です。このプラグインを使えば、既存のFTPソフト（例えばFileZilla、WinSCPなど）を使用せずに、VS Codeから直接ファイルを転送できます。ファイルを手動で転送する手間を省き、作業効率を大幅にアップできます！素敵！
必要な準備
1. VS Codeのインストール
まずは、VS Codeをインストール！
2. SFTPプラグインのインストール
- VS Codeを開き、サイドバーの「拡張機能」アイコンをクリックします。
- 検索バーに「SFTP」と入力します。
- 提供元が “Natizyskunk” のSFTPプラグインをインストールします。
SFTPの設定
1. ワークスペースの準備
アップロードしたいプロジェクトのフォルダをVS Codeで開きます。
2. SFTP設定ファイルの作成
- サイドバーのファイル一覧で右クリックし、SFTP: Config を選択します。
- 自動的に
.vscode(隠しフォルダ)
├ sftp.json
という設定ファイルが生成されます。
3. sftp.jsonの編集
以下のコードを参考にして、設定ファイルを編集
情報は各サーバーで確認できます。
{
"host": "example.com",
"name": "My Project",
"protocol": "sftp",
"port": 22,
"username": "user123",
"remotePath": "/var/www/html",
"privateKeyPath": "/Users/username/.ssh/id_rsa",
"passphrase": "my-passphrase",
"uploadOnSave": false,
"downloadOnOpen": false,
"ignore": [
"**/.vscode/**",
"**/.git/**",
"**/node_modules/**",
"**/.DS_Store"
]
}設定項目の詳細
“host”: “example.com”
接続先サーバーの ホスト名（ドメイン）または IP アドレス を指定します。
例：
example.comxxx.xxx.xxx.xxx
FTP情報に書かれている「サーバー名」「ホスト名」に該当します。
“name”: “My Project”
この接続設定の 表示名 です。
VS Code の SFTP メニューで一覧表示されるため、
- プロジェクト名
- サイト名
- 本番 / テスト などの区別
を入れておくと管理しやすくなります。
例：
example.com (production)example.com (staging)
“protocol”: “sftp”
通信方式を指定します。
現在は 基本的に sftp 一択 でOKです。
ftp：非推奨（暗号化されない）sftp：SSH通信（暗号化あり・安全）
サーバーがSSH接続に対応していれば必ずsftp
“port”: 22
SSH接続用の ポート番号 です。
- 一般的：
22 - セキュリティ対策で変更されている場合：
10022など
サーバー会社から指定がある場合は必ずそれに従います。
“username”: “user123”
サーバーにログインする ユーザー名 です。
FTPアカウント情報の「ユーザー名」と同じです。例：
“remotePath”: “/var/www/html”
サーバー側の作業ディレクトリ（ルート） を指定します。
ここを基準にして、アップロード、ダウンロードを行います。
“privateKeyPath”: “/Users/username/.ssh/id_rsa”
SSH接続に使用する 秘密鍵ファイルのフルパス です。
＊パスワードログインではなく公開鍵認証 を使う場合に設定します。
拡張子 .pem や .key の場合が多いです。
“passphrase”: “my-passphrase”
秘密鍵に設定している パスフレーズ です。
- 鍵作成時に設定していない場合 → 不要
- 設定している場合 → 必須
＊未設定の鍵でここを書くとエラーになることもあるので注意
“uploadOnSave”: false
ファイル保存時に 自動でサーバーへアップロードするか の設定。
true：保存 = 即アップロードfalse：手動アップロード
慣れるまではfalseをおすすめ。うっかり保存して即反映を防ぐためです。
“downloadOnOpen”: false
ファイルを開いた時に 自動でサーバーから取得するか の設定。
true：常に最新状態を取得false：ローカルを優先
＊複数人作業・直接サーバー編集する場合は true が便利
＊Git管理している場合は false が安全
“downloadOnOpen”: false
ファイルを開いた時に 自動でサーバーから取得するか の設定。
true：常に最新状態を取得false：ローカルを優先
＊複数人作業・直接サーバー編集する場合は true が便利
＊Git管理している場合は false が安全
ignore
アップロード・ダウンロードの対象外 にするファイル・フォルダ。
"ignore": [
"**/.vscode/**",
"**/.git/**",
"**/node_modules/**",
"**/.DS_Store"
]よくある指定
.vscode：設定ファイル.git：Git管理情報node_modules：容量が大きく不要.DS_Store：Macの不要ファイル
誤ってサーバーに上げると事故る系は必ず ignore に入れるのがおすすめ
ファイルのアップロード
プロジェクトフォルダ内で index.html やその他の必要なファイルを作成します。
ファイルの自動アップロードの場合
uploadOnSaveがtrue(有効)になっている場合、ファイルを保存すると自動的にサーバーにアップロードされます。
保存ショートカット: Windows/LinuxではCtrl + S、MacではCmd + S
"uploadOnSave": true,
"downloadOnOpen": true,手動アップロードの場合
uploadOnSaveをfalse(無効)にしている場合、手動でアップロードする必要があります。
- アップロードしたいファイルを右クリックします。
Upload Fileを選択します。
動作確認
ブラウザでサーバーのURLを開き、アップロードしたファイルが正しく表示されているか確認してください。
更新されない場合はキャッシュのクリアなどをお試しください
注意
本番環境でやる際は（リニューアルサイトでの作業も）前のデータが上書きされないように注意しましょう！一度自分の保有するテスト用ドメインで慣れた方が良いと思います。
うまくいかない！
そんな時はこんなことが原因かもしれません。
アップロードが失敗する
設定情報が間違っている可能性があります。 sftp.jsonを確認し、正しい情報を入力してください。
ホスト名、ユーザー名、またはパスワードを再確認ください。
ファイルがリモートディレクトリに反映されない
remotePath が正しく設定されていない可能性がありますリモートディレクトリのパスを再確認してください。
セキュリティ警告が表示される
パスワード認証の代わりにSSHキー認証を使用する方法を検討してください。
まとめ
VS CodeのSFTPプラグインを使用することで、ローカルで作成したファイルを簡単にリモートサーバーにアップロードできます。特にuploadOnSaveを有効にすれば、効率的に作業を進めることができます。ぜひ、この手順を参考にして、快適な開発環境を構築してください！
サーバー関連のお役立ち記事
