1. 程式人生 > >怎麼搭建微信小程式的本地測試伺服器

怎麼搭建微信小程式的本地測試伺服器

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
  • 至此,就搭建了一個簡單的本地測試伺服器,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的預設地址
    }
}
  • 繼續修改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;
    }
}
其他問題
  • 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下搭建小程式伺服器的過程


歡迎關注我的公眾號,和我一起每天進步一點點!
這裡寫圖片描述