問題的提出

• 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
DoneResources
http://localhost:3000/carsHome
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

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的默認地址}
}

• 以上配置以后，用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下搭建小程序服務器的過程。

---

歡迎關注我的微信公眾號，和我一起學習一起成長！