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 内容。