What are your feelings

  • Happy
  • Normal
  • Sad

利用visual studio code远程开发服务器

使用 VS Code + Remote Development Extension 来远程修改服务器的 Web 目录文件是一个非常强大且安全的方式。以下是详细的步骤,教你如何设置并使用它:

前提条件

  1. 服务器:你的远程服务器需要启用 SSH 服务,并可以通过 SSH 进行连接。

  2. VS Code:在本地已经安装好 VS Code。

  3. SSH 密钥:建议你使用 SSH 密钥进行身份验证,而不是用户名和密码(提高安全性)。

步骤一:安装 Remote Development Extension

  1. 打开 VS Code,进入扩展市场(点击左侧的扩展图标,或按 Ctrl + Shift + X)。

  2. 搜索Remote Development,然后点击安装。这个扩展包包含以下三个主要插件:

    • Remote – SSH:通过 SSH 连接远程服务器。

    • Remote – Containers:使用 Docker 容器进行远程开发(可选)。

    • Remote – WSL:与 Windows 的 WSL(Windows Subsystem for Linux)集成(可选)。

  3. 安装完成后,重启 VS Code。

步骤二:配置 SSH 连接

  1. 在 VS Code 左下角,你会看到一个绿色的远程连接图标,点击它。

  2. 选择 Remote-SSH: Connect to Host...,然后会提示你输入 SSH 服务器地址。

    格式:user@your-server-ip 例如:root@192.168.1.100yourusername@yourdomain.com

  3. 设置 SSH 配置:第一次连接时,VS Code 会要求你选择是临时使用还是将该连接永久保存到 SSH 配置文件中。推荐你选择保存到配置文件,以后可以更方便地连接。

    如果你选择了保存到配置文件,VS Code 会打开你的 .ssh/config 文件,在这里你可以手动配置你的 SSH 设置,例如:

    bash复制代码Host myserver
      HostName your-server-ip
      User yourusername
      IdentityFile ~/.ssh/id_rsa

    这样你就可以直接使用 myserver 作为主机名来连接。

  4. SSH 密钥设置:如果你使用 SSH 密钥,请确保你已经在服务器上设置了公钥认证。可以通过以下命令生成 SSH 密钥对:

    bash复制代码ssh-keygen -t rsa -b 4096

    然后将公钥上传到服务器的 ~/.ssh/authorized_keys 文件。

步骤三:连接到远程服务器

  1. 通过 Remote – SSH 插件,VS Code 会自动连接到你指定的服务器并打开一个远程的 VS Code 环境。

  2. 当连接成功后,你会看到左下角的绿色栏上显示连接的服务器名称,这表示 VS Code 已经在远程服务器上运行,并且你可以开始操作该服务器上的文件。

步骤四:打开服务器上的 Web 目录文件

  1. 在 VS Code 的 文件浏览器 里点击左侧的 Explorer 图标,选择 Open Folder

  2. 在弹出的窗口中,输入服务器上的 Web 目录路径,例如 /var/www/html 或其他你需要修改的路径。

  3. 现在你可以像在本地操作一样,直接浏览、打开、修改服务器上的文件。

步骤五:修改文件并保存

  1. 通过打开和修改文件后,你可以像本地开发一样保存文件。VS Code 会自动将修改上传到服务器,并且通过 SSH 通道进行传输,确保安全性。

  2. 如果你的 Web 服务器需要重启服务或者刷新缓存来应用这些更改,你可以通过 VS Code 的终端(Terminal)来执行命令,例如:

    bash复制代码sudo systemctl restart nginx

    或者:

    bash复制代码sudo systemctl restart apache2

步骤六:版本控制(可选)

如果你使用 Git 版本控制,在远程开发时,VS Code 也可以正常工作。你可以使用集成的 Git 来进行版本管理(如提交、推送、拉取等操作),所有操作将直接在服务器上进行。


提示:

  • 终端命令:VS Code 提供内置终端,你可以直接在终端中使用服务器的 Shell 环境运行命令,这样你无需额外的 SSH 客户端。

  • 自动保存:你可以在 VS Code 中启用自动保存功能,在修改文件后它会自动保存到服务器。

  • SSH 密钥管理:使用 ssh-agent 来管理你的 SSH 密钥,避免每次都输入密码。


通过这种方式,你可以远程安全、高效地管理服务器上的 Web 目录文件,并享受本地开发环境的便利。

 

细节点:

按照以下步骤来配置和使用 VS Code + Remote Development Extension 连接你的 Linux 服务器(IP:47.000.000.000):

1. 安装 Remote Development Extension

  • 打开 VS Code,点击左侧扩展图标,搜索 Remote Development,然后安装。

  • 安装完成后,确保重新启动 VS Code。

2. 配置 SSH 连接

  1. 生成 SSH 密钥(如果还没有): 在你的本地终端(命令行)中生成一个 SSH 密钥对:

    bash复制代码ssh-keygen -t rsa -b 4096

    当提示输入路径时,可以直接按回车来使用默认路径 ~/.ssh/id_rsa

  2. 将公钥上传到服务器: 使用 ssh-copy-id 将你的公钥复制到服务器:

    bash复制代码ssh-copy-id user@47.000.000.000

    替换 user 为你的服务器登录用户名。系统会提示输入服务器密码。

    公钥会被自动添加到服务器的 ~/.ssh/authorized_keys 文件中,这样你下次连接时就不需要输入密码了。

3. 在 VS Code 中配置 SSH

  1. 打开 VS Code,点击左下角的绿色远程连接图标。

  2. 选择 Remote-SSH: Connect to Host...

  3. 输入 user@47.239.126.156,并根据提示选择是否将配置保存到 .ssh/config 文件。 如果你保存到 .ssh/config,文件内容应该类似这样:

    bash复制代码Host myserver
      HostName 47.000.000.000
      User yourusername
      IdentityFile ~/.ssh/id_rsa

    之后你可以通过在 VS Code 中选择 myserver 进行连接。

4. 连接到服务器

  1. 选择你刚刚设置好的服务器进行连接(例如:myserver)。

  2. 连接成功后,VS Code 会自动进入远程开发模式。你会看到左下角的绿色栏显示服务器名称。

  3. Explorer 中选择 Open Folder,输入服务器的 Web 目录路径(如 /var/www/html),并开始修改文件。

5. 通过终端执行服务器命令(可选)

  • 你可以在 VS Code 中使用内置的终端,通过 Terminal > New Terminal,执行如 sudo systemctl restart nginx 这样的命令,来管理 Web 服务。

这样你就能安全、高效地远程修改服务器的 Web 目录文件

索引