[查看原文] https://fyh.me/2018/07/12/nginx-docker-miniprogram/

最近做了一個世界杯比賽日程的小程序，只有查看日程的功能，所以很快就發(fā)布上線了。后邊想加入用戶預(yù)測功能，但是時間緊、前后端實現(xiàn)又比較復(fù)雜，突然靈機一動想到用webview嵌入FIFA官網(wǎng)的比賽預(yù)測頁面。

微信小程序支持通過webview來內(nèi)嵌網(wǎng)頁，但是要求業(yè)務(wù)域名預(yù)先審核配置，就是說只能是你自己擁有的并且已經(jīng)備案的域名。明顯，我并不擁有FIFA官網(wǎng)，因而無法配置為業(yè)務(wù)域名。不過我可以利用Nginx做反向代理（非透明代理，與之相反的是透明代理），利用自己的域名（https://api.wecode.net.cn ），把網(wǎng)頁請求轉(zhuǎn)發(fā)到FIFA官網(wǎng)（https://www.fifaofficial.cn ），這樣我就不用開發(fā)就直接展示FIFA官方內(nèi)容。

反向代理網(wǎng)頁內(nèi)容

一個網(wǎng)頁的展示，首先得有HTML內(nèi)容。把 https://api.wecode.net.cn 頁面反向代理到 https://www.fifaofficial.cn ，這時請求就會得到目標網(wǎng)頁的HTML內(nèi)容返回。

location ^~/ {
    proxy_set_header Accept-Encoding "";
    proxy_set_header Referer "https://www.fifaofficial.cn/";
    proxy_pass http://www.fifaofficial.cn/;

    add_header Access-Control-Allow-Origin *;
}

這個不僅能處理index頁面的請求，因為^~/路由的是所有host為api.wecode.net.cn的所有請求。所以，給請求的返回加入Access-Control-Allow-Origin頭，可以避免一些請求數(shù)據(jù)的跨域問題。

反向代理靜態(tài)資源

在網(wǎng)頁里，通常都會包含很多靜態(tài)資源的引用，如css、js、font等，同時都是使用cdn加速，所以會是使用不同的域名。

<link  rel="stylesheet">

第一，把html中的靜態(tài)資源引用域名替換為自己的域名下，所以剛才的配置中要加入sub_filter(文檔)替換聲明

location ^~/ {
    proxy_set_header Accept-Encoding "";
    proxy_set_header Referer "https://www.fifaofficial.cn/";
    proxy_pass http://www.fifaofficial.cn/;

    add_header Access-Control-Allow-Origin *;

    sub_filter 'cdn.fifaofficial.cn' 'api.wecode.net.cn';
    sub_filter_types text/css text/xml text/html text/javascript application/json application/javascript;
    sub_filter_once off;
}

第二，反向代理靜態(tài)資源文件。如

cdn.fifaofficial.cn/assets/.....css    ===> api.wecode.net.cn/styles/.....css 

Nginx配置為

location ~* \.(?:css|js|ttf|woff|svg|ico|png|jpg)$ {
    proxy_set_header Accept-Encoding "";
    proxy_set_header Referer "https://www.fifaofficial.cn/";
    proxy_pass http://cdn.fifaofficial.cn/$request_uri;

    add_header Access-Control-Allow-Origin *;

    sub_filter 'cdn.fifaofficial.cn' 'api.wecode.net.cn';
    sub_filter_types text/css text/xml text/html text/javascript application/javascript application/json;
    sub_filter_once off;
}

由于css、js等文件內(nèi)也會引用別的資源，所以也是需要加入sub_filter替換聲明的。

配置SSL證書

微信小程序要求服務(wù)器使用SSL協(xié)議，所以也需要配置。

server {
    listen 443 ssl http2;
    server_name  api.wecode.net.cn;

    #ssl                      on;
    ssl_certificate          /etc/nginx/certs/api.wecode.net.cn_bundle.crt;
    ssl_certificate_key      /etc/nginx/certs/api.wecode.net.cn.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;

    ...

}

使用Docker部署Nginx服務(wù)

最近我也在學(xué)習(xí)容器服務(wù)，就嘗試把Nginx服務(wù)部署到一個Docker容器中。安裝好Docker后，執(zhí)行

  $ docker container run \ 
    --rm \  
    --name mynginx \  
    --volume "$PWD/conf":/etc/nginx \
    --volume "$PWD/logs":/var/log/nginx/ \
    -p 127.0.0.1:443:443 \
    -d \
    nginx

上面的Nginx配置文件default.conf就是保存在/conf目錄下，所以把文件目錄/conf映射到/etc/nginx。/logs目錄映射即是存放日志文件，方便查看Nginx服務(wù)的日志。另外，-p就是映射端口。

這時就可以訪問 https://api.wecode.net.cn 就得到我想要的內(nèi)容了，輕松把FIFA官方內(nèi)容嵌入到我的小程序里。

源代碼

完整代碼放到了 https://github.com/fanyinghao/nginx-docker-miniprogram