VS Code SSH 工具使用指南

本指南介绍如何使用 VS Code 的 Remote SSH 功能，包括：

SSH 插件安装
配置与连接服务器
基本 Linux / Nginx 常用命令
文件上传方法

适用于部署前端项目、管理 Linux 服务器、修改 Nginx 配置等场景。

🧩 1. 安装 Remote SSH 插件

1. 打开 VS Code

2. 点击左侧扩展（Extensions）

3. 搜索并安装：


Remote - SSH
Remote - SSH: Editing Configuration Files

安装完成后 VS Code 左下角会出现一个绿色的远程连接图标。

🔗 2. 配置 SSH 连接

添加 SSH 主机

点击 VS Code 左下角绿色图标 ><
选择 Remote-SSH: Add New SSH Host…
输入连接命令：


ssh 用户名@服务器IP

例如：


ssh test@172.20.0.93

选择保存 SSH 配置文件位置（通常为 ~/.ssh/config）

配置完成后，在 SSH config 文件中会出现：


Host myserver
    HostName 172.20.0.93
    User test

🚀 3. 连接服务器

左下角点击绿色图标
选择 “Remote-SSH: Connect to Host”
选择刚添加的主机
输入密码（如果使用密码登录）

连接成功后 VS Code 左侧文件树将显示服务器的目录结构，可直接编辑服务器文件。

📂 4. 文件上传方式

VS Code SSH 有多种方式传文件：

方式一：直接拖拽上传（最简单）

从本地将文件拖入 VS Code 的远程文件树中即可自动上传。

方式二：右键上传

在远程目录上右键 → Upload…

选择本地文件即可上传。

方式三：使用 SFTP 插件（推荐部署前端项目）

安装 SFTP 插件（作者 liximomo），然后在项目根目录生成 sftp.json：


{
  "host": "172.20.0.93",
  "username": "test",
  "password": "123456",
  "remotePath": "/usr/share/nginx/html",
  "uploadOnSave": false
}

使用右键菜单中的 Upload 可将 dist/build 上传到 nginx 静态目录。

方式四：使用 scp（命令行）


scp -r ./dist test@172.20.0.93:/usr/share/nginx/html

🐧 5. 常用 Linux 命令

📁 文件与目录


ls -l         # 查看文件
cd /path      # 切换目录
mkdir logs    # 创建目录
rm -rf logs   # 删除目录
cp a b        # 复制文件
mv a b        # 移动文件

🔑 权限与用户


sudo su                  # 切换到 root
sudo chmod 755 file      # 修改权限
sudo chown user:user f   # 修改拥有者

🌐 6. Nginx 相关命令

检查 Nginx 配置语法


sudo nginx -t

重载配置（不重启）


sudo systemctl reload nginx

查看运行状态


sudo systemctl status nginx

启动 / 停止 / 重启


sudo systemctl start nginx
sudo systemctl stop nginx
sudo systemctl restart nginx

Nginx 配置文件路径


/etc/nginx/nginx.conf
/etc/nginx/conf.d/*.conf
/usr/share/nginx/html  # 静态文件目录

🚀 7. 前端项目部署到 Nginx

1. 打包前端项目


npm run build

得到 dist 或 build。

2. 上传文件到服务器

（推荐用 SFTP 插件或 VS Code 拖拽）

上传到：


/home/test/dist

3. 覆盖 Nginx 静态目录


sudo rm -rf /usr/share/nginx/html/*
sudo cp -r ~/dist/* /usr/share/nginx/html/

4. 重载 Nginx


sudo systemctl reload nginx

❗ 常见问题

无法保存 `/etc/nginx/nginx.conf`

原因：test 用户没有权限。

解决：


sudo chmod 666 /etc/nginx/nginx.conf

或：


sudo chown test:test /etc/nginx/nginx.conf

🎉 总结

通过 VS Code Remote SSH，你可以：

像本地一样操作服务器
编辑 Nginx 配置
上传前端项目
执行 Linux 命令
查看日志并维护应用

这是目前最干净、最好用的免费远程开发方案之一。