手把手教你搭建Mac环境微信小程序的本地测试服务器

Windows环境下

  • 手把手教你搭建Windows环境微信小程序的本地测试服务器

问题的提出

  • Mac环境
  • 方便快捷地搭建小程序的测试服务器
  • 小程序对于网络请求的URL的特殊要求
    • 不能出现端口号
    • 不能用localhost
    • 必须用https

主要步骤

  • 用json-server搭建简单地服务器,搭建出来的服务器地址为localhonst:3000
  • 安装nginx进行反向代理,以便隐藏端口号和替换localhost
  • 搭建https服务
  • 微信小程序设置

用到的工具

  • json-server
  • nginx
  • openssl
  • 微信小程序官方开发工具

json-server的使用

  • 安装
sudo npm install -g json-server
复制代码
  • 选一个文件目录新建json文件,比如cars.json
{
  "cars": [
    {
      "id": 1,
      "desc": "哈弗H6",
      "completed": false
    },
    {
      "id": 2,
      "desc": "吉利博越",
      "completed": false
    },
    {
      "id": 3,
      "desc": "宝骏560",
      "completed": false
    }
  ]
}
复制代码
  • 启动json-server服务:在新建的json文件目录,运行命令:json-server + 文件名
json-server cars.json
复制代码

输出:

Loading cars.json
Done

Resources
http://localhost:3000/cars

Home
http://localhost:3000
复制代码
  • 浏览器中输入地址http://localhost:3000/cars就能看到输出cars.json的内容
  • 至此,就搭建了一个简单的本地测试服务器,json-server支持get,post等,基本足够开发测试用了,具体的可以参考json-server官网
  • 为了将localhost:3000/todos这样的接口改成www.test.com/todos这样的形式,就需要用nginx进行反向代理

用nginx进行反向代理

  • 安装nginx
brew install nginx
复制代码

通过以上方式安装nginx,我的nginx路径在/usr/local/etc/nginx

  • 浏览器中键入http://localhost:8080,访问到nginx的欢迎界面,即表示nginx安装成功
  • 配置nginx的反向代理:编辑nginx.conf文件
vi /usr/local/etc/nginx/nginx.conf
复制代码
  • 修改nginx.conf文件中的server{}内容。这里要注意的是,conf文件里面主要有2个server{},一个是默认监听http请求的8080端口的,另一个是https请求的。其中https server默认是注释掉的
server {
   listen       80;//将原来的8080改成80端口,这样就能隐藏请求中的端口号了
   server_name  www.test.com;//这里改成你想要的测试域名
   server_name_in_redirect off;
   proxy_set_header Host $host:$server_port;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   location / {
        proxy_pass http://127.0.0.1:3000/;//需要代理的地址,这里是我们json-server的默认地址
    }
}
复制代码
  • 重启nginx服务
sudo nginx -s reload //不带sudo可能会重启nginx失败
复制代码
  • 不要忘记将你的测试域名加入到hosts文件中啊!!!
//hosts文件中添加测试域名
127.0.0.1 www.test.com
复制代码
  • 经过以上的设置,nginx代理的设置的完成了。启动json-server后可以用一下方式访问浏览器
localhost/cars
localhost
www.test.com
www.test.com/cars
复制代码
其他问题
  • nginx常用的命令
//启动
nginx

//重启
sudo nginx -s reload

//关闭
nginx -s stop
复制代码
  • Mac修改hosts
Finder的“前往”->“前往文件夹” 输入 /private/etc 按回车  就可以看到里面的hosts文件了。直接右键选择“文本编辑”打开,修改,保存即可。 
复制代码
  • 配置nginx碰到FT_Select_size:undefined问题
可以尝试安装fontconfig库解决
复制代码
  • 碰到其他的文件不存在之类的问题,请仔细检查命令是否输入正确,配置文件是否修改正确

https服务安装

  • 利用openssl生成证书
cd usr/local/etc/nginx/conf
设置server.key:openssl genrsa -des3 -out server.key 1024
参数设置:openssl req -new -key server.key -out server.csr
写RSA秘钥:openssl rsa -in server.key -out server_nopwd.key
获取私钥:openssl x509 -req -days 365 -in server.csr -signkey server_nopwd.key -out server.crt
复制代码
  • 修改nginx配置文件nginx.conf
server {
   listen       80;//将原来的8080改成80端口,这样就能隐藏请求中的端口号了
   server_name  www.test.com;//这里改成你想要的测试域名
   
   //主要是增加下面三行
   ssl on;
   ssl_certificate /usr/local/etc/nginx/server.crt;//你的证书地址
   ssl_certificate_key /usr/local/etc/nginx/server_nopwd.key;//私钥地址
   
   server_name_in_redirect off;
   proxy_set_header Host $host:$server_port;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   location / {
        proxy_pass http://127.0.0.1:3000/;//需要代理的地址,这里是我们json-server的默认地址
    }
}
复制代码
  • 以上配置以后,用http://www.test.com/cars访问浏览器会出现400 bad request的问题,用https://www.test.com/cars又会出现net::ERR_CONNECTION_REFUSED
  • 继续修改nginx.conf,主要是修改https server{}模块,主要修改点:
    • 将https server{}模块注释去掉
    • 添加ssl相关配置
    • 添加代理设置
# HTTPS server
#
server {
    listen       443 ssl;
    server_name  localhost;

#    ssl_certificate      cert.pem;
#    ssl_certificate_key  cert.key;
    ssl_certificate /usr/local/etc/nginx/server.crt;
    ssl_certificate_key /usr/local/etc/nginx/server_nopwd.key;

#    ssl_session_cache    shared:SSL:1m;
#    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;
#    ssl_prefer_server_ciphers  on;
   server_name_in_redirect off;
   proxy_set_header Host $host:$server_port;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://127.0.0.1:3000/;
                root   html;
          #      index  index.html index.htm;
    }
}

复制代码
  • 至此,https服务配置完成,可以在浏览器中用https://www.test.com/cars访问
其他问题
  • Chrome中老是访问的不是安全的链接
需要将我们前面生成的证书crt文件添加到系统证书里面,并设置为一直信任
复制代码

微信小程序配置

  • 登陆微信小程序管理页面,设置-->开发设置-->服务器域名-->添加自己的测试域名。需要注意的是一个月只能修改5次
  • 利用微信小程序打开项目,在配置信息中点击刷新,即可看到刚刚修改的域名
  • 在需要网络请求的地方添加log打印,以便查看返回的结果信息
wx.request({
  url: 'https://www.test.com/cars',
  method:'GET',
  header: {
    'content-type': 'application/json'     
  },
  success: function (res) {
    console.log(res.data)
  }
})
showRequestInfo()
复制代码
  • 如果一切正常的话,在调试界面的conole下会输出json-server服务器返回的objects列表,也就是我们编写的cars.json文件的内容
其他问题
  • 网络请求服务器API的时候报此服务器的证书无效.
在项目页面的基础信息中,勾选下面的“开发环境不校验请求域名以及TLS版本
复制代码

以上就是Mac下搭建小程序服务器的过程


今天你进步了嘛?欢迎关注我的微信公众号,和我一起每天进步一点点!

你可能感兴趣的:(手把手教你搭建Mac环境微信小程序的本地测试服务器)