html5移动端网站开发刚刚刚刚刚刚刚刚刚刚刚刚刚刚刚

通过vscode的Remote - SSH插件, 实现远程服务器进行像本地操作一样使用远程服务器, 亦可进行像本地一样无感远程开发.

vscode插件(Remote - SSH)

通过这个插件管理远程连接, 再配合vscode的code命令, 在远程服务器中打开文件和文件夹就像在本地中操作文件和文件夹一样, 体验感超棒

• 在本地中的操作
  

# 在vscode的新建远程服务器
ssh <username>@<IP/domain>
# 回车, 输入密码后即可进入服务其中

• 在远程服务器中的操作

# 在vscode编辑器中打开(或创建文件)文件
code <filename>
# 在vscode中打开文件夹(或工作空间)
code <dir>

到这已经实现了远程开发了, 当然, 要想体验更好, 就需要配合ssh config和ssh-agent来实现跳板机(连接服务器内网)和自动登录(让打开远程项目体验就跟打开本地项目一样)功能了

ssh config自定义配置跳板机

ssh config配置文件(一般是在~/.ssh/config文件中)

上面vscode中新建的服务器中的配置文件基本也是自动在这个配置文件中保存着的

# 示例配置# 外网可访问的地址
Host ma-xxx.internet.companyHostName 11.0.1.172User root# ForwardAgent用于代理本地的ssh密钥, 提供给远程服务器使用, 让远程服务器拉取代码时也跟本地一样无需输入账密, 需配合ssh-agent使用才有效# ForwardAgent yesHost ProxyJump.fa.intranet.companyHostName 11.0.16.17User root# ForwardAgent yes# 配置跳板机, 可配置多级连跳, 无感进入内网中的内网ProxyJump ma-xxx.internet.company# LocalForward用vscode远程时进行自动端口转发(这个配置可不加)# LocalForward kuboard.fa.intranet.company:30084 172.17.0.2:80

• 涉及文章
  • 远程开发之端口转发¹

ssh-agent配置(使ForwardAgent配置生效, 免密拉代码)

• 前提是本地已经是免密拉代码了
  • 不是的话, 需要将本地ssh公钥先配置到gitee等代码仓库平台中

# 执行命令开启ssh-agent
ssh-agent
# 将ssh密钥交由ssh-agent代理
ssh-add ~/.ssh/id_dsa
# 在macOS上，您可以使用Keychain来存储密钥的密码。这样，您可以在重新启动后自动加载密钥。要将密钥添加到Keychain，请使用以下命令：ssh-add -K [密钥文件路径]# 列出当前已加载到 ssh-agent 中的所有 SSH 密钥的公钥
# ssh-add -L## 如果没有ssh密钥, 需要先生成下密钥
ssh-keygen -t rsa -C "<email>"

到这步, ForwardAgent配置就生效, 即可在远程服务器中免密拉取代码了

拷贝公钥到服务器(实现免密登录服务器)

# 将公钥拷贝到服务器中
ssh-copy-id <用户>@<IP/域名>

• 涉及文章
  • 使用vscode+ssh免密远程Linux²

到这就实现了自动登录了, 可以进行远程开发了, 当然, 更进一步还有环境相关的问题, 例如需要安装Java或者npm等, 可通过容器开发解决固定开发环境的问题, 等后面再补上

• 相关文章
  • ssh-tutorial

---

1. 远程开发之端口转发 ↩︎

2. 使用vscode+ssh免密远程Linux ↩︎