1 前期準備
1.1 問題的提出
- Linux環境(Ubuntu)
- 方便快捷地搭建小程序的測試服務器
-
小程序對於網絡請求的URL的特殊要求
- 不能出現端口號
- 不能用localhost
- 必須用https
1.2 主要步驟
- 用json-server搭建簡單的服務器,搭建出來的服務器地址爲localhonst:3000
- 安裝nginx進行反向代理,以便隱藏端口號和替換localhost
- 搭建https服務
- 微信小程序設置
1.3 用到的工具
- json-server
- nginx
- openssl
- 微信小程序官方開發工具
2 json-server的使用
- 安裝
npm install -g json-server
如果沒有安裝npm,請參考:linux環境下安裝npm、node
安裝npm全局包提示沒有寫入權限:
npm WARN checkPermissions Missing write access to /opt/node-v12.14.1-linux-x64/lib/node_modules
解決方法:
修改npm包所安裝目錄的權限:sudo chown -R $USER /opt 然後輸入密碼就可以了
- 選一個文件目錄新建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進行反向代理
3 用nginx進行反向代理
- 安裝nginx
sudo apt-get install nginx
使用源碼安裝Nginx:https://blog.csdn.net/qq_40183281/article/details/90085220
通過以上方式安裝nginx
- 瀏覽器中鍵入http://localhost:8080,訪問到nginx的歡迎界面,即表示nginx安裝成功
- 配置nginx的反向代理:編輯nginx.conf文件
sudo vim /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文件目錄 /etc/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
4 https服務安裝
- 利用openssl生成證書
cd /etc/nginx/conf
設置server.key:sudo openssl genrsa -des3 -out server.key 1024
參數設置:sudo openssl req -new -key server.key -out server.csr
寫RSA祕鑰:sudo openssl rsa -in server.key -out server_nopwd.key
獲取私鑰:sudo 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 /etc/nginx/conf/server.crt;//你的證書地址
ssl_certificate_key /etc/nginx/conf/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 微信小程序配置
- 登陸微信小程序管理頁面,設置-->開發設置-->服務器域名-->添加自己的測試域名。需要注意的是一個月只能修改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版本