手把手教你搭建Windows環境微信小程式的本地測試伺服器

xxq2dream發表於2018-10-19
Windows微信小程式伺服器

Mac環境下

問題的提出

  • Windows環境
  • 方便快捷地搭建小程式的測試伺服器
  • 小程式對於網路請求的URL的特殊要求
    • 不能出現埠號
    • 不能用localhost
    • 必須用https

主要步驟

  • 用json-server搭建簡單地伺服器，搭建出來的伺服器地址為localhonst:3000
  • 安裝nginx進行反向代理，以便隱藏埠號和替換localhost
  • 搭建https服務
  • 微信小程式設定

用到的工具

  • json-server
  • nginx
  • openssl
  • 微信小程式官方開發工具

首先需要在windows環境下安裝node.js

Node.js下載地址

選擇對應的系統版本

選擇 Windows Installer 下載對應的系統版本就行，然後一路next。這種方式安裝好以後會把環境變數也配置好了，直接在命令列下輸入：

//出現對應的版本號資訊就表示安裝成功了
node --version
複製程式碼

安裝過程出現這個錯誤直接點選右上角的叉叉關閉就好

json-server的使用

  • 安裝
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下載地址

  • nginx安裝更簡單，從上述地址下載好以後直接解壓到自己的目錄就行了

  • 到nginx的解壓目錄，找到nginx.exe檔案，雙擊就啟動了。當然也可以用命令列，後面會有常見的命令介紹

手把手教你搭建Windows環境微信小程式的本地測試伺服器

  • 瀏覽器中鍵入http://localhost:8080,訪問到nginx的歡迎介面，即表示nginx安裝成功

  • 配置nginx的反向代理:編輯nginx.conf檔案。這個檔案就在nginx.exe所在的目錄中的conf資料夾

  • 修改nginx.conf檔案中的server{}內容。這裡要注意的是，conf檔案裡面主要有2個server{},一個是預設監聽http請求的8080埠的，另一個是https請求的。其中https server預設是註釋掉的

server {
   listen       80;//將原來的8080改成80埠，這樣就能隱藏請求中的埠號了
   server_name  www.test.com;//這裡改成你想要的測試域名
   location / {
        proxy_pass http://127.0.0.1:3000/;//需要代理的地址，這裡是我們json-server的預設地址
    }
    ...
}
複製程式碼

  • 重啟nginx服務

  • 不要忘記將你的測試域名加入到hosts檔案中啊！！！

//hosts檔案中新增測試域名
127.0.0.1 www.test.com
複製程式碼
  • 經過以上的設定，nginx代理的設定的完成了。啟動json-server後可以用一下方式訪問瀏覽器
localhost/cars
localhost
www.test.com
www.test.com/cars
複製程式碼
其他問題

nginx常用的命令(需要在nignx.exe所在目錄下，當然也可以新增到環境變數裡面去)

  • 啟動
nginx.exe
或者
start nginx
或者
雙擊nginx.exe

複製程式碼
  • 停止
nginx.exe -s stop
或者
nginx.exe -s quit
複製程式碼
  • 重啟
nginx.exe -s reload
複製程式碼

windows修改hosts

  • hosts檔案目錄在：C:\Windows\system32\drivers\etc
  • 修改hosts檔案需要先拷貝一份hosts檔案到非系統盤的目錄，比如桌面，然後再修改桌面的hosts檔案，最後再把修改的hosts檔案拷貝到系統hosts檔案的目錄，彈出警告後選擇確認替換

https服務安裝

利用openssl生成證書

  • openssl工具下載地址：http://slproweb.com/products/Win32OpenSSL.html

  • 下載以後一直next安裝，命令列輸入：openssl不報錯的就安裝成功了，安裝過程中已經將openssl加入到環境變數中了

生成ssl金鑰
  • 設定server.key。過程中需要輸入key的密碼，這個密碼要記住，後面生成私鑰會用到
openssl genrsa -des3 -out server.key 1024
複製程式碼
  • 引數設定。這個過程中會讓我們輸入一些資訊，比如國家、地區、組織等，直接輸入“.”不設定，但是不要一個都不設定，否則會無法生成server.csr檔案
openssl req -new -key server.key -out server.csr
複製程式碼
  • 寫RSA祕鑰，密碼就是server.key的密碼
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 D:\MyWorkSpace\json-server\server.crt;//你的證書地址
   ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;//私鑰地址
   
   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 D:\MyWorkSpace\json-server\server.crt;//你的證書地址
    ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;//私鑰地址

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

複製程式碼
  • 至此，https服務配置完成，可以在瀏覽器中用https://www.test.com/cars訪問
其他問題
  • Chrome中老是訪問的不是安全的連結
需要將我們前面生成的證書crt檔案新增到系統證書裡面，並設定為一直信任
複製程式碼
  • 啟動nginx報錯
nginx: [emerg] bind() to 0.0.0.0:443 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
複製程式碼

後面查出原因是443埠被VMware佔用了，直接解除安裝了VMware就可以了。

微信小程式配置

  • 登陸微信小程式管理頁面，設定-->開發設定-->伺服器域名-->新增自己的測試域名。需要注意的是一個月只能修改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版本
複製程式碼

以上就是windows下搭建小程式伺服器的過程

今天你進步了嘛？歡迎關注我的微信公眾號，和我一起每天進步一點點！

AntDream

相關文章