个人博客开发系列文章：

博客前端展示总结：https://www.jianshu.com/p/1348bcd1e716
后台管理系统总结：https://www.jianshu.com/p/53c75476be44
服务端总结：https://www.jianshu.com/p/c25b5432d6f5
Travis CI持续集成：https://www.jianshu.com/p/4e7a06e18bd5
使用Nginx配置HTTPS和反向代理：https://www.jianshu.com/p/c779e54c9f85

使用Nginx配置HTTPS和反向代理

想起大学时自己建了个简单的网站，当时使用的http，然后打开的时候经常都被http劫持，那是真的无可奈何，所以这次必须要整个https。https是啥？想必大家都知道，不懂的直接超文本安全传输协议

HTTPS效果图

配置HTTPS

证书申请

电脑操作系统是macOS 10.14.5
服务器：腾讯云CentOS 7.2
Nginx版本：1.16.0

在这里，我使用的是腾讯云的免费证书：

进入控制台 -> 左上角云产品 -> 域名和网站 -> SSL证书 -> 申请免费证书
申请之后，大概过不了几分钟，就通过审核了，然后下载之
下载之后有几个文件：

证书配置

首先登录你的服务器，我们需要创建一个文件夹来放我们的证书

mkdir /usr/local/nginx/cert

然后使用scp命令把我们的证书传到服务器上

# 进入到放证书的文件夹
cd shirmy.me

# 把 Nginx 下的文件远程拷贝到服务器上
scp -r ./Nginx/* 你的服务器用户名@你的服务器IP:/usr/local/nginx/cert

接下来就可以修改Nginx的配置了，其实腾讯云提供了很完善的证书安装指引，里面有除了Nginx之外的其它服务器配置方式：

腾讯云SSL证书安装指引

如果直接使用文档中的方式，Nginx会报警告，需要做一些小的修改：

server {
    listen 443; #SSL 访问端口号为 443
    server_name www.shirmy.com; #填写绑定证书的域名
    # ssl on; #启用 SSL 功能 这行会报警告 去掉即可
    ssl_certificate ../cert/1_www.shirmy.me_bundle.crt; #证书文件名称
    ssl_certificate_key ../cert/2_www.shirmy.me.key; #私钥文件名称
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #请按照这个协议配置
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; #请按照这个套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_prefer_server_ciphers on;

    location / {
        root /var/www/www.domain.com; #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
        index  index.html index.htm;
        # 这是为解决 Vue Router 哈希模式刷新后404的问题 Nginx 找不到文件后会在内部发起一个子请求到根目录下的 index.html
        try_files $uri $uri/ /index.html;
    }
}

HTTP跳转到HTTPS

腾讯云文档提供了以下的配置方式，但是我用的是另外一种配置方式：

# 文档提供的配置方式
}
  server {
    listen 80;
    server_name www.domain.com; #填写绑定证书的域名
    rewrite ^(.*)$ https://$host$1 permanent; #把http的域名请求转成https
}

另一种方式

这种方式其实是利用了标签中的的http-equiv属性，与之对应的值是content，我们需要新建一个index.html文件，复制并修改以下代码：

这样当我们访问http://www.shirmy.me时就会重新刷新到https://www.shirmy.me，然后再修改nginx配置如下：

server {
    listen 80;  # 监听默认端口
    server_name www.shirmy.me; # 域名
    location / {
        root www/http.shirmy.me/;    # 刚刚的 index.html 所在目录
        index index.html index.htm;
    }
}

最后，重启我们的Nginx服务器：

cd /usr/local/nginx/sbin

# 平滑重启
./nginx -s reload

# 非平滑重启
./nginx -s stop && ./nginx

大功告成，配置了HTTPS的网站，要保证网站的链接都是安全的，包括API请求都必须使用HTTPS

Nginx反向代理

我们的网页发起请求时，带个端口岂不是很难看，比如https//api.shirmy.me:3000/v1/articles，如何去掉端口呢？
又比如说我们要访问集群服务器时，会先访问一个中间服务器，然后这个中间服务器再把你的请求分发到压力小的服务器，这也需要通过反向代理来实现。

# 负载均衡就是靠下面这个来实现
# blogapi 替换成你喜欢的名字
upstream blogapi {
    server http://127.0.0.1:3000;
    # server 你也可以选择配置多个IP
}
server {
    # 同上面一样的 HTTPS 配置
    listen 443 ssl;
    server_name api.shirmy.me;
    ssl_certificate ../cert/1_api.shirmy.me_bundle.crt;
    ssl_certificate_key ../cert/2_api.shirmy.me.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;

    # 反向代理配置
    location / {
        # $host 代表转发服务器
        proxy_set_header Host $host;
        proxy_redirect off;
        # 记录真实IP
        proxy_set_header X-Real-IP $remote_addr;
        # 存储请求链路上各代理IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 连接超时时间
        proxy_connect_timeout 60;
        # nginx接收upstream server数据超时时间
        proxy_read_timeout 600;
        # nginx发送数据至upstream server超时时间
        proxy_send_timeout 600;
        # 反向代理到上面定义好的 upstream blogapi 下的服务器上
        proxy_pass http://blogapi;
    }
}

如此一来，就实现了反向代理和负载均衡，此外，我们应该让用户第一次访问该服务器后，以后再访问也是访问该服务器，避免多次建立http连接，那么我们可以这样修改：

upstream blogapi {
    # 避免每次被请求到多台服务器上 满足用户保持访问同一台服务器 又能实现负载均衡
    ip_hash;
    server http://127.0.0.1:3000;
    # server 你也可以选择配置多个服务器IP
}

最后记得重启/usr/local/nginx/sbin/nginx -s reload

多个域名配置

除了主页shirmy.me之外，我们通常还要有一个管理后台：admin.shirmy.me，因为用的是免费证书，所以我们也只好为子域名申请一个SSL证书，并且以同样的方式配置。

我们又总不能用端口shirmy.me:5000这样子访问吧，其实只要这样做：

server {
    listen 80;
    # admin.shirmy.me
    server_name admin.shirmy.me;
    location / {
        # 直接看上面 HTTP 跳转到 HTTPS 的配置
        root www/http.admin.shirmy.me/;
        index index.html index.htm;
    }
}