見出し画像
Photo by norikoitou

VSCodeでファイルをアップロードできる機能拡張「SFTP」

なかしまぁ先生

VSCodeは、テキストエディタ。ソースコードを書くためのツールです。
そのツールで、ファイルをサーバにアップロードすることができます。

１．作業場の作成

まず、アップロードしたいファイルの作業場（格納フォルダ）を作成しましょう。

そのフォルダをVSCodeにドラッグ・アンド・ドロップします。

１．ドラッグ・アンド・ドロップ前
２，ドラッグ・アンド・ドロップ後

２．SFTPのインストール

２通りあります。

  • ひとつめは、左列に並んでいるアイコンの「機能拡張」をクリックして、「SFTP」を検索（ただ、SFTPは同名のものが３種類くらいあるので更新の最も進んでいる @Natizyskunk 作成のものを選ぶといいでしょう。）

  • または、次のページにアクセス

そして「インストールする」をクリックしてください。

インストール後のSFTP


３．環境ファイルの編集

上部のメニューバーの「表示」をクリックして、「コマンドパレット」を選択。

「＞」の空欄に「sftp」と入力して「SFTP:Config」を選択。

そうすれば、「sftp.json」の編集画面が表示されるので、以下の情報に入力・書き換えしましょう。（↓コピペできます）

{
  "name": "hogeserver",
  "protocol": "sftp",
  "host": "ftp.example.com",
  "username": "myID",
  "password":"myPassWord!",
  "remotePath": "public_html",
  "uploadOnSave":false,
  "connectTimeout":200000,
  "ignore": [
    ".vscode",
    ".git",
    ".DS_Store",
    "sftp.json"
  ]
}

以下項目の説明です。適宜自身の契約しているサーバの情報に読み替えてください。

  • "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関連の情報

４．ファイルのアップロード

  • uploadOnSaveがtrueの場合、
    ファイル変更があると直ちにアップロードされます。

  • uploadOnSaveがfalseの場合、
    エクスプローラパレットに表示されていいるファイル一覧の中の転送したいファイル（またはフォルダ）を選んで右クリック、コンテクストメニューから「Upload／Upload Folder」を選択。

ファイルを選んでUpload

５．アップロードしたファイルの一覧・削除

左の列の「SFTP」アイコンをクリックすれば、サーバ上のファイルの一覧が表示されます。

SFTPのアイコン

右クリックして「Delete」をクリックすれば、ファイル・フォルダを削除できます。
なお、ファイル・フォルダの一覧は自動で更新されないので、それらの確認は、削除したファイルの親ディレクトリを選択して、上部の更新ボタンを押して更新してください。

６．公式ページ

最新の様々な情報が公式ページにはあります。
私の記事は古くなっている可能性もありますし、何かしらの保証は行っていません。
必ず。公式ページを確認してご利用ください。

また、

  • 使用にあたっては自己判断・自己責任でお願いします。

  • アップロードしたファイルの中に、アップロードしたらまずいファイルがないかどうか、必ず確認してください。

７．アップロードできない

アップロードできない原因は、過去の経験では以下の通りです。

  • 説明を丁寧に読んでいない：説明はひとつひとつ丁寧に文字を追いながら読み進めてください。サーバ情報も同様です。適当に読んでいるとうまくいかないことが多いです。

  • 設定項目の誤り：特にユーザIDやパスワードには十分に注意を払って入力しましょう。

  • Wifiやローテータの回線：PCとインターネットとの間の回線を、まったく別の回線にしてみるとうまくいくことがあります。例えば

    • 自宅だとNGで、友達の家・会社のPCからだとOK。

    • Wifiロータを他に変えた。または有線LANに変えた。

    • VPNを他に変えた。または、VPNをオフにした。


この記事が気に入ったらサポートをしてみませんか？