ロリポップのレンタルサーバーにファイルをアップロードする方法といえば FTP が一般的ですが、Web 制作や WASM サイトの開発をしていると、VS Code で編集したソースをそのまま保存するだけでアップロードしたいという場面が増えてきます。
そんなときに便利なのが VS Code の拡張機能「SSH FS」 です。
SSH FS を使えば、他のツールを使わずに VS Code だけで開発からアップロードまで完結します。 まさに「エディタがそのままデプロイ環境になる」感覚です。
この記事では、実際に動く設定だけに絞って、最短で接続できる手順をまとめます。
1. ロリポップ側で SSH を有効化する
ロリポップの管理画面で SSH を有効化します。
サーバー管理・設定 → SSH →「SSHを有効化」
ここで以下の情報が表示されます。
- Host（サーバー名）：例）
ssh.lolipop.jp - Port（SSH ポート番号）
- Username（アカウント名）
- Password（SSH パスワード）
この 4 つが VS Code 側の設定に必要です。
2. VS Code に SSH FS をインストール
- VS Code 左の拡張機能アイコンをクリック
- 「SSH FS」で検索
- インストール
インストールすると、左側のアクティビティバーに「SSH FS」アイコンが追加されます。
3. SSH FS の設定を作成する
- Ctrl + Shift + P（コマンドパレット）
SSH FSと入力- Create a SSH FS configuration を選択
- 任意の名前をつけて保存
すると設定画面が開くので、ロリポップの SSH 情報を入力します。
4. 実際に動く SSH FS の設定例
| 項目 | 設定例 |
|---|---|
| Host | ssh.lolipop.jp |
| Port | 2222（例） |
| Username | ロリポップのアカウント名 |
| Password | SSH パスワード |
| Root | ~/web |
Root のポイント
- ロリポップの SSH はログインするとホームディレクトリに入る
~/は「ホームディレクトリ」を意味する- 私の場合はwasmというフォルダを作っているので~/web/wasmで設定しました。
- 必要なディレクトリを Root に設定すると作業がスムーズ
5. 接続して「ワークスペースに追加」する
SSH FS のサイドバーから：
- 作成した設定を選択
- Connect をクリック
- Add as Workspace Folder（ワークスペースに追加） を選択 ← ここが重要！
この操作を忘れると、エクスプローラーにフォルダが表示されません。
追加すると、VS Code のエクスプローラーに ~ロリポップサーバのフォルダRootで設定したフォルダが見れるようになります。。
6. ファイルを保存するだけでアップロード完了
SSH FS の最大のメリットはここです。
- ローカルで編集
- Ctrl + S で保存
- 即サーバーへアップロード
FTP クライアントを立ち上げる必要もなく、 VS Code だけで開発からアップロードまで完結します。
7. よくあるつまずきポイント
● Root を設定していない
→ ロリポップは Root を指定しないと接続に失敗しやすいです。
● ワークスペースに追加していない
→ 接続してもフォルダが表示されません。
● 初期Rootを別のフォルダがデフォルトで表示するようにしたい。
~/web/別のフォルダ名まとめ
SSH FS を使うと、ロリポップのサーバーをローカルのように扱えて、保存するだけでアップロードされる快適な環境が手に入ります。
- SSH を有効化
- SSH FS をインストール
- Host / Port / Username / Password / Root を設定
- 接続して「ワークスペースに追加」
- 保存するだけでアップロード完了
- VS Code だけで開発からデプロイまで完結
WASM サイトのように更新頻度が高いプロジェクトでは特に効果を発揮します。
コメント