Mac下搭建小程序伺服器的過程
問題的提出
- 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.jsonDoneResourceshttp://localhost:3000/carsHomehttp://localhost:3000
- 瀏覽器中輸入地址http://localhost:3000/cars就能看到輸出cars.json的內容
- 至此，就搭建了一個簡單的本地測試伺服器，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/carslocalhostwww.test.comwww.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的默認地址 }}
- 以上配置以後，用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次
- 利用微信小程序打開項目，在配置信息中點擊刷新，即可看到剛剛修改的域名
- 在需要網路請求的地方添加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下搭建小程序伺服器的過程。
本文作者：xxq2dream
原文鏈接： Mac下搭建小程序伺服器的過程-新手教程-小程序社區-微信小程序-微信小程序開發社區-小程序開發論壇-微信小程序聯盟
推薦閱讀：