Nuxt.js 利用 Nginx 实现同构降级策略
Nuxt.js 是很优秀的 SSR 框架之一,让我们能够使用 Vue 直接进行项目开发,并且不需要关心过多的 Node 服务端内容。
由于公司项目需要考虑到 SEO 问题,因此我选用了 Nuxt 作为底层框架。项目完成上线后,考虑到容灾和项目稳定性,虽然说已经部署了负载均衡,保险起见还是把 CSR 降级策略也搞了(避免背锅
与市面上别的同构降级策略不通,降级过程中需要在 Node 服务端进行降级策略判断,我们这里的降级思路是,先利用 Nuxt 构建两份完整的 SSR 和 CSR 内容,在利用 Nginx 进行流量分发。
1. 构建
根据我们的降级思路,首先要分别构建 SSR 和 CSR,其中 SSR 部分正常构建即可,我们主要来关心 CSR 部分
直接扔上配置文件,再一一解析
# nuxt.config.js
export default {
target: 'static',
ssr: false,
buildDir: 'nuxt-dist',
generate: {
crawler: false,
dir: 'nuxt-dist-generate'
}
};
当我们需要构建 CSR 的时候,
target
参数设置为 'static'
ssr
参数设置为 false
主要目的是为了,默认的 npm run generate
会将动态内容也打在 HTML 文件上,但是我们不需要构建动态内容
crawler: false
参数同样是为了关闭动态内容构建
其余参数说明请直接查看文档
至此我们得到两个文件夹,nuxt-dist
为将要部署的 SSR,nuxt-dist-generate
为将要部署的 CSR
2. 部署
首先,SSR 部门我们正常部署,得到一个地址,假定这个地址为 192.168.1.1:3000
然后我们进行 CSR 的部署
# nginx.conf
server {
listen 3001;
server_name abc.com;
root /usr/share/nginx/wwwroot;
location / {
try_files $uri $uri/ /index.html;
}
}
我们按普通的静态文件形式来部署 CSR 即可
至此我们得到一个地址,假定这个地址为 192.168.1.1:3001
3. Nginx
最后一步,我们利用 Nginx 心跳检测来分发流量
# nginx.conf
upstream ssr {
server 192.168.1.1:3000 max_fails=5 fail_timeout=10s;
server 192.168.1.1:3001 max_fails=5 fail_timeout=10s backup;
}
server {
listen 80;
server_name test.com;
location / {
proxy_pass http://ssr;
proxy_set_header Host $host;
proxy_set_header REMOTE-HOST $remote_addr;
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 $scheme;
}
}
首先,我们利用了 upstream
来进行流量分发,并设置 max_fails
和 fail_timeout
检测服务是否正常
其次,我们将 CSR 的机器设置为了 backup
,让其只在 Node 服务崩溃时才接收流量
最后
至此我们已经完成了降级策略的部署了,你可以通过 test.com
访问到你的 SSR 应用,当你把 SSR 应用关闭时,访问 test.com
应该到达 CSR 内容。
本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可。