前后端分离的项目如何进行SEO优化（实践中）-3033

本文主要讲如何优化前后端分离的系统（分析原因+解决方案）

为什么要做SEO，这个问题想必大家都知道，不知道的百度去。

发现问题

对开发工程师人员来说SEO并不陌生，8月初我们上线了新版本社区，待所有功能完善后（中间发了很多小版本修复bug），运营人员在Google上搜索并没有检索出我们社区的最新内容，最新的检索内容停留在了五月份，随后反馈到技术。

项目介绍

前端使用的是vue开发、后端是php，go, node.js 属于前后端分离的系统。首页，个人主页采用的是vue开发，详情页是vue页面中嵌套的服务端渲染的页面。

问题分析

排查后发现爬虫对iframe 一点都不友好，恰好我们使用vue + iframe方式嵌入的内容页面这时候我就想到爬虫仅爬去页面源代码分析内容，此时还没等js的内容加载就已经返回了结果(下图所示)，所以在Google上检索就没内容了

解决方案实践

我的想法是处理两种不同的页面：1，正常用户使用、2，爬虫使用。在网上冲浪一番后看到最多的是 Prerender 预渲染然后根据user-agent转发到Prerender 爬虫就能拿到正常数据了, 随后尝试本地容器化搭建进行测试。

方案一：Prerender 预渲染

1,下载源码到本地

https://github.com/halobug/prerender

2，制作Docker镜像，Dockerfile

FROM node:16

ENV LANG en_US.UTF-8
ENV LANGUAGE en_US.UTF-8
ENV LC_ALL=en_US.UTF-8

WORKDIR /app

COPY ./app/package.json /app/package.json
RUN  npm install --registry=https://registry.npm.taobao.org
COPY ./app  /app

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
  && sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
  && apt-get update -y \
  && apt-get install google-chrome-stable -y \
  && apt-get clean \
  && rm -rf /tmp/* /var/lib/apt/lists/*

# Add Chrome as a user
RUN groupadd -r chrome && useradd -r -g chrome -G audio,video chrome \
    && mkdir -p /home/chrome && chown -R chrome:chrome /home/chrome

RUN  chown -R chrome:chrome /home/chrome/

# Run Chrome non-privileged
USER chrome

EXPOSE 3000

CMD node /app/server.js

3，build 镜像

docker build -t  halobug/prerender:1.0 .

4，build 无异常后运行容器&进入容器

docker run -it --privileged halobug/prerender:1.0 sh

5，运行测试

1，docker exec -it 容器ID sh

2，node /app/server.js

3，curl http://127.0.0.1:3000/https://hub.halobug.cn/v/10248

测试后的确是预加载了页面，但是严重的问题来了CPU 112% 飙升，响应5-8秒性能及差，无法提供正常服务（冲浪过没找到优化方案）。

果断放弃！继续第二种～

方案二：使用Nginx的njs模块，根据api生成静态页面进行proxy

正常用户访问项目，爬虫访问进入njs生成静态，参考njs文章，在新版中的nginx 官方已经支持了njs模块，不需要重新安装了。

1,app.js 创建

目录 ./script/app.js

// https://github.com/nginx/njs/issues/352#issuecomment-721126632
function resolveAll(promises) {
  return new Promise((resolve, reject) => {
    var n = promises.length;
    var rs = Array(n);
    var done = () => {
      if (--n === 0) {
        resolve(rs);
      }
    };
    promises.forEach((p, i) => {
      p.then((x) => {
        rs[i] = x;
      }, reject).then(done);
    });
  });
}

function aggregation(req) {

  var apis = ["/proxy/api-mysql/common/chat/chat-translation-data.json"];
  resolveAll(apis.map((api) => req.subrequest(api)))
    .then((responses) => {
      var result = responses.reduce((prev, response) => {
        var uri = response.uri;
        var prop = uri.split("/proxy/api-")[1].split("/")[0];
        try {
          var parsed = JSON.parse(response.responseText);
          if (response.status === 200) {
            prev[prop] = parsed;
          }
        } catch (err) {
          req.error(`Parse ${uri} failed.`);
        }
        return prev;
      }, {});
      req.headersOut["Content-Type"] = "application/json;charset=UTF-8";
      req.return(200, JSON.stringify(result));
    })
    .catch((e) => req.return(501, e.message));
}

export default { aggregation };

2,nginx.conf 创建

目录 ./nginx.conf

load_module modules/ngx_http_js_module.so;

user nginx;
worker_processes auto;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/json;

    js_import app from script/app.js;

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost;
        charset utf-8;
        gzip on;

        location / {
            js_content app.aggregation;
        }
        #这里不可少
        subrequest_output_buffer_size 200k;
        location /proxy/api-mysql {
            internal;
            gunzip on;
            proxy_pass https://www.mysql.com/;
            proxy_set_header Host www.mysql.com;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

3，编写 docker-compose.yml

version: "3.6"

services:
  local-halobug:
    image: nginx:1.19.8-alpine
    restart: always
    expose:
      - 80
    networks:
      - traefik
    volumes:
      - ./logs:/var/log/nginx
      - ./nginx.njs.conf:/etc/nginx/nginx.conf:ro
      - ./script:/etc/nginx/script
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=traefik"
      - "traefik.http.routers.local_halobug.entrypoints=https"
      - "traefik.http.routers.local_halobug.tls=true"
      - "traefik.http.routers.local_halobug.rule=Host(`nginx.halobug.cn`)"
      - "traefik.http.services.local_halobug-backend.loadbalancer.server.scheme=http"
      - "traefik.http.services.local_halobug-backend.loadbalancer.server.port=80"
    logging:
      driver: "json-file"
      options:
        max-size: "1m"

networks:
  traefik:
    external: true

浏览器访问出现以下结果代表成功（接口返回的内容自己组装静态吧）

4，运行成功后修改原项目的nginx 配置进行代理转发

# 爬虫使用的静态页
location ~ ^/v/(\d+)$ {
    set $is_proxy 0;
    # 部分爬虫的user-agent
    if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|360Spider|Sogou Spider|Bytespider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
        ## 
        set $is_proxy 1;
    }
    if ($is_proxy = 1) {
        # 容器内互通的容器名称 seo-njs.cn;
        proxy_pass http://seo-njs.cn;
    }
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}
location =/robots.txt {
    default_type text/html;
    add_header Content-Type "text/plain; charset=UTF-8";
    return 200 "User-Agent: *\nAllow: /";
}

5，模拟爬虫进行测试，不出意外的话展示组装后静态页面

curl -A "Googlebot" https://hub.halobug.cn/v/9268

测试后nginx几乎没有压力，最终选择方案二。

实践过程中出现错误信息，请保持良好心态继续解决哈哈哈～

以上测试均为本地，没有隐私内容。

内容中包含的图片若涉及版权问题，请及时与我们联系删除

前后端分离的项目如何进行SEO优化（实践中）-3033

本文主要讲如何优化前后端分离的系统（分析原因+解决方案）

发现问题

项目介绍

问题分析

解决方案实践

方案一：Prerender 预渲染

1,下载源码到本地

2，制作Docker镜像，Dockerfile

3，build 镜像

4，build 无异常后运行容器&进入容器

5，运行测试

方案二：使用Nginx的njs模块，根据api生成静态页面进行proxy

1,app.js 创建

2,nginx.conf 创建

3，编写 docker-compose.yml

5，模拟爬虫进行测试，不出意外的话展示组装后静态页面

评论列表

评论

前后端分离的项目如何进行SEO优化（实践中）-3033

本文主要讲如何优化前后端分离的系统（分析原因+解决方案）

发现问题

项目介绍

问题分析

解决方案实践

方案一 ：Prerender 预渲染

1,下载源码到本地

2，制作Docker镜像，Dockerfile

3，build 镜像

4，build 无异常后运行容器&进入容器

5，运行测试

方案二 ：使用Nginx的njs模块，根据api生成静态页面进行proxy

1,app.js 创建

2,nginx.conf 创建

3，编写 docker-compose.yml

5，模拟爬虫进行测试，不出意外的话展示组装后静态页面

评论列表

评论

方案一：Prerender 预渲染

方案二：使用Nginx的njs模块，根据api生成静态页面进行proxy