どうも。Kenny（tsujikenzo）です。今日は単発記事です。 「【無料】FileZillaを卒業してSFTPでCursorから直接FTPサーバーにアップロードしてみよう」 をお送りします。
はじめに
WebサイトやWebアプリケーションの開発、運用をしているノンプログラマーの皆さん、サーバーへのファイルアップロード、どうやっていますか？私自身もそうですが、FileZilla様（以降、敬称略）に長年お世話になったと思います。
しかし、最近、開発環境をCursorに移行する機会が増え、Cursorから直接FTPサーバーへファイルをアップロードしたい！と思うようになりました。
そこで、FileZillaに感謝を込めつつ、Cursorの「SFTP拡張機能」を使った爆速アップロードの方法を自分自身の備忘録として、そして同じような悩みを抱えるノンプログラマーの皆さんにご紹介するためにお届けします。
【After】Cursor + SFTPで劇的に変わる！
- Cursorの画面一つで開発が完結！
- ファイルの保存と同時にサーバーに自動アップロード！
VSCodeでも使えますが、今回はCursorを使って紹介します。
CursorでSFTP接続を設定する簡単3ステップ
Step 1: SFTP拡張機能をインストール
まずは、Cursorの拡張機能からSFTPを検索します。
拡張機能は、サイドバーにありますので、まずはサイドバーを表示しましょう。
サイドバーの拡張機能検索画面に「SFTP」を入力します。「SFTP」を見つけたら「Install」をクリックします。（この作者を信用しますか？というアラート画面が出たら、信用する！をクリックしてください。）
Step 2: 接続設定ファイルを作る
SFTPはワークスペースやプロジェクトごとに専用のconfigファイルを用意し、サーバーの接続情報や拡張機能を設定します。なので、まずはワークスペース、もしくはプロジェクトを開きます。※今回は「PJ_sample20250707」という空っぽのプロジェクトを開いています。
次に、FTPサーバーに接続するための設定ファイルを作成します。コマンドパレット(Cmd + Shift + P または Ctrl + Shift + P) を表示します。
「SFTP: Config」と入力してEnterします。
自動的に「.vscode」というフォルダと「sftp.json」というファイルが、プロジェクト内に作成されます。JSONファイルには、テンプレートが入力されているようです。
このJSONファイルに、FTPアップロードに必要な情報を記述しておきます。（個人情報の取り扱いには十分気をつけてくださいね）
以下項目の説明です。適宜ご自身の契約しているサーバの情報に読み替えてください。
- “name“：サーバー上のディレクトリ名と同じにすることをおススメします（例：”hogeserver”）
- “protocol“：接続するプロトコル（sftp・ftp等）
- “host“：サーバーのホスト名（例：”ftp.example.com”）
- “username“：ユーザID（例：”myID”）
- “password“：パスワード（例：”myPassWord!”）
- “remotePath“：サーバー内の転送したいディレクトリのパス（例：”public_html”）
- “uploadOnSave“：ファイルを保存した際、自動アップロードの可否（true/false）初期設定はfalseにしましょう。
- “connectTimeout“：回線が遅い場合などに、タイムアウトするミリ秒です。サンプルの値は200000ミリ秒です。
- “ignore“：ファイル転送してはいけないファイルの一覧です。（.vscode、.git、.sftp.jsonは必ず設定しましょう。）
- “.vscode“：VSCodeの環境ファイルの格納フォルダ
- “.git“,：Gitに必要なファイルの格納フォルダ
- “.DS_Store“,：Macのフォルダ等の情報を含んだ隠しファイル
- “sftp.json“：SFTP関連の情報
Step 3:テストアップロード
アップロードをテストするために、index.htmlファイルを作成しましょう。Cursorを使っていれば、index.html内で”Hello World”と入力すると、ソースコードが出力されるので驚きますよね。
それではindex.htmlを右クリックして、「upload file」をクリックします。
しばらくアップロードに時間が掛かります。。。
アップロードが成功したか、FileZillaでチェックしてみましょう（あはは。）！成功しているようです！
アップロードがうまくいかない💦
アップロードが成功していないばあいは、JSONファイルの設定が間違っている可能性が大です。ホスト名やパスワードなど、もう一度確認してみましょう。特に、アップロードしたいディレクトリ先を指定できていますか？
Step 4: アップロードされたファイルを確認する
さきほどは、FileZillaで確認しましたが、Cursor上で確認できます。（これができると、いよいよFileZillaを卒業できそうです。）
Cursorの左メニューから「SFTP」のアイコンをクリックします。※アイコンを左メニューに変更するために、このnoteを参考にしました。
サーバー上のディレクトリが表示されました。この機能を「Remote Explorer」と呼んでるようです。
もちろん、JSONファイルで指定したアップロード先が見えているということです。
FileZillaでは、サーバー上のファイルの中身を見るのに、一度ダウンロードしてテキストエディタで開いて、みたいにしてたので、これは楽ですね。
注意点：セキュリティ対策「privateKeyPath」
今回は、紙面スペースの都合で割愛しましたが、このままの運用ではセキュリティ面で不安なので、対策をした方がいいでしょう。楽に導入できる方法として、サーバーとクライアントで公開鍵と秘密鍵を持ち合って権限を与える「privateKeyPath」があります。こちらも次回お届けできればと思います。
まとめ
これで、ファイルを作成する（Cursorで自動化）ことと、サーバーにアップロードする（CursorのSFTPで自動化）が実現しました。みなさんもぜひ市民開発者になりましょう！
参考資料
こちらのnoteを参考にさせていただだきました
