基于Nuxtjs的同构渲染实践

什么是同构渲染

同构渲染属于是SSR的一种，特点在于可以使用同一套代码构建SSR资源和静态资源，使得应用可以同时具备SSR和SPA的优势。

同构渲染可以解决什么问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZuxsvl0-1656394850977)(/Users/guoming/Downloads/开发流程.drawio.png)]

首屏加载问题

SPA应用的首屏都要JS进行加载，所以会存在白屏的情况，SSR能很好的解决这个问题。

SEO

SPA应用的DOM都是通过JS进行加载，不利于SEO，而对于SSR来说，首屏即能返回完整的DOM结构。

提升开发/维护效率

开发层面使用Vue的语法进行开发，提升开发效率。

服务端渲染基于Nodejs，而不是php，减少了开发时候与后端同学的沟通成本。

技术选型

Nuxtjs

Nuxt.js 是一个基于 Vue.js 的通用应用框架，对SSR提供了开箱即用的全面支持，是Vue社区最受欢迎的SSR框架，同时也支持传统的SPA应用的构建。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AmPhPJ5R-1656394850978)(/Users/guoming/Library/Application Support/typora-user-images/image-20220621110759888.png)]

GitHub Actions

GitHub Actions 是一个持续集成和持续交付 (CI/CD) 平台，可用于自动执行构建、测试和部署管道。 可以通过配置文件创建工作流程来构建和测试存储库的每个拉取请求，或将合并的拉取请求部署到生产环境。

nginx

实现负载均衡，即在服务端渲染占用过多服务器资源时，使用户定向访问静态资源，使用客户端渲染，减少服务器压力。

实践

1、使用nuxtjs脚手架快速创建项目

$ npx create-nuxt-app <项目名>
1

或者用 yarn ：

$ yarn create nuxt-app <项目名>
1

2、按照nuxtjs框架规范编写代码

3、使用命令打包代码

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "build.spa": "nuxt build --spa",
    "start": "nuxt start"
  },
}
1
2
3
4
5
6
7
8

4、使用GitHub Action发布应用 部署到云服务器

部署到服务器后需要使用pm2这个库对Node进程进行管理

name: Continuous Integration #action名称
on: [push] #在推送的时候运行此action

jobs:
  build_job:
    runs-on: ubuntu-latest #运行环境
    name: build
    steps:
      # check out the repository
      - name: Checkout
        uses: actions/checkout@v3 #这里使用了github官方提供的action,checkout项目到虚拟机上

      - name: Install Dependencies
        run: yarn
      - name: SPA Build
        run: yarn build.spa

      - name: deploy spa to server # 部署spa
        uses: easingthemes/ssh-deploy@main
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          ARGS: "-avzr --delete"
          SOURCE: "dist/" # 对应项目build的文件夹路径
          REMOTE_HOST: ${{ secrets.SERVER_IP }}
          REMOTE_USER: "root" #ssh user name
          TARGET: "/www/wwwroot/shrinkjs/shrinkjs_web_spa"

      - name: deploy ssr to server # 部署ssr
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: "root"
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /www/wwwroot/shrinkjs
            cp -r shrinkjs_web shrinkjs_web-new
            cd shrinkjs_web-new
            git fetch --all
            git reset --hard origin/master
            yarn install
            yarn build
            cd ..
            mv shrinkjs_web shrinkjs_web-old
            mv shrinkjs_web-new shrinkjs_web
            cd shrinkjs_web
            pm2 kill
            pm2 start "yarn start" --name App
            rm -rf ../shrinkjs_web-old

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

5、nginx配置

配置简单的负载均衡

upstream shrinkjs{ 
	server localhost:3000; 
	server localhost:8888;
}

server {
  listen 8888;
  server_name localhost;
  location / {
    alias /www/wwwroot/shrinkjs/shrinkjs_web_spa/;
  }
}

server {
  listen 80;
  server_name www.tracex.top;
  location / {
    proxy_pass http://shrinkjs;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6、访问测试

第一次为服务端渲染

第二次为客户端渲染