• <span id="cz2q2"><del id="cz2q2"></del></span>
      <li id="cz2q2"></li><address id="cz2q2"></address>

      1. 新闻?#34892;?Case获取更多行业信息

        当前位置:主页 > 新闻资讯 > 行业新闻 >

        Mac下搭建小程序服务器的过程

        日期:2017-10-08 / 人气:

        Mac环境

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

        主要步骤

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

        用到的工具

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

        安装

         
        
        
        1. sudo npm install -g json-server

        选一个文件目录新建json文件,比如cars.json

         
        
        
        1. {
        2. "cars": [
        3. {
        4. "id": 1,
        5. "desc": "哈弗H6",
        6. "completed": false
        7. },
        8. {
        9. "id": 2,
        10. "desc": "吉利博越",
        11. "completed": false
        12. },
        13. {
        14. "id": 3,
        15. "desc": "宝骏560",
        16. "completed": false
        17. }
        18. ]
        19. }

        启动json-server服务:在新建的json文件目录,运行命令:json-server + 文件名

         
        
        
        1. json-server cars.json

        输出:

         
        
        
        1. Loading cars.json
        2. Done
        3.  
        4. Resources
        5. http://localhost:3000/cars
        6.  
        7. Home
        8. 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

         
        
        
        1. brew install nginx

        通过以上方式安装nginx,我的nginx路?#23545;?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默认是注释掉的

         
        
        
        1. server {
        2. listen 80;//将原来的8080改成80端口,这样就能隐藏请求中的端口号了
        3. server_name www.test.com;//这里改成你想要的测试域名
        4. server_name_in_redirect off;
        5. proxy_set_header Host $host:$server_port;
        6. proxy_set_header X-Real-IP $remote_addr;
        7. proxy_set_header REMOTE-HOST $remote_addr;
        8. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        9. location / {
        10. proxy_pass http://127.0.0.1:3000/;//需要代理的地址,这里是我们json-server的默认地址
        11. }
        12. }

        重启nginx服务

         
        
        
        1. sudo nginx -s reload //不带sudo可能会重启nginx失败

        不要忘记将你的测试域名加入到hosts文件中啊!!!

         
        
        
        1. //hosts文件中添加测试域名
        2. 127.0.0.1 www.test.com

        经过以上的设置,nginx代理的设置的完成了。启动json-server后可以用一下方式访?#36755;?#35272;器

         
        
        
        1. localhost/cars
        2. localhost
        3. www.test.com
        4. www.test.com/cars

        其他问题

        nginx常用的命令

         
        
        
        1. //启动
        2. nginx
        3.  
        4. //重启
        5. sudo nginx -s reload
        6.  
        7. //关闭
        8. nginx -s stop

        Mac修改hosts

         
        
        
        1. Finder的“前往”->“前往文件夹” 输入 /private/etc 按回车 就可以看到里面的hosts文件了。直接右键选择“文本编辑”打开,修改,保存即可。

        配置nginx碰到FT_Select_size:undefined问题

         
        
        
        1. 可以尝试安装fontconfig库解决

        碰到其他的文件不存在之类的问题,请仔细检查命令是否输入正确,配置文件是否修改正确  https服务安装

        利用openssl生成证书

         
        
        
        1. cd usr/local/etc/nginx/conf
        2. 设置server.key:openssl genrsa -des3 -out server.key 1024
        3. 参数设置:openssl req -new -key server.key -out server.csr
        4. RSA秘钥:openssl rsa -in server.key -out server_nopwd.key
        5. 获取私钥:openssl x509 -req -days 365 -in server.csr -signkey server_nopwd.key -out server.crt

        修改nginx配置文件nginx.conf

         
        
        
        1. server {
        2. listen 80;//将原来的8080改成80端口,这样就能隐藏请求中的端口号了
        3. server_name www.test.com;//这里改成你想要的测试域名
        4.  
        5. //主要是增加下面三行
        6. ssl on;
        7. ssl_certificate /usr/local/etc/nginx/server.crt;//你的证书地址
        8. ssl_certificate_key /usr/local/etc/nginx/server_nopwd.key;//私钥地址
        9.  
        10. server_name_in_redirect off;
        11. proxy_set_header Host $host:$server_port;
        12. proxy_set_header X-Real-IP $remote_addr;
        13. proxy_set_header REMOTE-HOST $remote_addr;
        14. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        15. location / {
        16. proxy_pass http://127.0.0.1:3000/;//需要代理的地址,这里是我们json-server的默认地址
        17. }
        18. }

        以上配置?#38498;螅?#29992;http://www.test.com/cars访?#36755;?#35272;器会出现400 bad request的问题,用https://www.test.com/cars又会出现net::ERR_CONNECTION_REFUSED  继续修改nginx.conf,主要是修改https server{}模块,主要修改点:  将https server{}模块注释去掉  添加ssl相关配置  添加代理设置

         
        
        
        1. # HTTPS server
        2. #
        3. server {
        4. listen 443 ssl;
        5. server_name localhost;
        6.  
        7. # ssl_certificate cert.pem;
        8. # ssl_certificate_key cert.key;
        9. ssl_certificate /usr/local/etc/nginx/server.crt;
        10. ssl_certificate_key /usr/local/etc/nginx/server_nopwd.key;
        11.  
        12. # ssl_session_cache shared:SSL:1m;
        13. # ssl_session_timeout 5m;
        14.  
        15. # ssl_ciphers HIGH:!aNULL:!MD5;
        16. # ssl_prefer_server_ciphers on;
        17. server_name_in_redirect off;
        18. proxy_set_header Host $host:$server_port;
        19. proxy_set_header X-Real-IP $remote_addr;
        20. proxy_set_header REMOTE-HOST $remote_addr;
        21. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        22.  
        23. location / {
        24. proxy_pass http://127.0.0.1:3000/;
        25. root html;
        26. # index index.html index.htm;
        27. }
        28. }

        至此,https服务配置完成,可以在浏览器中用https://www.test.com/cars访问  其他问题

        Chrome中老是访问的不?#21069;?#20840;的链接  需要将我们前面生成的证书crt文件添加到系?#25345;?#20070;里面,并设置为一直信任  微信小程序配置

        登陆微信小程序管理页面,设置-->开发设置-->服务器域名-->添加自己的测试域名。需要注意的是一个月只能修改5次  利用微信小程序打开项目,在配置信息中点击刷新,即可看到刚?#25307;?#25913;的域名  在需要网络请求的地方添加log打印,以便查看返回的结果信息

         
        
        
        1. wx.request({
        2. url: 'https://www.test.com/cars',
        3. method:'GET',
        4. header: {
        5. 'content-type': 'application/json'
        6. },
        7. success: function (res) {
        8. console.log(res.data)
        9. }
        10. })
        11. showRequestInfo()

        如果一切正常的话,在调试界面的conole下会输出json-server服务器返回的objects列表,也就是我们编写的cars.json文件的内容  其他问题

        网络请求服务器API的时候报此服务器的证书无效.  在项目页面的基础信息中,勾选下面的“开发环境不校验请求域名以及TLS版本  以上就是Mac下搭建小程序服务器的过程。深圳市灵点网络科技有限公司是一家专业互联网品牌营销顾问机构。专业致力于最前沿的互联网技术开发和互联网营销策划服务内容涉及企业互联网咨询、深圳网站建设深圳网站制作深圳网站设计网页制作、企业形象设计、包装画册设计、Flash多媒体设计与制作。


        编辑:深圳网站建设公司


        ?
        澳博线上官网

      2. <span id="cz2q2"><del id="cz2q2"></del></span>
          <li id="cz2q2"></li><address id="cz2q2"></address>

          1. <span id="cz2q2"><del id="cz2q2"></del></span>
              <li id="cz2q2"></li><address id="cz2q2"></address>