利用 Nginx 做反向代理解决微信小程序业务域名限制问题

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

最近做了一个世界杯比赛日程的小程序,只有查看日程的功能,所以很快就发布上线了。后边想加入用户预测功能,但是时间紧、前后端实现又比较复杂,突然灵机一动想到用webview嵌入FIFA官网的比赛预测页面。

微信小程序支持通过webview来内嵌网页,但是要求业务域名预先审核配置,就是说只能是你自己拥有的并且已经备案的域名。明显,我并不拥有FIFA官网,因而无法配置为业务域名。不过我可以利用Nginx做反向代理(非透明代理,与之相反的是透明代理),利用自己的域名(https://api.wecode.net.cn ),把网页请求转发到FIFA官网(https://www.fifaofficial.cn ),这样我就不用开发就直接展示FIFA官方内容。

反向代理网页内容

一个网页的展示,首先得有HTML内容。把 https://api.wecode.net.cn 页面反向代理到 https://www.fifaofficial.cn ,这时请求就会得到目标网页的HTML内容返回。

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头,可以避免一些请求数据的跨域问题。

反向代理静态资源

在网页里,通常都会包含很多静态资源的引用,如css、js、font等,同时都是使用cdn加速,所以会是使用不同的域名。

<link href="//cdn.fifaofficial.cn/assets/css/76151aa27c3d7972aa5c.styles.css" rel="stylesheet">

第一,把html中的静态资源引用域名替换为自己的域名下,所以刚才的配置中要加入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;
}

第二,反向代理静态资源文件。如

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等文件内也会引用别的资源,所以也是需要加入sub_filter替换声明的。

配置SSL证书

微信小程序要求服务器使用SSL协议,所以也需要配置。

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服务

最近我也在学习容器服务,就尝试把Nginx服务部署到一个Docker容器中。安装好Docker后,执行

  $ 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服务的日志。另外,-p就是映射端口。

这时就可以访问 https://api.wecode.net.cn 就得到我想要的内容了,轻松把FIFA官方内容嵌入到我的小程序里。

源代码

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

技术流

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT笔记

Linux下如何简单快速搭建FTP服务器

遥想多年前,我们还在玩虚拟主机的时候,一个小小的FTP账号我们就可以玩半天,那会使用的是flashfxp。 后来,有了VPS(那时用的还是win系列服务器系统)...

4499
来自专栏小狼的世界

Kubernetes中资源配额管理

创建Pod的时候,可以为每个容器指定资源消耗的限制。Pod的资源请求限制则是Pod中所有容器请求资源的总和。

1091
来自专栏运维

系统重启后ngix reload不生效原因分析

这是一种比较少见,困扰我很久的问题,虽然这个问题很简单,但是找到根本原因还是费了不少时间,现在把分析过程分享如下。

742
来自专栏高爽的专栏

Java Mail(一):telnet实现发送收取邮件

       最近要做一个解析邮件的东东,就顺便系统的搞一下Java Mail的API吧,以前搞过,现在都忘到十万八千里了,要说技术就得学以致用,要不全扔了。 ...

3140
来自专栏猛牛哥的博客

debian使用LVM扩展第二块硬盘

1594
来自专栏杨建荣的学习笔记

zabbix中配置dg的监控(r6笔记第62天)

在zabbix中有了orabbix的辅助,监控效率大大提高,但是因为orabbix是基于jdbc的方式,有些监控还是有一些限制。 比如dataguard的检查,...

2834
来自专栏云计算教程系列

如何在Ubuntu 16.04上安装和配置Postfix作为仅发送SMTP服务器

Postfix是一种邮件传输代理(MTA),一种用于发送和接收电子邮件的应用程序。在本教程中,我们将安装和配置Postfix,使它仅可以用于本地应用程序发送电子...

3440
来自专栏云计算教程系列

如何在Ubuntu 16.04上将BIND配置为专用网络DNS服务器

管理服务器配置和基础架构的一个重要部分包括通过设置适当的域名系统(DNS),维护一种通过名称查找网络接口和IP地址的简便方法。使用完全限定的域名(FQDN)而不...

3380
来自专栏我爱编程

conda常用命令

转载自阿达发go的博客conda常用命令:更新,创建,激活,关闭,查看,卸载,删除,清理

6322
来自专栏北京马哥教育

【Python】windows下Eclipse中安装集成webpy框架

这篇文章主要讲述的是在Windows下,在eclipse中如何通过使用webpy框架进行python的web开发。很多文章都是在自己一次次的碰壁中又决定自己写一...

1543

扫码关注云+社区