Nginx+Varnish+Angular universal实现服务端页面渲染缓存

共计 3042 个字符，预计需要花费 8 分钟才能阅读完成。

项目使用 angular universal 实现服务端渲染，为了减轻服务器的压力，需要将用户频繁访问的页面进行缓存，这样就不必每次都去渲染相同的页面（例如首页），angular universal 在 features 中有提到考虑加入缓存，但就目前来说，varnish 是个不错的选择，但是 varnish 不支持 https，所以还需要用 nginx 进行端口的转发

总的思路
1.nginx 监听 80 端口将 http 重定向到 https
2.nginx 监听 443 端口，并将 443 端口的请求转发到 8080 端口
3.varnish 监听 8080 端口的请求，如果与缓存中的页面匹配，则返回页面，如果没有匹配的页面，则请求 pm2 启动的服务

总的流程
1. 安装与配置 nginx
2. 安装 SSL 证书，nginx 配置 SSL
3. 安装与启动 PM2
4. 安装与配置 varnish

Nginx 的安装与配置

1. 安装 nginx
yum install nginx

2. 配置 nginx 以安装 SSL 证书 (使用 varnish 时，不需要 nginx 监听 80 端口，nginx 监听 443 端口然后转发到 80 端口即可)
// 找到 nginx 配置文件所在目录
Linux code: nginx -t

// 打开 nginx.conf 文件配置一个 server
server {
 listen      80;  // 监听的端口
 server_name  yourdiamond.com; // 域名
 root        /usr/local/web/Panoramic; // 文件路径
 location / {
  index  index.html; // 主页
 }
}

// 检查配置是否有误
Linux code: nginx -t

3. 开启 gzip
// 在 config 文件中加入以下代码
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

4. 启动 nginx
service nginx start/restart/reload（修改配置后无需重启，reload 即可）/stop

Certbot 证书配置

1. 下载 certbot
// 安装 git
yum install git

git clone https://github.com/certbot/certbot
cd certbot

2. 安装证书
./certbot-auto certonly –webroot –agree-tos -v -t –email 邮箱地址 -w 网站根目录 -d 网站域名

// 安装成功后会看到这样的信息，在配置 nginx 时会用上
Congratulations! Your certificate and chain have been saved at:
  /etc/******/fullchain.pem
  Your key file has been saved at:
  /etc/******/privkey.pem
  Your cert will expire on 2018-06-28. To obtain a new or tweaked
  version of this certificate in the future, simply run certbot-auto
  again. To non-interactively renew *all* of your certificates, run
  “certbot-auto renew”

3. 证书的有效期为 3 个月，需要更新证书
./certbot-auto renew

Nginx 配置 SSL

1. 在 nginx.conf 文件中，新加一个 server，将 443 端口转发到 8080 端口
server {
    listen 443 ssl;
    server_name yourdiamond.com;
    // 将 ssl 证书生成后的 pem 路径复制到 ssl_certificate、ssl_certificate_key
    ssl_certificate /etc/******/fullchain.pem;
    ssl_certificate_key /etc/******/privkey.pem;
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Port 443;
        proxy_set_header Host $host;
    }
}

PM2

1. 安装 pm2
npm install pm2 -g

2. 启动 pm2
// 启动参数
–watch 监视项目，如有更改自动重启
-n 为项目命名

pm2 start /usr/local/web/PCbeta/server.js –watch -n PC_SSR_beta

3.pm2 命令
pm2 list  // 列出所有应用
pm2 stop all  // 停止所有应用
pm2 stop name|app_id  // 停止指定的应用
pm2 restart name|app_id  // 重启指定的应用
pm2 logs  // 查看日志

4. 对于 angular universal 应用，需要将生成的 dist 目录、dist-server 目录、server.js 一并复制到项目文件夹中

Varnish

1. 修改 varnish 配置
// 找到 varnish 所在目录
Linux code: whereis varnish

// 打开 varnish.params，修改 varnish 监听的端口为 8080，接收该端口的 http 请求
VARNISH_LISTEN_PORT=8080

// 打开 default.vcl
// 修改指向服务器的地址和端口 (pm2 运行的端口)
backend pc {
    .host = “127.0.0.1”; // 指向本地服务器
    .port = “4000”;  // 监听 4000 端口运行的程序
}

// 可同时存在多个 backend，实现多域名同时使用 varnish 缓存
backend pcbeta {
    .host = “127.0.0.1”;
    .port = “4001”; 
}
// 对不需要使用 cookie 的页面屏蔽 cookie 检查，提高命中率，cookie 不同 varnish 会认为是不同的页面, 这里只对包含 home 路径的页面进行检查

sub vcl_recv{
    if (!(req.url ~ “^/home/”)) {
     unset req.http.Cookie;
    }
}

2.varnish 命令
// 启动
service varnish start

// 停止
service varnish stop

// 查看统计日志

varnishtop：读取共享内存中的日志，同时会显示一个不断更新的列表

varnishhist：读取 varnishd 共享内存日志，同时生成一个连续不断更新的柱状图显示最后 N 个请求的分布。

N 的值和垂直比例尺显示在左上角的位置。水平刻度是对数的，命中标记是“|”, 未命中标记是“#”。

varnishstat：统计未命中、命中、存储信息、线程创建、删除对象等