虚拟机+vscode+Windows开发

连接远程内网虚拟机所需软件

• Vnc，下载官网：https://www.realvnc.com/en/connect/download/viewer/
• Vscode插件：remote-ssh,remote-vscode，remote-ssh负责连接远程虚拟机进行代码编辑，remote-vscode实现了vscode拓展同步。

1. Vnc安装和使用

Vnc是一款图形化远程访问工具，使用它可以进行远程访问，通过Vnc连接，就可以打开远程桌面和桌面的命令行进行操作。

1.安装：一直next就好，记得安装位置要自定义一下或者记一下，因为后面需要找到文件打开vnc程序

2.使用：

   输入虚拟机域名：

 

3.输入用户名和密码（问虚拟机设置者），点击ok即可登入

 

2. Vscode 连接远程服务器

如果不想输入用户名、密码去登录其他主机，可以通过在客户机上生成密钥对，然后将公钥上传至服务器的方式达到目的。

用户将自己的公钥储存在远程主机上。登录的时候，远程主机会向用户发送一段随机字符串，用户用自己的私钥加密后，再发回来。远程主机用事先储存的公钥进行解密，如果成功，就证明用户是可信的，直接允许登录shell，不再要求密码。

基于密钥的安全验证必须为用户自己创建一对密钥，并把共有的密钥放在需要访问的服务器上。当需要连接到SSH服务器上时，客户端软件就会向服务器发出请求，请求使用客户端的密钥进行安全验证。服务器收到请求之后，先在该用户的根目录下寻找共有密钥，然后把它和发送过来的公有密钥进行比较。如果两个密钥一致，服务器就用公有的密钥加密“质询”，并把它发送给客户端软件（putty,xshell等）。客户端收到质询之后，就可以用本地的私人密钥解密再把它发送给服务器，这种方式是相当安全的。

 

密钥文件传到远程服务器上传步骤为：

1.生成密钥文件，生成和过程就和git仓库配置ssh密钥一样,如果有git仓库配置ssh密钥，那就直接用git仓库配置的ssh密钥即可，没有就生成一个，生成步骤不做展示，可输入ssh命令查看密钥文件是否存在。

 

2.Windows端打开cmd命令行进入.ssh文件夹，把id_rsa.pub文件上传到远程主机的~/.ssh目录下，命令为(输入命令回车后需要输入虚拟机密码)：

scp id_rsa.pub 你的远程服务器域名:~/.ssh/

3.通过ssh连接远程主机，命令为(输入命令回车后需要输入虚拟机密码)：

       ssh 你的远程服务器域名

4.远程主机端打开命令窗口，进入ssh文件夹，把公钥加入到authorized_keys文件中，命令为：

cat id_rsa.pub >> authorized_keys

5.输入exit命令断开ssh连接，再用私钥登录,登录命令为：

ssh 你的远程服务器域名 –i id_rsa

 

6.登录后就可以回到VSCode进行配置

在配置文件中设置HostName为虚拟机域名，User可任意起名，设置IdentifyFile为windows端本地ssh私钥路径，然后保存文件

 

3.虚拟机安装node:

先安装nvm，即Node Version Manager(Node版本管理器)，然后打开虚拟机命令行进行操作。

1.首先输入命令：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

2.然后激活nvm,命令为： source ~/.nvm/nvm.sh

3.激活完成后，安装node10.16.0版本，命令为：nvm install 10.16.0 

4.安装完成后，切换到该版本，命令为：nvm use node

5.安装完成记得重启命令行

4.虚拟机安装git:

直接打开命令行依次输入下列命令:

sudo add-apt-repository ppa:git-core/ppa

sudo apt-get update

sudo apt-get install git

5.虚拟机安装yarn

依次输入下列命令即可:

sudo apt-key adv --keyserver pgp.mit.edu --recv D101F7899D41F3C3

echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn

 

6.虚拟机配置ssh密钥

1.生成密钥，密钥生成过程的命令与windows端相同

# 这里的“aaa" 可以替换成自己的用户名

git config --global user.name "aaa"

# 这里的邮箱 aaa@aaa.com替换成自己的邮箱

git config --global user.email  "aaa@aaa.com"

# 这里的邮箱aaa@aaa.com 替换成自己的邮箱

ssh-keygen -t rsa -C "aaa@aaa.com"

2.查找密钥文件位置，命令为：sudo find / -name id_rsa.pub

3.打开密钥文件，命令为：vim /home/xxx/.ssh/id_rsa.pub（秘钥地址）

4.全选文件内容，输入:q关闭文件，然后打window浏览器进行仓库的ssh密钥配置

5.生成秘钥的目的是为了进行克隆和上传代码到git仓库，记得生成秘钥之后git上的ssh添加此秘钥

 

7.虚拟机安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

8.克隆项目代码，安装

9.虚拟机配置nginx

1.进入root目录

2.可按实际情况输入下列命令

安装命令：sudo apt-get install nginx

启动命令：sudo /etc/init.d/nginx start

查找文件命令：sudo find / -name XXX

打开nginx配置文件命令：vim /etc/nginx/nginx.conf

重启命令：sudo /etc/init.d/nginx restart

关闭命令：sudo /etc/init.d/nginx stop

如果配置nginx配置成功，windows浏览器输入vscode ssh配置的HostName+端口会显示项目页面,例如：

 

10.Vscode编辑代码

点击下图红框部分即可打开远程窗口，在远程窗口选择相应的文件编辑即可

 

11.开启vscode拓展同步

vscode远程窗口没有本地的那些拓展，需要下载remote vscode拓展，然后在设置里加上：设置“"remote.onstartup": true”