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

      1. 新聞中心 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路徑在/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后可以用一下方式訪問瀏覽器

         
        
        
        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. }

        以上配置以后,用http://www.test.com/cars訪問瀏覽器會出現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中老是訪問的不是安全的鏈接  需要將我們前面生成的證書crt文件添加到系統證書里面,并設置為一直信任  微信小程序配置

        登陸微信小程序管理頁面,設置-->開發設置-->服務器域名-->添加自己的測試域名。需要注意的是一個月只能修改5次  利用微信小程序打開項目,在配置信息中點擊刷新,即可看到剛剛修改的域名  在需要網絡請求的地方添加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>