メインコンテンツにスキップ

VSCode を介したサイトファイルへの接続

SSH および FTP/SFTP で接続するために、Visual Studio Code ではリモートファイルに便利にアクセスできる拡張機能を使用します。

SSH​

拡張機能をインストール​

Visual Studio Code を開きます。 サイドバーの「Extensions」アイコン（四角いアイコン）をクリックし、Extensions ビューで SSH を検索します。
Microsoft の「Remote - SSH」という名前の拡張機能で「Install」をクリックします。

Install extension

SSH キーを設定​

パスワードなしで SSH 接続するには、この記事を使用して FASTPANEL で SSH キーを設定してください。

注記

サイトユーザーはサイトカードの「Site user」フィールドで確認できます。 サイトユーザーのパスワードを変更するには、FASTPANEL® の「Management」→「Users」セクションに移動します。

VSCode で SSH を設定​

Windows/Linux では F1、Mac では Cmd+Shift+P を押してコマンドパレットを開き、Remote-SSH: Add New SSH Host と入力して選択し、次の形式で SSH 接続文字列を入力します:

ssh site_user@11.22.33.44

Add New SSH Host

site_user と 11.22.33.44 を適切な値に置き換えます。 site_user の代わりにサイトユーザーを指定し、11.22.33.44 の代わりにサーバーの IP アドレスを指定する必要があります。 コマンドを入力した後、SSH 設定を保存する構成ファイル（通常は ~/.ssh/config）を選択します。

リモートサーバーに接続​

Windows/Linux では F1、Mac では Cmd+Shift+P を押してコマンドパレットを開き、Remote-SSH: Connect to Host と入力して選択し、以前に追加したホストを選択して、サーバーのフィンガープリントを承認します。初回接続時には SSH キーのパスフレーズを入力し、求められた場合はパスワードを入力します。

接続したら、ホスト上のフォルダーを開くには 「Explorer」→「Open Folder」 に移動します。
たとえば、/var/www/site_user/data/www/example.com です。

Connect to the Remote Server

ファイルを開いてコーディングを開始​

接続されると、VSCode は再読み込みされ、リモートサーバー上のファイルを VSCode で直接参照できるようになります。 ローカルマシンの場合と同じように、ファイルを開き、編集し、保存できます。

詳細については、 拡張機能のドキュメントを参照してください。

FTP/SFTP​

拡張機能をインストール​

Visual Studio Code を開きます。 サイドバーの「Extensions」アイコン（四角いアイコン）をクリックします。 検索バーに SFTP と入力します。 選択した拡張機能をインストールするには「Install」をクリックします。

Install extension

接続を設定​

Windows/Linux では F1、Mac では Cmd+Shift+P を押してコマンドパレットを開き、SFTP: Config と入力して、.vscode ディレクトリ配下の sftp.json ファイルでリモートサーバー情報を使って構成パラメーターを編集します。 例:

{  
    "name": "My Server",  
    "host": "11.22.33.44",  
    "protocol": "ftp",  
    "password": "password",  
    "port": 21,  
    "username": "ftp_user",  
    "remotePath": "/",  
    "uploadOnSave": false,  
    "useTempFile": false,  
    "openSsh": false  
}
注記

FASTPANEL® で FTP アカウントを作成する方法についてはこの記事、SFTP アカウントについてはこちらの記事をご覧ください。

  • "host": サーバーの IP アドレス。
  • "protocol": ftp または sftp を指定します。
  • "port": FTP なら 21、SFTP なら 2222。
  • "username" と "password": FTP/SFTP アカウントのログイン名とパスワード。
  • "remotePath": サーバー上で作業したいディレクトリを指定します。
  • "uploadOnSave": ファイル保存時に自動アップロードするためのオプション。

sftp.json の password パラメーターは任意です。省略した場合、同期時にパスワードの入力を求められます。 sftp.json ファイルを保存して閉じます。

ファイルの操作​

コマンドパレットを開きます。Windows/Linux では F1、Mac では Cmd+Shift+P を押します。 次に、SFTP と入力すると、利用可能な複数のコマンドが表示されます。これらはプロジェクトのファイルエクスプローラーのコンテキストメニューからもアクセスできます。
リモートフォルダーと同期するには、SFTP: Download Project コマンドを使用します。これにより、sftp.json の remotePath 設定で指定されたディレクトリがローカルで開いているディレクトリにダウンロードされます。

Remote Explorer​

Remote Explorer ではリモートファイルを参照できます。 View: Show SFTP コマンドを実行すると Remote Explorer を開けます。 その後、アクティビティバーで SFTP ビューをクリックします。

Remote Explorer ではファイルの内容を表示することしかできません。 ローカルで編集するには SFTP: Edit in Local を使用します。

Install extension