欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

宁皓网 在互联网访问本地开发环境 有大用

在互联网上可以直接访问到本地开发环境上搭建的服务,在调试一些外部服务接口的时候经常会用到这个功能。
来自 
https://ninghao.net/course/5163#info

 
介绍
1)介绍

这个课程主要目的是把本地开发环境发布到互联网上 .. 就是可以直接通过互联网访问到我们在本地开发的服务 ..

我们经常在开发的时候会去调试一些外部服务的接口,比如微信的小程序,微信支付,支付宝等等 .. 一般这些外部服务接口会向我们自己的应用提供的接口发出请求 .. 比如说用户使用支付宝支付完成以后,支付宝会向我们的应用提供的接口发出通知,告诉我们支付的状态 ..

想要保证这些外部服务接口能正常的对我们的应用接口发送这些请求 .. 就需要我们的应用接口能在互联网被访问到 .. 我们的开发工作都是在本地电脑上完成的 .. 开发到一定程度想要测试这些外部服务接口,我们需要把对应用的修改发布到互联网上 .. 然后去做调试 ..

这样做会比较麻烦一些,因为你每次都要在本地修改,然后发布,然后再测试 .. 更好的方法是,我们一直在本地开发 .. 对应用做了一些修改,可以立即去测试这些外部服务接口 .. 这就需要一种让互联网可以直接访问到本地开发环境的方法 ..

这个课程我们就去解决这个问题 ..

我们会用 ssh 通道的方法 .. 这种方法需要我们准备一台能在互联网上访问到的服务器 .. 我们在本地可以使用 ssh ,跟互联网上的服务器打一个通道 .. 然后在服务器上配置使用 NGINX .. 把对指定主机的访问转发给我们的这个本地与互联网服务器之间的 SSH 通道 .. 这样,对主机的访问 .. 实际上提供服务的,就是在我们本地电脑上的开发环境 ..

在课程里,我会在本地用 Node 应用做演示 .. 这套方法同样适应其它的框架或者系统 .. 比如 Drupal,WordPress,Laravel,Rails 等等 ..

来自 https://ninghao.net/video/5165#info

2)在本地电脑上创建开发接口

在本地电脑的开发环境上,你可以使用任何的框架或者系统去创建服务接口 .. 这里我打算用 node,去创建一个简单的接口 ..

创建一个目录 .. 名字是 ninghao-sandbox .. 进入到这个目录的下面 ..

先添加一个 package.json 文件 .. npm init -y

然后为项目安装几个 package .. express body-parser cors

npm install express body-parser cors --save

再安装一下 nodemon

npm install nodemon --save-dev

用编辑器打开项目 ..

创建一个 js 文件 .. 名字可以是 index.js

先导入 express .. const express = require('express')

然后导入 body-parser ... 名字可以是 bodyParser .. 它可以让我们在应用里得到用户发送过来的数据 ..

还有一个 cors .. const cors = require('cors') .. 因为接口一般会遇到跨域问题,这个 cors 中间件可以很方便的解决这个问题 ..

配置

再去创建一个应用 .. const app = express()

再把 router 导出来 .. const router = express.Router() ..

然后配置应用使用 bodyParser

app.use(bodyParser.urlencoded({ extended: false }))

这样应用就可以解析用 application/x-www-form-urlencoded 格式发送过来的数据了 ..

再配置解析一下 json 格式的数据 ..

app.use(bodyParser.json())

然后再用一下 cors .. app.use(cors()) ,这个包提供了很多配置选项 .. 具体的使用方法你可以参考这个包的说明文档 ..

再创建一个路由 ... 用一下 get 方法 .. 地址是 / .. 一个函数 .. request .. response ..

响应一条信息 .. 带个 message .. 对应的值是 hello ~

再用一个 app.use('/api', router) .. 这样用 router 定义的路由需要带 api 这个前缀 ..

最后可以去创建一个服务器 .. 用一下 app 的 listen .. 服务监听端口可以是 8080 .. 创建了服务以后 log 一条信息 ... 提示一下用户服务的地址是 localhost:8080 ..

start

打开 package.json .. 在 script 这里,可以配置一个脚本 .. 名字是 start .. 执行的命令是 ./node_modules/.bin/nodemon .. 用 nodemon 执行一下 index.js

这样修改了 index.js 文件以后,不需要每次都重新启动服务器了 .. 因为 nodemon 会自动给我们重启 ..

保存 .. 回到命令行 .. 执行一下 npm start

完成以后可以打开浏览器 ... 访问一下 localhost:8080 ... 会返回一个 json 数据 .. 上面带个 message .. 对应的值是 hello ~ ..

来自 https://ninghao.net/video/5166#info

配置
3)域名解析与配置服务器

先准备一个域名,这个域名要在国内备案 .. 因为很多外部服务都要求我们必须使用在国内备过案的域名 .. 我的域名是 ninghao.net .. 可以在域名的管理界面配置一条主机名 .. 这里我已经把 sandbox.ninghao.net 指向了我的一台服务器的 IP 地址 .. 就是这个 42.120.40.68。

这条解析记录的类型是 A,所以它可以指向一个 IP 地址 .. 打开命令行工具 .. Windows 用户可以使用 cmder .. mac 用户可以打开系统自带的终端 ..

这里我们可以使用 ping 命令验证一下 .. ping sandbox.ninghao.net ... 返回的 IP 地址就是我设置的 42.120.40.68 ..

也就是现在如果有人在互联网上访问 snadbox.ninghao.net 这个主机名的时候,可以使用 IP 地址是 42.120.40.68 的这台服务器来处理 ..

打开浏览器 .. 可以访问一下 sandbox.ninghao.net

现在会显示无法访问 ..

服务器

下面登录到我的这台服务器 .. ssh root@42.120.40.68 ... 输入用户的密码 ... 进来以后 .. 可以去配置一下这台服务器 ..

服务器需要安装一个 Web 服务 ... 我要用的是 NGINX 这个 Web 服务 .. 如果你的服务器上已经有了 NGINX 可以跳过这一步 ...

我的服务器的操作系统是 CentOS .. 先用 yum 安装一下 epel-release 这个仓库 ..

yum install epel-release -y

然后再去安装一下 NGINX ..

yum install nginx -y

你也可以自己去下载 NGINX 的源代码,然后手工去编译 NGINX .. 在宁皓网的 HTTP2 这个课程里有编译的具体的方法 .. 手工编译的好处是你可以自由地去配置 NGINX 服务器 ..

安装好以后 .. 启动一下 NGINX ..

systemctl start nginx

再让 NGINX 开机自启动

systemctl enable nginx

现在不用做任何的配置 .. 打开浏览器 ... 访问一下 sandbox.ninghao.net .. 这里会显示 NGINX 的欢迎界面 ...

来自 https://ninghao.net/video/5168#info

4)配置 NGINX 代理服务

现在我们要去配置一下 NGINX 服务器 .. 主要就是去配置一个代理服务 .. 进入到 nginx 的配置文件目录 .. 一般就是 /etc/nginx/conf.d

在这里可以新创建一个配置文件 .. 名字可以是 sandbox.ninghao.net.conf

里面添加点配置 .. 这里我们可以直接复制一下这篇文章里的 nginx 配置 ..

http://ninghao.net/blog/4452

这个配置的一开始定义了一个 upstream .. 名字叫 tunnel,这个名字你可以随便起 .. 里面有一个 server,也就是服务器 .. 地址是 127.0.0.1,它表示的是本地主机,这里表示的就是这台服务器 .. 后面的 7689 是个端口号 .. 这个端口号就是服务器与我们电脑之间用 ssh 打的通道用的一个端口号 ..

下面用了一个 server 区块定义了一个服务器 .. 里面 listen 了一下 80 端口 .. server_name 是服务器的名字 .. 这里应该把它换成我们的主机名 .. 修改一下 .. 主机名是 sandbox.ninghao.net

这个主机名已经指向这台服务器了 .. 访问这个主机名的时候,会用现在我们编辑的这个 nginx 配置 ..

下面是个 location .. 里面配置使用了 proxy ,也就是代理 .. 这些 proxy_set_header 指令就是设置了一下头部信息 .. 也就是代理转发请求的时候,设置了一些头部 .. 比如这个 X-Real-IP ,是一个头部信息的名字 .. 后面的 $remote_addr 是对应的值 .. 它是 NGINX 里面的一个变量 .. 对应的值应该就是请求来自的 IP 地址 ...

这里的 proxy_pass ,设置了代理转发到的服务 .. http://tunnel .. 这个 tunnel 就是上面定义的这个 upstream ..

如果你修改了这个 upstream 的名字 .. proxy_pass 后面的值你也应该修改成对应的名字 ..

这个配置的总体的意思就是,如果有人访问 sandbox.ninghao.net ,会把请求代理转发给这个 http://tunnel ..

其实就是发送给本地服务器的 7689 这个端口 .. 一会我们用 ssh 打通道的时候会用到这个端口号 ..

保存一下配置文件 .. esc 退出编辑模式 .. :wq .. 保存并退出 ..

重新加载一下 nginx,让配置生效 .. systemctl reload nginx

来自 https://ninghao.net/video/5169#info

5)SSH 通道:将服务端请求转发给本地

现在我要用 SSH ,在服务器与本地电脑之间打一条通道 .. 让服务器上的指定端口上的东西转发给本地电脑上的服务 ..

新建一个命令行标签 .. 用一下 ssh .. 添加几个选项 .. -vnNT

再添加一个 -R 选项 .. 配置一下转发 .. 7689 .. 这个是服务端上的一个端口 .. 我们已经配置了 NGINX 代理,把对 sandbox.ninghao.net 的访问转发给服务器的 7689 端口 ..

后面是一个冒号 .. 然后是本地服务的地址 .. 这里就是 localhost:8080 .. 这里的 localhost:8080 就是我在本地开发的时候创建的一个服务 ..

再配置一下登录信息 .. root@42.120.40.68 ... 输入密码 ...

ssh -vnNT -R 7689:localhost:8080 root@42.120.40.68

成功以后,我们可以在浏览器上 .. 访问一下 sandbox.ninghao.net ...

请求会返回一条信息 .. 上面写着 hello .. 这个响应现在会来自我们在本地电脑上搭建的这个服务 ..

这里我们可以试着在本地电脑上修改一下之前创建的这个接口 .. 修改一下它的响应信息 .. 您好 ..

回到浏览器 .. 刷新一下 ..

现在响应的信息就会变成 您好 ~

来自 https://ninghao.net/video/5170#info

6)配置使用 HTTPS

一些外部服务接口可能会要求我们的应用要使用 HTTPS 加密传输数据 .. 我们再去配置一下服务器 .. 先去申请个 SSL 证书 ..

很多地方支持申请免费的 SSL 证书 .. 这里我在阿里云上为 sandbox.ninghao.net 这个主机名申请了一个 SSL 证书 ..

先把它下载下来 .. 这里要我们选择 Web 服务器,我用的是 NGINX .. 点击下载 ..

下面还有一段相关的配置 .. 可以复制一下 .. 这里我只需要用到 ssl 相关的这些配置 ..

在文本编辑器上找个地方,把它粘贴过来 .. 一会儿我们会用到 ..

找到刚才下载下来的压缩包 .. 解压一下 .. 有两个文件,一个 .key,一个 .pem ,这两个东西我们需要把它放在服务器上 .. 可以用编辑器打开这两个文件 ..

先复制一下这个 .key 文件里的内容 ..

然后登录到服务器 .. 进入到 /etc/nginx .. 在这个目录的下面可以新建一个目录 .. 名字是 ssl .. 在这个可以存储 ssl 证书 ..

创建一个文件 .. sandbox.ninghao.net.key .. 把复制的内容粘贴到这个文件里面 .. 然后保存一下 ..

再去复制一下 .pem 文件里的内容 .. 再去创建一个文件 .. 名字是 sandbox.ninghao.net.pem .. 把内容粘贴过来 .. 再保存一下 ..

下面我们需要去配置一下 NGINX .. 回到编辑器 .. 修改一下这个 ssl 的配置 .. ssl_certificate .. 地址是 ssl 目录下的 sandbox.ninghao.net.pem

再修改一下 ssl_certificate_key 的值 .. 位置是 ssl 下面的 sandbox.ninghao.net.key

复制一下这些配置 ..

回到命令行 .. 去编辑一下 NGINX 的配置 .. 修改的是 conf.d 下面的 sandbox.ninghao.net.conf ..

先修改一下监听的端口号 .. 把 80 ,换成 443 ..

再把 ssl 相关的配置粘贴到这个配置里面 ..

保存一下配置文件 ..

重新加载一下 NGINX 的配置 .. systemctl reload nginx ..

然后回到浏览器,再去试一下 .. 现在,我们的服务就支持使用 https 协议了 ..

在本地,修改一下服务接口的响应文字 .. 保存 .. 再去预览一下 ...



我自己的 配置如下 (注释掉的部分就是关于 http 的配置)

upstream tunnel {

  server 127.0.0.1:7689;

}

#server {

#        listen       80;

#      server_name test.xxxxx.cn;

#      location / {

#      proxy_set_header  X-Real-IP  $remote_addr;

#      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

#      proxy_set_header Host $http_host;

#      proxy_redirect off;

#

#      proxy_pass http://tunnel;

#   }

#

#

#}


server {

listen 443 ssl;

server_name test.xxxxx.cn;

ssl_certificate cert/test.xxxxx.cn.pem;   #将domain name.pem替换成您证书的文件名。

ssl_certificate_key cert/test.xxxxx.cn.key;   #将domain name.key替换成您证书的密钥文件名。

ssl_session_timeout 5m;

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

ssl_prefer_server_ciphers on;

location / {

      proxy_set_header  X-Real-IP  $remote_addr;

      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

      proxy_set_header Host $http_host;

      proxy_redirect off;


      proxy_pass http://tunnel;

      }



来自 https://ninghao.net/video/5171#info


普通分类: