nginx+varnish+angular universal实现服务端页面渲染缓存

文章目录

[隐藏]

• 总的思路
• 总的流程
  • Nginx的安装与配置
  • Certbot证书配置
  • Nginx配置SSL
  • PM2
  • Varnish

项目使用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命令，中文文档https://jefferywang.gitbooks.io/varnish_4_1_doc_zh/content/

//启动  service varnish start    //停止  service varnish stop    //查看统计日志    varnishtop：读取共享内存中的日志，同时会显示一个不断更新的列表    varnishhist：读取varnishd共享内存日志，同时生成一个连续不断更新的柱状图显示最后 N 个请求的分布。    N的值和垂直比例尺显示在左上角的位置。水平刻度是对数的，命中标记是“|”,未命中标记是“#”。    varnishstat：统计未命中、命中、存储信息、线程创建、删除对象等  

原文出处：juejin -> https://juejin.im/post/5ae5c883f265da0ba266c223