利用反向代理给Hexo配置HTTPS Hexo

本文的主要内容

讲解如何在使用Hexo的情况下配置HTTPS,同时使用自己的顶级域名。

这篇文章是在我没有真正弄清Hexo原理的情况下写的。我当时以为Hexo想要被外网访问只能使用Hexo自带的服务器,而自带的服务器又无法使用HTTPS,故想到使用反向代理的方式增加HTTPS功能。

上述目的的最优解是:Hexo生成静态页面后直接利用Apache访问,即Hexo生成静态页面,Apache/Nginx接收浏览器请求并把静态页面“返回”给浏览器。

你要是问我那为啥还要这么麻烦嘞?谁让我昨天晚上没有好好看Hexo的文档。这边文章既然已经写完了,那就发出去好了。

所以,这就是一篇普通的不能再普通的如何配置HTTPS反向代理的教程。

背景

今天闲来无事,打算重新把关张一年多的博客再开起来,之前用的是WordPress,功能虽然多但是维护起来太费事而且之前在Window Server上运行PHP遇到的问题太多。去年Hexo就比较火,今天正好趁此机会换一个口味“嘿嘿~”。前段时间为了增加逼格给挂在晚上的简历上了HTTPS,所以这次Hexo我打算也上HTTPS,既然要重新开博客当然要有点新东西。

原理

Hexo和GitHub Pages

优点

GitHub Pages 本是用于介绍托管在 GitHub 的项目,但是因为有300M的免费空间而且有GitHub强大的服务器作支撑,所以很适合搭建静态博客。
Hexo则是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
两者完美结合,配合GitHub Pages的自定义域名就可以利用GitHub的免费空间搭建自己的静态博客。

缺点

GitHub Pages虽然支持自定义域名,但是因为HTTPS协议的限制,如果请求中的 Host值 和服务器证书中的 *DNS名称(nsubjectAltName)*不符就无法建立HTTPS连接,所以自定义域名和HTTPS不可兼得。
Hexo是基于Node.js的静态博客框架,使用Node.js实现的Web服务器,暂时还不支持HTTPS。

使用Cloudflare

在Google上搜索关键词“hexo https configuration”,中文和英文的搜索结果大部分都是利用借用Cloudflare实现,看了别人的教程之后我显示思考了一下实现原理(相关教程见底部)。

  1. 这些博客使用的是自己的域名而且指定的都是自己Github的repo。
  2. 需要提交GitHub Pages的repo地址和自己的域名

根据这两点,我首先想到的是隐性转发。各大DNS服务商提供的隐性转发服务是利用index.html中的<framset>,可以实现访问a.com而网页显示b.com的内容且地址连显示a.com。查看上面几个博客的源代码发现并没有使用<framset>

通过Cloudflare的产品页面得知,大多数给Hexo加HTTPS使用的是Cloudflare的“Flexible SSL”。

Flexible SSL
Flexible SSL encrypts traffic from Cloudflare to end users of your website, but not from Cloudflare to your origin server. This is the easiest way to enable HTTPS because it doesn’t require installing an SSL certificate on your origin. While not as secure as the other options, Flexible SSL does protect your visitors from a large class of threats including public WiFi snooping and ad injection over HTTP.

原理就是Cloudflare作为反向代理服务器,用户可以透明访问Origin Server。

在dns设置正确的情况下,可以去website settings检查SSL证书部署进度,一般不到一小时就可以在你的网站启用https了。
-—它是HTTPS协议,我们怎能不支持它?

通过上图可以得知,Cloudflare通过申请一个具有二十个左右不同的DNS名称的证书,使多个网站共用一个证书。这也说明了为什么配置时间要一个小时左右,因为要凑齐二十位“乘客”才可以“发车”呀~笑cry。

另外根据网站给出的值增加一条TXT记录
-—它是HTTPS协议,我们怎能不支持它?

在此过程中要求给域名添加一条TXT记录应该是处于验证域名所有权,各CA要求验证域名所有权的方式各不相同,传统 CA 的验证方式一般是往 admin@yoursite.com 发验证邮件,而 Let’s Encrypt 是在你的服务器上生成一个随机验证文件,再通过创建 CSR 时指定的域名访问,如果可以访问则表明你对这个域名有控制权。这里选择添加TXT记录应该是考虑“One-Click”吧。

使用反向代理

上述方法虽然方便,但是却从两个方面带来了安全隐患。

  1. 二十个人共用一张证书。
  2. 由于CLoudflare和Origin Server(自己的Hexo服务器)之前依然是HTTP协议,所以并不能算是完整的HTTPS链。

我们可以借鉴这个方法的思路弥补它的不足,如果反向代理服务器和被代理服务器在同一台机器上,反代服务器通过127.0.0.1访问被代理服务器就可以避免明文的HTTP协议暴露,而且实现了Hexo使用HTTPS可谓一举两得。

因为之前服务器就部署着Apache,所以反代服务器就直接拿Apache了;证书的话我推荐使用Let’s Encrypt生成自己的证书,原因及教程见下文。

安装Hexo

安装Hexo不必多说,直接参见Hexo文档就可以,英文不好的同学也可以看中文版

配置HTTPS

嘿嘿,配置HTTPS其实也没什么好说的,我当初是按照QuQu大神的博文配置的,虽然它使用的Nginx,但是配置流程没有变化,如果以后有时间我会替换掉这部分内容自己写一下适用于Apache的配置。

配置反向代理

终于到最后了,进行这一步的先决条件是:

  1. Debian 8.6 x32 + Apache 2.4 (其他的版本均未测试,不过大版本一致的情况下应该没什么出入)
  2. 网站已经可以正常使用HTTPS

安装Module

AApache httpd 通过模块化的设计来适应各种环境。这种设计允许网站管理员通过在编译时或运行时,选择哪些模块将会加载在服务器中,来选择服务器特性。
—-多处理模块(MPM)

因为我的Apache是直接通过apt-get安装的所以module不需要编译,直接使用a2enmod就可以了。

建议先停掉Apache服务,之前本人的服务器明明各项步骤都没做错,但是总是出现500错误,后来停掉服务器又操作一遍就没有问题了,真是玄学。

1
2
3
service apache2 stop
a2enmod proxy
a2enmod proxy_http

以上两个Module的详细介绍均可以在Apache官方文档里找到

填写SSL反向代理配置文件

File:&emsp;/etc/apache2/sites-available/default-ssl.conf

1
2
3
4
5
6
7
8
9
10
11
12
<VirtualHost *:443>
SSLEngine on
SSLCertificateFile /etc/apache2/ssl/file.pem
SSLCertificateKeyFile /etc/apache2/ssl/file.key
# Usage:
# ProxyPass / http://[IP Addr.]:[port]/
# ProxyPassReverse / http://[IP Addr.]:[port]/
ProxyPass / http://0.0.0.0:8080/
ProxyPassReverse / http://0.0.0.0:8080/
ProxyPreserveHost on
SSLProxyEngine on
</VirtualHost>

ProxyPreserveHost、ProxyPass、ProxyPassReverse三个指令解决了从外网访问内网web服务器的问题。三个指令缺一不可,ProxyPreserveHost确保客户端可以正常访问web页面;ProxyPass确保反向代理;ProxyPassReverse确保原始web服务器使用了重定向时,客户端也可以访问重定向之后的链接。关于三条命令的详细用途可以阅读:Apache反向代理

SSLProxy*系列指令可以使用SSL/TLS连接远程服务器,如果被代理服务器使用了HTTPS就需要这条指令。

启动Apache和Hexo。

1
2
3
4
5
service apache2 start
//必须转到hexo的工作目录下
cd ~/hexoFile
hexo generate
hexo server -p 8080 -i 127.0.0.1 -s

拓展阅读及参考

Apache Module mod_proxy 官方文档第三方翻译
图解正向代理、反向代理、透明代理
How To Use Apache HTTP Server As Reverse-Proxy Using mod_proxy Extension
为Github的Hexo博客启用SSL/TLS
给github pages上ssl(hexo可用)
它是HTTPS协议,我们怎能不支持它?
如何搭建一个独立博客——简明Github Pages与Hexo教程
Hexo部署到VPS并启用HTTPS

利用反向代理给Hexo配置HTTPS Hexo

https://blog.zscself.com/posts/74b41711/

作者

F!redent

发布于

2017-01-08

更新于

2024-01-30

许可协议

CC BY-NC-SA 4.0

评论