メインコンテンツまでスキップ

VSCodeで「SFTP」を使う

はじめに​

この記事ではVSCodeにFTPクライアント機能を追加する拡張機能「SFTP」について説明します。

「SFTP」とは​

「SFTP」はVSCodeにFTPクライアント機能を追加する拡張機能です。同期機能（アップロード元フォルダとアップロード先フォルダの内容を自動的に一致させる機能）があり、ウェブサイトの開発においては非常に便利な拡張機能です。

ウェブサイトの開発では、手元のPCでHTMLファイルやCSSファイルを編集し、完成したファイルをFTPサーバー経由でウェブサーバーにアップロードする作業が発生します。「SFTP」があればアップロード作業が自動化され、作業が楽になります。

「SFTP」のインストール​

手順​

VSCodeの拡張機能にありがちなこととして、同じ名前の拡張機能がマーケットプレースに多数登録されていて混乱します。ここではNatizyskunk氏の作成した「SFTP」を選ぶこととします。

  1. VSCode起動
  2. サイドバーの拡張機能タブを開く
  3. 拡張機能検索欄にsftpと入力
  4. 検索結果一覧よりNatizyskunk氏の「SFTP」を選び、「インストール」クリック
  5. 了

設定ファイルの作成​

「SFTP」では、プロジェクトひとつにつきひとつの設定ファイル（拡張子json）が作成されます。

手順​
  1. VSCode起動
  2. プロジェクトフォルダを開く
  3. コマンドセンターに>SFTPと入力
  4. コマンド検索結果一覧からSFTP:Configを選択
  5. プロジェクトフォルダ直下に.vscodeフォルダが作成され、その中にsftp.jsonファイルが作成される 
    /sample-project
    　├─/.vscode
    　│　└─sftp.json
    　├─/その他フォルダ
    　└─その他ファイル
  6. 了

SFTPの設定​

FTPサーバーにファイルをアップロードするには最低限4つの情報「FTPサーバー名・ユーザー名・パスワード・ポート番号」が必要です。これら情報を設定ファイルに書き込むことでFTPサーバーへのアップロードができるようになります。

これら情報はレンタルサーバー事業者から提示されます。なお「ポート番号」については自動割り当てのため設定不要である場合があります。

設定ファイルの初期値​
{
    "name": "My Server",
    "host": "localhost",
    "protocol": "ftp",
    "port": 22,
    "username": "username",
    "remotePath": "/",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false
}
項目説明
nameこの設定につける任意の名前。なんでもよい。
hostFTPサーバー名
protocol通信プロトコルの設定。ftpかsftpのいずれか。sftpは作業が増えるのでここではftp。
portポート番号。自動割り当ての場合はこの行は削除して良い。
usernameログインユーザー名
remotePathアップロード先フォルダの指定。/はFTPサーバーのルートフォルダの意味。
uploadOnSaveアップロード自動化する／しないの設定。false（しない）のままでよい。
useTempFileアップロード時に一時ファイルを作成する／しないの設定。falseのままでよい。
openSshOpenSSHを使う／使わないの設定。falseのままでよい。

追加すべき設定​

設定ファイルにFTPログインパスワードを書き込んでおけば入力の手間を省くことができます。しかし「SFTP」にはパスワードを暗号化保存する機能がないため注意が必要です。

とくに、うっかり設定ファイルをFTPサーバーにアップロードしてしまうとそのままウェブサーバーにもアップロードされ、全世界にパスワードを公開することになります。

設定項目「ignore」を設定ファイルに追記することで、アップロードの対象にしないファイルやフォルダを設定できます。

項目説明
passwordログインパスワード。暗号化されない平文のまま設定ファイルに書き込まれるので要注意。
ignoreアップロードの対象にしないファイルやフォルダの設定。うっかり設定ファイルをアップロードしないよう、/.vscodeフォルダをここに設定する必要がある。
記入例​
{
    "name": "example-ftp-config",
    "host": "ftp.example.jp",
    "protocol": "ftp",
    "username": "your-login-ID",
    "password": "your-login-password",
    "remotePath": "/",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false,
    "ignore": [
      "sftp.json",
      ".gitignore",
      ".ignore",
      ".DS_Store",
      "**/.vscode/**",
      "**/.git/**"
    ]
}

SFTPプロトコルを使う場合の設定​

SFTPプロトコルはFTPプロトコルよりもセキュリティに優れた通信プロトコルですが、設定作業が増えるので、この記事では説明を割愛します。

場合によっては必要な設定​

プロジェクトフォルダ全体をアップロード対象にする必要がまったくない場合があります。たとえばDocusaurusのようにマークダウン書式で原稿を書いてHTMLファイルに変換するシステムの場合は、変換後のHTMLファイル一式が入ったフォルダだけをアップロード対象にすればよいことになります。

そのような場合は設定項目「context」を設定ファイルに追記します。

項目説明
contextアップロード元フォルダの設定。プロジェクトフォルダをルートとした相対パスで記述する。この設定項目がない場合はプロジェクトフォルダがアップロード元となる。
記入例​
/sample-project
　├─/build　←このフォルダをアップロード元にしたい場合
　├─/.vscode
　│　└─sftp.json
　├─/その他フォルダ
　└─その他ファイル
{
    "name": "example-ftp-config",
    "host": "ftp.example.jp",
    "protocol": "ftp",
    "username": "your-login-ID",
    "password": "your-login-password",
    "remotePath": "/",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false,
    "ignore": [
      "sftp.json",
      ".gitignore",
      ".ignore",
      ".DS_Store",
      "**/.vscode/**",
      "**/.git/**"
    ],
    "context": "build"
}

アップロードの方法​

特定のファイルをアップロード​

「SFTP」は基本的にアップロード先とアップロード元のフォルダを一致させるよう働きます。ファイルひとつを指定してアップロードした場合でも、ファイルやフォルダの構成が一致するようにアップロードが行われます。

手順​
  1. サイドバーでプロジェクトフォルダ内ファイル一覧を表示
  2. サイドバーでアップロードしたいファイルを右クリック
  3. 右クリックメニューより「Upload File」を選ぶ

アップロード元フォルダ内のすべてをアップロード​

設定項目contextで指定されたフォルダがアップロード元フォルダです。

手順​
  1. サイドバーでプロジェクトフォルダ内ファイル一覧を表示
  2. サイドバーでアップロード元フォルダを右クリック
  3. 右クリックメニューより「Sync Local->Remote」を選ぶ

プロジェクトフォルダ内のすべてをアップロード​

contextが設定されていない場合、プロジェクトフォルダ自体がアップロード元フォルダですが、プロジェクトフォルダはサイドバーでは選択できません。よって手順が異なります。

手順​
  1. コマンドセンターに>sftpと入力
  2. 検索結果一覧より「Sync Local->Remote」を選ぶ
  3. フォルダ一覧よりプロジェクトフォルダを選ぶ

アップロードの自動化​

設定項目「uploadOnSave」の値を「true」に書き換えると、以後、ファイルを編集し保存したタイミングで自動的にアップロードが行われ、サーバー側のファイルは上書きされます。

おわりに​

アップロード自動化は非常に便利な機能であり多用しています。

念のため繰り返しますが、「SFTP」を使う際はうっかり設定ファイルをアップロードしないよう、設定項目「ignore」を設定ファイルに追記してアップロードの対象にしないファイルやフォルダを正しく設定してください。

に最終更新