lh1me

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_failsfail_timeout 检测服务是否正常

其次,我们将 CSR 的机器设置为了 backup,让其只在 Node 服务崩溃时才接收流量

最后

至此我们已经完成了降级策略的部署了,你可以通过 test.com 访问到你的 SSR 应用,当你把 SSR 应用关闭时,访问 test.com 应该到达 CSR 内容。

本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。