一、需求描述
最近在開發一個微信小程序，由於微信小程序端代碼包總大小限定在三四兆，所以有很多的圖標資源就不能放在微信小程序中進行打包，
否則會超過微信的限制而無法打包。自己能夠想到的最簡單的辦法就是將所有的圖標放在nginx服務器上，然后在微信客戶端直接訪問即可。
二、需求分析
以前學習nginx的時候，還記得講師說起過，nginx服務器可以將動態資源(如請求數據的接口)和靜態資源(如圖片，js文件，html文件等等)進行
分開處理，也就是大家經常聽到的動靜分離。這種也是最簡單的方式，如果圖片展示也通過服務器進行處理，然后展示，方法是可以，可是比較
耗費資源。因此自己還是打算采用nginx來直接進行訪問。
三、解決方案
方案選定后，開始着手進行實現該功能。下面是自己的做法，以及遇到的一些問題。
配置文件所在目錄
/usr/local/nginx/conf
ngxin安裝目錄
/home/software/nginx_1_16
靜態文件所在位置
/home/software/nginx_1_16/html/images
后面還有有多級目錄
配置方式如下//
server {
listen 10003;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /applets{
proxy_pass http://webservice;
}
ssl_certificate /home/software/nginx_1_16/cert/6131892_www.yilangcode.com.pem;
ssl_certificate_key /home/software/nginx_1_16/cert/6131892_www.yilangcode.com.key;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
location ~ .*\.(png|jpg|gif) {
root /home/software/nginx_1_16/html/images/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
這種方式訪問不了，報404未找到。
<img src="http://www.yilangcode.com:10003/images/login/login_bg.png"/>
自己一步一步排查，先從簡單的開始，直接放一張圖片qrcode.png在目錄images的目錄下，
這種方式可以訪問。
<html>
<head>
<title>我的第一個 HTML 頁面</title>
</head>
<body>
<p>body 元素的內容會顯示在瀏覽器中。</p>
<p>title 元素的內容會顯示在瀏覽器的標題欄中。</p>
<img src="http://www.yilangcode.com:10003/qrcode.png"/>
</body>
</html>
然后修改訪問目錄，這種方式可以訪問。
<html>
<head>
<title>我的第一個 HTML 頁面</title>
</head>
<body>
<p>body 元素的內容會顯示在瀏覽器中。</p>
<p>title 元素的內容會顯示在瀏覽器的標題欄中。</p>
<img src="http://www.yilangcode.com:10003/login/login_bg.png"/>
</body>
</html>
再次測試
配置修改為相對路徑，不能正常訪問
location ~ .*\.(png|jpg|gif) {
root html/images/;
}
自己繼續改進，改為使用https+域名訪問，結果報錯，net::ERR_SSL_PROTOCOL_ERROR
經過反復排查后，找到問題原因，自己的域名還未備案，所以想使用https+域名進行訪問，需要自己先進行備案。
總結:
在使用nginx服務器做動靜分離處理時，有幾點注意事項。
.1.轉發后的目錄，比如/home/software/nginx_1_16/html/images這種寫法，在訪問的時候在寫images這一級目錄，從images后一級目錄開始寫，
比如像這樣訪問<img src="http://www.yilangcode.com:10003/login/login_bg.png"/>，否則訪問結果為404.
.2.靜態文件的路徑配置，如果不了解相關的路徑配置，則直接寫全路徑比較保險，否則訪問報404。