如何用只支持http的七牛雲CDN免費實現全站https

本篇博客主要講解了用七牛雲CDN實現全站https

事先聲明：此方法適用於擁有自己的服務器，能夠安裝nginx，因爲本篇博客nginx起到關鍵作用

https的意義

HTTPS主要通過在SSL上傳輸數據來區分HTTP，確保傳輸的數據在傳輸過程中被加密，只有相應站點服務器或用戶瀏覽器接收時才能被解密，HTTPS通過這種方式避免了第三方攔截。同時，HTTPS提供可信的服務器認證，這是一套黑客不能隨意篡改的認證信息，使相關用戶確定他們正與正確的服務器通信。

全站https的初心

一開始博主的博客是搭載在github上的，可是因爲github是國外的IP，加載及其的慢，即使用了CDN也無濟於事。正好博主在去年學習Linux的時候趁着大四學生最後一年在騰訊雲買了一臺學生服務器，於是將博客搬到服務器上了。而本人久聞七牛雲大名，所以CDN使用得是七牛雲的免費10G。因爲我的博客也沒什麼流量，一個月頂破天我自己訪問能不能過百兆是個問題，所以肯定夠用的(小聲比比：希望我的博客以後訪客能上來)。搬到服務器上的時候並沒有https，但是想着現在證書都是免費頒發，而且https也是安全的象徵，現在的網站基本都使用了https。再說，google瀏覽器會給https一把小鎖，看着別人的https上面有把小鎖，這感覺都爽歪歪鴨.再看看自己，網頁啥都沒。得，爲了這把鎖，我今天也得給他來個全站https了。

https網頁上的標誌

實操開始

申請ssl證書

既然要全站https那必不可少的是申請證書了，因爲博主域名是在騰訊雲買的，所以是直接在騰訊雲管理平臺申請的ssl證書，選擇自動驗證幾分鐘就把證書頒發下來了，我們直接點擊下載將證書下載過來。解壓之後會有四個文件夾，因爲我們用的nginx，所以只需要nginx文件夾下面的bundle.crt和.key兩個文件，至於外層的csr我們不需要用到。

部署nginx並且開啓https監聽

因爲本人最近在學習docker，並且docker的容器管理實在是方便，所以是用的docker拉取nginx鏡像以容器的方式啓動nginx。docker入門學習的話可以去菜鳥聯盟看一看，我覺得講解的還是很詳細的。以下是我docker啓動nginx的shell命令。

複製

$ docker run -d -p 80:80 -p 443:443 --name myNginx -v /usr/local/nginx/www:/usr/share/nginx/html -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /usr/local//nginx/logs:/var/log/nginx nginx

接下來就是配置nginx的conf文件了，首先我們可以開啓網頁gzip壓縮，這樣能把我們網頁壓縮將近一半，提高訪問速度。然後就是nginx配置監聽443端口進行證書加密的操作了。以下是我的部分配置文件。

複製

#設定http服務器
http {
    #文件擴展名與文件類型映射表
    include       mime.types;
    #默認文件類型
    default_type  application/octet-stream;
    #開啓高效文件傳輸模式，sendfile指令指定nginx是否調用sendfile函數來輸出文件，對於普通應用設爲 on，如果用來進行下載等應用磁盤IO重負載應用，可設置爲off，以平衡磁盤與網絡I/O處理速度，降低系統的負載。注意：如
果圖片顯示不正常把這個改 成off。
    sendfile        on;
    #防止網絡阻塞
    #tcp_nopush     on;
    #長連接超時時間，單位是秒
    keepalive_timeout  65;
    #開啓gzip壓縮輸出
    gzip  on;
    #最小壓縮文件大小
    gzip_min_length  1K;
    ##壓縮緩衝區
    gzip_buffers     4 8k;
    ##壓縮類型
    gzip_types       text/* text/css text/plain application/javascript application/x-javascript application/xml application/json image/jpeg image/png image/gif application/octet-stream;
    ##壓縮級別 1-9 1最快 9最慢
    gzip_comp_level  9;
    ##壓縮通過代理的所有文件
    gzip_proxied     any;
    ##vary header支持
    gzip_vary        on;
    ##壓縮版本（默認1.1，前端爲squid2.5使用1.0）
    gzip_http_version 1.1;
    
    # 監聽https請求並配置證書
    server {
        listen 443 ssl;
        server_name ovvow.com; #填寫綁定證書的域名
        ssl_certificate /var/log/nginx/ssl/1_xxx_bundle.crt; #證書文件名稱
        ssl_certificate_key /var/log/nginx/ssl/2_xxx.club.key; #私鑰文件名稱
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #請按照這個協議配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; #請按照這個套件配置
        ssl_prefer_server_ciphers on;
        root         /usr/share/nginx/html;
        index        index.html;
        error_page  404 /404.html;
        location ~ .*\.(gif|css|js|jpg|jpeg|png|ico|webp)$ {
            valid_referers none blocked ovvow.com blog.gpdstudy.clu    b;
            if ($invalid_referer) {
                return 404 /404.html;
            }
        }
    }

    # 將http請求重定向到https
    server {
        listen 80;
        server_name ovvow.com;
        return 301 https://$server_name$request_uri;
    }
    
    # 配置CDN支持https訪問
    server {
        listen        443 ssl;
        # 我們博客用來配置CDN的網址
        server_name  qiniuyun.ovvow.com;
        ssl_certificate /var/log/nginx/ssl/1_qiniuyun.ovvow.com_bundle.crt;
        ssl_certificate_key /var/log/nginx/ssl/2_qiniuyun.ovvow.com.key;
        location / {
            # 七牛雲CDN設置的回源網址
            proxy_pass http://回源設置的域名.ovvow.com;
        }
    }

}

以上部分都有註釋，其中第一部分是配置網頁壓縮，以提高我們博客的訪問速度；第二個則是監聽我們的https請求，配置證書加密後跳轉到我們博客的主頁；第三個是將我們的http請求全部重定向到我們的https上。第四個則是重頭戲，這個是我們使用https請求CDN的配置。

配置原理

前面的配置不多說相信大家都知道，我就重點說一說第四個吧。我們配置七牛雲的CDN時需要綁定一個回源HOST，這個回源HOST需要我們在域名處配置CNAME轉到七牛雲給我們提供的CDN網址。但是七牛雲只支持http請求，如果我們要使用https則需要另行付費。但是我們想一想https的原理就知道，其實這就是經過一層ssl加密數據並進行傳輸。我們既然無法在七牛雲設置https傳輸數據，那我們自己在請求中間加一層不行嗎？於是，我有了這個想法之後參考了第二部分博客實現https的原理。另外申請了一個子域名的ssl，然後通過nginx加密請求之後將反向代理請求到我的CDN域名上獲取http資源。結果是令人興奮的，我的實驗成功了。最後說一句，我們這個配置的原理就是利用自己申請的ssl證書來加密我們的請求，再通過nginx反向代理獲取我們CDN上的靜態資源。這樣，我們就能保證我們的資源是經過https加密的。

說說薅羊毛

通過這個示例我發現了一個薅羊毛的方法，我聽說國內還有其他的CDN服務商。也就是說，我們可以兩邊同步我們的資源文件夾，當我們其中一個CDN流量要用完的時候，我們在nginx裏面修改配置，將反向代理的網址修改爲另一個CDN服務商的回源網址。這樣我們無需改變我們博客的任何位置，就能實現將CDN換源，是不是想想就激動呢？不過我就沒這個想法了，七牛雲10G我相信我能用一年，更不要說每個月都給10G，我就懶得薅這個羊毛了，缺流量的站長可以薅一下。

說說踩過的坑

（1）因爲以前一直是監聽的80端口，通過不同的域名來跳轉我的項目。昨天啓動nginx的時候忘了映射443端口，導致後續http重定向到https的時候一直無法訪問，查看nginx配置半天也沒發現端倪。最後查看防火牆端口的時候發現我的443端口沒有被監聽，遂恍然想起自己只映射了80端口並未映射443端口。希望大家以我爲戒，不要犯這種低級問題，要記住想要監聽端口就得把服務器的端口映射給容器。

（2）docker容器內配置文件的地址只能訪問到容器內部的地址，並不能訪問到服務器地址，開始把祕鑰放在了服務器的nginx/conf文件夾下面，結果發現無法訪問。後來索性在logs下新建了ssl文件夾存放我的證書，因爲我的logs文件夾映射了容器/var/log/nginx/文件夾，所以通過此路徑能找到我的ssl證書。

（3）在配置的時候，我並不知道一個域名對應一個證書，當時以爲配置了主站所有的子域名都可以使用這個證書，所以在設置”qiniuyun.ovvow.com”域名加密反向代理到七牛雲回源網址的時候雖然能夠代理成功，但是卻被Google攔截了，導致所有的CDN請求直接被阻擋加載不進來。如下圖。

錯誤設置證書

博客無法加載靜態資源 最後仔細一看發現頒發的證書與實際訪問的網址不一樣，百度了一下發現每一個子域名都得設置一個證書。於是又申請了兩個證書在nginx配置完成之後成功加載資源。 代理成功返回的圖片鏈接 實際被訪問的鏈接

雖然在配置的過程是痛苦的，但是最後實現了自己的想法，還是蠻開心的。