Use local vscode + Remote Development/Remote-SSH plug-in + remote vscode-server to build a remote development environment and visualize the code locally without the need for VNC.
In this way, you can also use your windows laptop to debug code happily in the future.
VSCode's Remote function consists of three plug-ins, which implement remote development in three different scenarios:
Remote - SSH: Use SSH to connect to a remote host for development.
Remote - Container: Connect to the container on the current machine for development.
Remote - WSL: Connect Subsystem for Linux (Windows Subsystem for Linux) for development on Windows 10
The main configuration is divided into two parts: remote server and local host.
1. Preparation of remote host
- Install the ssh service and see if the following code has sshd
sudo ps -e |grep ssh
#远程主机肯定有个root密码：sudo passwd root
If there is no sshd process, use the following code to install and start it
sudo apt -y install openssh-server
sudo service ssh start
Configure ssh to start at boot
# 开机自动启动ssh命令
sudo systemctl enable ssh
# 关闭ssh开机自动启动命令
sudo systemctl disable ssh
# 单次开启ssh
sudo systemctl start ssh
# 单次关闭ssh
sudo systemctl stop ssh
# 设置好后重启系统
reboot
#查看ssh是否启动，看到Active: active (running)即表示成功
sudo systemctl status ssh
#其他方法
sudo vi /etc/ssh/sshd_config
#在行"#PermitRootLogin prohibit-password"后添加行"PermitRootLogin yes"
#开启ssh服务开机自启动
sudo update-rc.d ssh defaults
- Install and deploy vscode-server.
Check in the following directory whether the remote server has vscode-server installed.
#一般在根目录，查看该目录下的bin文件是否都存在
7060:cd ~/.vscode-server
#查看文件
7060:~/.vscode-server$ ls -al
total 52
drwxrwxr-x 5 mi mi 4096 5月 31 14:45 .
drwxr-xr-x 41 mi mi 4096 5月 31 14:45 ..
-rw-rw-r-- 1 mi mi 17025 5月 31 16:07 .b3e4e68a0bc097f0ae7907b217c1119af9e03435.log
-rw-rw-r-- 1 mi mi 7 5月 31 14:45 .b3e4e68a0bc097f0ae7907b217c1119af9e03435.pid
-rwx------ 1 mi mi 37 5月 31 14:45 .b3e4e68a0bc097f0ae7907b217c1119af9e03435.token
drwxrwxr-x 3 mi mi 4096 5月 31 14:45 bin
drwx------ 7 mi mi 4096 5月 31 16:07 data
drwx------ 3 mi mi 4096 5月 31 16:07 extensions
Generally speaking, after the first one successfully connects to the server through the Remote-SSH plug-in of notebook vscode, this service should be automatically installed on the server. If not, please refer to using vscode + Remote-SSH plug-in + vscode-server for remote development.
Briefly describe the key processes:
#1.根据本地机器的vscode的about信息获取对应版本号的commitid
#2.然后在替换id下载对应的vscode-server
https://update.code.visualstudio.com/commit:commit_id/server-linux-x64/stable
#3.登陆远程服务器，在 ~ 目录下创建 .vscode-server/bin
mkdir -p ~/.vscode-server/bin
#4.将下载得到的 vscode-server-linux-x64.tar.gz 文件上传至上述新建的 ~/.vscode-server/bin 目录
scp vscode-server-linux-x64.tar.gz user_name@server_ip:~/.vscode-server/bin
#5.登陆远程服务器，解压 vscode-server-linux-x64.tar.gz
cd ~/.vscode-server/bin
tar -zxvf vscode-server-linux-x64.tar.gz
#6.解压后将在 ~/.vscode-server/bin 目录下生成 vscode-server-linux-x64 目录，将其改名为上文中得到的 vscode 的 commit id，并删除 vscode-server-linux-x64.tar.gz
mv vscode-server-linux-x64 e18005f0f1b33c29e81d732535d8c0e47cafb0b5
rm vscode-server-linux-x64.tar.gz
#7.在这个以 vscode commit id 命名的目录中创建名为 0 的文件
cd ~/.vscode-server/bin/e18005f0f1b33c29e81d732535d8c0e47cafb0b5
touch 0
After vscode-server is deployed, it does not contain any extensions. You can put the extensions directory in the ~/.vscode directory of other Ubuntu machines with vscode installed into the ~/.vscode-server directory of the remote server created above. , implement offline installation of the extension, or directly install all or part of the local extension to the remote server online through the methods mentioned below.
2. Configuration of local computer
-
Install SSH (Git comes with it, it is best to install the Git version directly)
-
Check if you can connect to the remote computer
ssh 用户名@服务器IP地址
#如下输入如下命令后会连接远端的服务器，输入密码后若是能够成功，那么就开始进行操作
#服务器一般只能通过内网连接，如果pc没有连接内网，需要先登录能通过公网访问的跳板机，在连接到服务器
ssh 用户名@服务器IP地址 -p 端口号 -J 跳板机用户名和跳板机ip
ssh [email protected] -p 22 -J [email protected]
- Download the VS Code software from the VS official website, and then install the plug-in Remote Development suite (including remote-ssh)
- Then restart VS and the Remote Explorer plug-in (remote resource manager) will appear in the interface. Click the settings button next to ssh and select the location to save the configuration file. Generally, the choice is: C:\Users\username.ssh\config [External link picture
transfer The save failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-O6wHu0j6-1685525907704)(./pic/sshTargets.png)] - Set the server information in the configuration file, enter the HostName server IP address and User server user name. After saving, the corresponding machine name will appear on the left
Host 机器名称，可以任意
HostName IP地址
Port 端口号（不加Port，则端口号默认为22）
User 服务器登录用户名
IdentityFile "C:\Users\12646\.ssh\id_rsa" #本地的id_rsa的路径（如果配置了免密登录才需要）
If you want to display the terminal every time you open the remote server, you can change the settings, File->Preferences->Settings->Extension->Remote-SSH, find Show Login Terminal and check 6. As long as the configuration
file is entered correctly, the rest is very simple. Now, you only need to right-click or click the arrow in the host entry under the ssh option to start connecting to the server. The
main steps are: 1. Select the operating system platform; 2. Enter the login password of the remote host
[external link image transfer failed, The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-P9qGOJRG-1685525907706)(./pic/login.png)] 7.
Open the remote working directory
[external link image transfer failed, the source site may have Anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-tWEkMD5f-1685525907706)(./pic/openfloder.png)]
3. Install local extensions to remote servers
[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-2HdDkKIo-1685525907706)(./pic/installplugin.png)]
4. Configure SSH password-free login
Main reference: Use vscode + Remote-SSH plug-in + vscode-server for remote development
#生成 SSH 密钥对（若不存在得话）
#生成的密钥对被保存在本地的 C:\Users\你的用户名\.ssh
ssh-keygen -C "your email address"
#将 SSH 公钥添加到远程服务器
#输入上述命令以及远程服务器的登陆密码，将在远程服务器的 ~/.ssh 目录下创建 authorized_keys 文件（若不存在得话），并将本地 SSH 公钥中的内容添加到该文件中
ssh-copy-id user_name@server_ip
5. Springboard connection
If the intranet host cannot be directly connected, it needs to be operated through a springboard machine. At this time, we need to configure the springboard machine information first, and then connect to our target host through the springboard machine.
Host jump
HostName 192.168.42.106
User username1
IdentityFile "C:\Users\12646\.ssh\id_rsa"
Host xxx
HostName 192.168.42.105
Port 8827
User username
ProxyJump jump