vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境

上一篇文章中讲到使用 SSH通道,当用户发送请求到服务器后,服务器通过SSH通道,将请求再转发到本地环境,实现访问域名服务器(或者公网IP)指向本地开发环境。转发需要一定的时间、这种方式受网络因素的影响比较大。本篇文章介绍另一种实现穿透的方式:使用 vsCode里的 SFTP 扩展。

使用SFTP,将本地代码上传到服务器中,修改本地代码,同步服务器中的代码更新,在服务器端启动项目,用户发送请求,直接从服务器端返回数据。

1. vsCode中安装 SFTP 扩展

vsCode 中安装 SFTP 扩展,扩展工具中搜索 sftp,安装:
vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境
安装成功后,Windows/Linux 系统下按住ctrl+shift+p,Mac系统下按住cmd+shift+p,显示命令面板。在输入框中执行SFTP:config命令,回车。

vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境
会自动打开 sftp.json 配置文件,修改配置文件,ctrl+s保存。
vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境

在目录区域单击右键,选择 Sync Local -> Remote,将代码上传到服务器。
输入服务器密码,回车。
可以看到在 vsCode 的左下角,文件正在上传。
上传完成后,可以到配置的服务器目录下看文件是否上传成功。
vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境
在右侧SFTP模块下,也可以看到上传到服务器目录里的文件:
vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境

2. 服务器 nginx 配置

在服务器 /etc/nginx/conf.d 文件夹下增加一个 nginx 配置,例如新建 wx.conf 配置文件,文件内容如下,添加完后,终端执行 nginx -s reload 重启 nginx 服务,也可以使用 nginx -t查看当前 nginx 的配置是否正确。

与上一篇文章 nginx 配置文件不同的不同之处在于:
将之前的 proxy_pass http://tunnel;
替换成proxy_pass http://127.0.0.1:端口号
表示直接请求本地服务器端口
vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境

使用 node/nodemon/pm2 启动项目
node server/server.js

在浏览器中访问服务器地址,可以看到已经指向本地开发环境了。

测试用的 server.js 代码如下:
vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境
浏览器访问效果如下:
vsCode扩展_SFTP_实现访问域名服务器(或者公网IP)指向本地开发环境

猜你喜欢

转载自blog.csdn.net/Charissa2017/article/details/106211729