【VSCode】VSCodeで ConoHa WING　サーバーにアップロード 拡張機能 SFTP の使い方

Visual Studio Code（VSCode）は、多くの拡張機能を持つ高性能なコードエディタです。その中でも、SFTPという拡張機能は、リモートサーバーとのファイルのやりとりを簡単に行うためのツールとして非常に人気があります。この記事では、このSFTP拡張機能を使って、ConoHa WING のサーバーにアップロードする基本的な使用方法を解説します。

事前準備

事前準備として、下記を準備しておく必要があります。

• ConoHa WING　でサーバーをレンタル
• VSCodeをインストール

ConoHa に FTP アカウントを追加する

1. ConoHa にログインします。
2. サイトを選択します。 [サイト管理] を選択します。
   [WING] を選択し、VSCode からアップロードしたいサイトを選択します。[切り替え] ボタンをクリックしてサイトを選択することができます。
3. 左下[FTP]を選択し、右上の[FTPアカウント]をクリックします。
4. [ユーザー名]、[パスワード]を入力、[接続許可ディレクトリ]を選択し、保存をクリックします。
5. ユーザー名、パスワード、FTPサーバーが表示されます。

ConoHa に SSH Key を生成する

1. [サーバー管理]を選択し、[SSH]を選択します。
2. [SSH Key]クリックし、[保存]をクリックします。
3. [ダウンロード]クリックし、ローカルに保存します。（後ほど、保存したKeyのパスが必要になります）
4. 作成された key を選択し、内容を確認する。
   下記情報は、後ほど必要になります。
   • ホスト名
   • ポート番号
   • ユーザー名

拡張機能 SFTP の導入

1. VSCodeを開き、拡張機能からSFTPを検索します。
2. SFTPを選択し、Installをクリックします。 インストールが終わるとInstall→Disableに表示が変わります。

SFTP の設定

1. サーバーの内容をアップロードするフォルダを開きます。

2. メニューバーの[表示] - [コマンドパレット]を選択します (Ctrl+Shift+P)。

3. パレットに [SFTP] と入力して拡張機能 [SFTP: Config] をクリックします。

4. jsonファイルを編集します。
   Workspace にsftp.jsonが追加されます。 下記の通り設定します。

   {
       "name": "my_project",
       "host": "example-server.com",
       "protocol": "sftp",
       "port": 8022,
       "username": "your_username",
       "password": "your_password",
       "privateKeyPath": "/path/to/your/private/key.pem",
       "remotePath": "/path/on/remote/server/to/your/project",
       "uploadOnSave": false,
       "useTempFile": false,
       "openSsh": false,
       "ignore": ["**/.vscode/**", "**.git/**", "**.DS_Store", ".gitignore"]
   }

   • name
     プロファイルの名前を入力します。これにより、複数のSFTP設定を区別できます。
     任意の名前、サイト名などを入力します。
   • host
     接続するリモートサーバーのホスト名またはIPアドレスを入力します。
     ConoHa SSH の key の情報から確認できます。
   • protocol
     使用するプロトコルを入力します。SFTPは SSH を使用したセキュアなFTPです。
     ここでは、SFTP接続を行うので、sftpを入力します。
   • port
     リモートサーバーのポート番号を入力します。
     ConoHa SSH の key の情報から確認できます。
   • username
     リモートサーバーへの接続に使用するユーザー名を入力します。 ConoHa SSH の key の情報から確認できます。
   • password
     リモートサーバーへの接続に使用するパスワードを入力します。 ConoHa FTP アカウント の情報から確認できます。
   • privateKeyPath
     鍵認証を使用する場合のプライベートキーのパスを入力します。 ローカルに保存した key のパスです。
   • remotePath
     リモートサーバー上のディレクトリのパス。このパスにファイルやディレクトリがアップロード/ダウンロードされます。
     WordPressのテーマをアップロードする場合は、/home/username/public_html/domain.com/wp-content/themes/theme-nameとなる。
     usernameやdomain.comは各々のものを指定します。theme-nameは作成するWordPressのテーマ名を記載します。初回はtheme-nameが存在しないのでフォルダを生成する必要があります。
   • uploadOnSave
     このオプションがtrueに設定されている場合、ファイルを保存するたびに自動的にリモートサーバーにアップロードします。
   • useTempFile
     このオプションがtrueに設定されている場合、一時ファイルを使用してアップロードを行います。
   • openSsh
     このオプションがtrueの場合、OpenSSHの形式で設定を行います。
   • ignore
     この設定で指定されたパターンに一致するファイルやディレクトリはSFTP操作から除外されます。

ファイルのアップロード/ダウンロード

左側の拡張機能のアイコンを押すと SFTP 接続されているフォルダが表示されます。

• アップロード
  リモートのファイルを右クリックし、Upload Folderを選択します。
• ダウンロード
  リモートのファイルを右クリックし、Download Folderを選択します。