七、服务端渲染ssr

一、 为什么单页面（spa）首屏渲染慢

主要是单页面应用，首先请求服务端返回一个index.html,这个index.html,浏览器此时会渲染html，然后请求html文件中的js脚本，然后再执行脚本，请求数据等等，这个过程就会很耗时。

二、 为什么单页面（spa）不利于SEO

搜索引擎首先会爬取网站的index.html文件，而spa中的index.html文件body里面什么都没有，只有执行脚本app.js和chunk.js等文件，因而不利于seo

三、 现代化服务端渲染（同构渲染）

• 基于React、Vue等框架，客户端和服务端结合的渲染方式

  • 在服务端执行一次，用于实现服务端渲染（首屏直出）

  • 在可短在渲染一次，用于接管页面交互

  

这样的渲染方式解决了不利于seo和首屏渲染过慢的问题。

同时同构渲染也有以下问题

• 开发条件有限

  

• 涉及构架你设置和部署更多的要求

  

• 更多的服务器负载

  

四、 nuxt.js

路由跟vue-router保持一致几乎没有区别

上传服务端的文件如下图所示

使用pm2启动

五、 github自动化部署过程

### 1) 配置GitHub Access Token 步骤如下图所示

### 2) 在github项目中添加secrets

### 3) 配置Github Actions执行脚本

GitHub - yangyankang/realworld-nuxt: 一个realwolrd nuxt的项目

• 在项目根目录创建 .github/workflows 目录

• 下载main.yml 到workflows 目录中

  • https://gist.github.com/lipengzhou/b92f80142afa37aea397da47366bd872

• 修改配置

name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*'

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master

    # 打包构建
    - name: Build
      uses: actions/setup-node@master
    - run: npm install
    - run: npm run build
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        tag_name: ${{ github.ref }}
        release_name: Release ${{ github.ref }}
        draft: false
        prerelease: false

    # 上传构建结果到 Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        upload_url: ${{ steps.create_release.outputs.upload_url }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        script: |
          cd /root/project/realworld-nuxt
          wget https://github.com/yangyankang/realworld-nuxt/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

• 在项目中的settings/secrets添加自己服务器的用户和密码以及ip和端口好

• 提交更新

每次提交git tag v0.1.0 创建版本号 然后git push origin v0.1.0

• 查看自动部署状态

在github项目中的actions可以看到构建进程

• 访问网站

你的服务器公网ip:3000端口

• 提交更新