リモートのロリポップサーバにあるファイルを編集する方法は、ロリポップ!FTPで直接編集、保存する。ローカルにダウンロードしたファイルをFTPで送信する。などありますが、Visulal Studio Code(以下vscode)で直接編集したいという方も多いのではないでしょうか？
ロリポップ!の管理画面から行う準備から詳細な手順を共有します。
この記事で分かること
ロリポップ!のサーバ内にあるファイルをvscodeで直接編集できるようになります。
筆者の利用OSはWindows11 Homeです。
ロリポップ!管理画面でSSHを有効化する
管理画面にログインしたら以下のように画面をクリックしてSSHを有効化します。
サーバの管理・設定 -> SSH -> SSHを有効化する
以下のように表示されれば成功です。 表示されているサーバー、アカウント、接続ポート、SSHパスワードの情報をすぐ参照できるようにしておきましょう。後ほど使います。
SSH FSのインストール
vscodeを開いたら、画面左の拡張機能のタブをクリック、検索ボックスでSSH FSを検索したらinstallをクリックしてSSH FSプラグインをインストールしましょう。
SSH FS の設定
次に設定を行います。
キーボードのCtrlとShiftを押しながらPキーを押してSSH FSと入力し、結果の[SSH FS:Create a SSH FS configulation]をクリックします。
Nameに任意の名前を入れます。
画像の赤枠に設定値を入力します。
ロリポップ!管理画面のSSHページが画像の場合の入力例を以下の表で示します。Rootの項目の~/は自分のホームディレクトリ(フォルダ)を示す記号なので、そのまま入力で問題ありません。 入力ができたら一番下にあるSaveボタンを押しましょう。
|
項目 |
意味 | 記入例 |
|
Host |
接続するサーバの名前、アドレス | ssh.lolipop |
| Port | 接続先のポート番号 | 2222 |
| Root | 接続時に最初に開くディレクトリ | ~/ |
| Username | ユーザ名 | ユーザ01 |
| Password | パスワード | password |
ロリポップ!のサーバに接続する
設定の際と同様にCtrl+Shift+Pを押してSSH FSと入力します。今回は[SSH FS:Add as Workspace folder]を選択しましょう。
先ほど作成したlolipopを選択すると接続を開始します。
ロリポップサーバ内のファイルが確認できれば成功です。
TIPS
・今回はパスワード認証で接続しましたが、公開鍵認証で接続することも可能です。
より安全に接続したい方はsshkey-genなどで認証鍵ペアを作成してSSH FSの設定項目のPasswordの代わりにPrivate keyの項目に秘密鍵のパスを入力しましょう。
・vscodeのRemote Developmentプラグインも試しましたが、ロリポップ!ではうまく接続できませんでした。
まとめ
ロリポップ!サーバ利用者向けにvscodeでリモートのファイルを直接変種する方法を解説しました。
分からないことなどあればお気軽に問い合わせください。
お問い合わせ
