VSCodeでロリポップサーバのファイルを直接編集する方法
Web開発する際にXamppみたいなローカル上で環境を整えてもいいのですが、どうせレンタルサーバーと契約しているので直接書いてしまえばFTPで転送する手間が省けるなと思いました。
今回はVSCode（Visual Studio Code）でロリポップサーバーに接続し直接編集できるようにしたので紹介します。
ロリポップサーバーでSSH接続を有効にする
まずはロリポップサーバー側でSSHを有効にします。
管理画面上で、サイドメニューのサーバー管理・設定→SSHを選択します。
そこに、「SSHを有効化する」というボタンがあるのでクリックしましょう。すると以下の画面に変わります。ここの上方はVSCode側に設定で使うので控えておきましょう。
VSCodeの拡張機能「SSH FS」をインストール
今度はVSCode側の設定です。
拡張機能SSH FSをインストールします。SSH FSを検索したらinstallボタンをクリックしてください。
SSH FSの設定
インストールが終わったらSSH FSの設定を行います。
メニューの表示→コマンドパレットを選択します。
コマンドパレットが現れたら、SSH FSと入力してみましょう。SSH FSに関するコマンド一覧が現れます。その中から、Create a SSH FS configrationを選択します。
Nameには任意の名前を入力します。「Save」ボタンをクリックしましょう。
次にロリポップサーバーのSSH情報を入力します。赤いラインの箇所に先程ロリポップの管理画面で確認した情報を入力します。
| SSH FS上の名称 | ロリポップ管理画面上の名称 |
| Host | サーバー（ssh.lolipop.jp） |
| Username | アカウント |
| Port | 接続ポート |
| Password | SSHパスワード |
| Root | ※接続したい場所（~/が最上位） |
ロリポップサーバーに接続
コマンドパレットからSSHと入力し、Add Workspace folderを選択します。
以下の画面が現れますが、下に先程設定した名称が現れるのでそれをクリックします。接続が開始されます。
接続が終わるとエクスプローラー上にロリポップサーバーが見れるようになります。これで完了です。サーバー上のファイルを直接編集できるようになりました。
スポンサーリンク