服务端渲染nuxt.js的部署以及通过GitHub自动部署

前言

随着各种Vue，React，Angular客户端渲染的前端框架出现，这些框架所构建的单页应用（SPA）具有用户体验好、渲染性能好、可维护性高等优点，但是也有着一些缺点，如：

• 首屏加载时间过长

与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML来呈现内容，用户需要等待客户端 JS 解析执行完成才能看到页面，这就使得首屏加载时间变长，从而 影响用户体验。

• 不利于SEO

当搜索引擎爬取网站 HTML 文件时，单页应用的 HTML 没有内容，因为他它需要通过客户端 JavaScript解析执行才能生成网页内容，而目前的主流的搜索引擎对于这一部分内容的抓取还不是很好。

为了解决这两个问题，可以服务端渲染的方法去实现。我们首先看下：

传统的服务端渲染是如何实现的：最早期，Web 页面渲染都是在服务端完成的，即服务端运行过程中将所需的数据结合页面模板渲染为HTML，响应给客户端浏览器。所以浏览器呈现出来的是直接包含内容的页面。就是前后端不分离的开发模式。

现代化服务端渲染（同构渲染）：它是结合服务端渲染 + 客户端渲染来实现的，在服务器端执行一次，用于实现服务器端渲染（首屏直出），在客户端再执行一次，用于接管页面交互，核心解决 SEO 和首屏渲染慢的问题。

1. 客户端发起请求
2. 服务端渲染首屏内容 + 生成客户端 SPA 相关资源
3. 服务端将生成的首屏资源发送给客户端
4. 客户端直接展示服务端渲染好的首屏内容
5. 首屏中的 SPA 相关资源执行之后会激活客户端
6. 之后客户端所有的交互都由客户端 SPA 处理

优缺点：

• 优点：首屏渲染速度快、有利于 SEO
• 缺点：
  • 开发成本高。
  • 部署有要求，它需要node运行环境
  • 更多的服务器负载，请明智的采用缓存策略
  • 部分框架的生命周期不支持，而且没有window、document等概念

nuxt项目的创建以及配置

创建项目

nuxt.js官方文档提供了两种创建项目的方式，我这里不使用脚手架创建，自己初始化创建一个项目来举例。

# 创建项目文件夹
mkdir nuxt-demo

# 初始化package.json文件
npm init -y

# 安装nuxt
npm install nuxt

# 配置package.json，添加命令
"dev": "nuxt", // 本地开发时，运行此命令
"build": "nuxt build", // 生成打包文件
"start": "nuxt start" // 把生成的打包文件，开启一个服务，用于访问

# 创建nuxt.config.js配置文件

部署到服务器所需的准备工作

• nuxt.config.js的配置

// 允许服务器端用ip访问，不然默认是localhost，配置端口号，默认是3000
module.exports = {
  server: {
    host: '0.0.0.0',
    port: 3000
  },
}

• 创建一个pm2的配置文件(pm2.config.json)，pm2是用来在服务器端开启服务的

{
  "apps": [
    {
      "name": "realworld", // 给当前项目取名，用于服务器端开启服务的时候用
      "script": "npm",
      "args": "start"
    }
  ]
}

准备一个服务器，以及配置node环境

准备服务器账号

购买了服务器后，创建一个服务器实例并设置实例的root账号和密码，用于ssh连接服务器时使用

给服务器下载node，并配置

• 使用ssh连接服务器

// 打开命令行终端
ssh root@服务器ip地址  // root是账号，你设置的不是这个，就换成你自己设置的

• 下载node包，并配置

// 下载，我是下载到根目录，你可以自行设置下载目录
// 跳转根目录
cd /
// 下载
wget https://nodejs.org/dist/v14.15.3/node-v14.15.3-linux-x64.tar.xz
// 解压，根据下载的不同压缩包后缀，解压命令也不同
tar xvf node-v14.15.3-linux-x64.tar.xz
// 查看是否解压安装成功
ls -l  或者  ls -a  // 查看有没有对应的文件

// 配置对应的node和npm的软链接，方便全局都可以使用node和npm
ln -s /node-v14.15.3-linux-x64/bin/node /usr/bin/node // /node-v14.15.3-linux-x64/bin/node是文件路径
ln -s /node-v14.15.3-linux-x64/bin/npm /usr/bin/npm  // /node-v14.15.3-linux-x64/bin/npm是文件路径

// 查看是否配置成功，前往其他文件目录，执行以下命令，查看版本号
node -v  
npm -v

// 大部分服务器这样配置之后就可以了，如果还不行的话，可以再配置一下环境变量
vi /etc/profile
按"i"键，进入文件编辑模式，在最后面添加以下代码

export NODE_HOME=/node-v14.15.3-linux-x64  // 这后面的是node的安装路径
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules

再按"esc"键退出编辑模式，再按"shift + :"，输入wq，进行保存。
最后输入  "source /etc/profile"  更新环境变量

• 全局安装pm2

// 下载
npm install pm2 -g

// 配置软链接
ln -s /node-v14.15.3-linux-x64/bin/pm2 /usr/bin/pm2  // /node-v14.15.3-linux-x64/bin/pm2是安装路径
// 执行pm2 -list命令，查看是否配置成功
pm2 -list

打包项目，部署到服务器上

手动部署

• 先在本地执行npm run build命令
• 把下面6个文件和文件夹压缩到一起
  • .nuxt文件夹是打包后生成的文件都在里面
  • static是项目的静态资源文件
  • nuxt.config.js、package.json、package-lock.json、pm2.config.json

• 把打包后的压缩文件通过ssh发送到服务器目录下
  • 如果你要用当前ip加端口号访问，登录完后，直接在当前目录下解压即可
  • 如果你要通过你自己设置的二级域名下访问，则跳转到你自己二级域名的目录下进行解压
  • 通过上面的其中一种解压后，在解压后的文件目录下，执行npm i命令，下载依赖包。
  • 在项目文件下开启服务，执行命令pm2 start ./pm2.config.json，这里是第一次开启服务才要使用配置文件去开启，当第二次过后，可以在任何目录下通过配置文件设置的服务名字开启，直接pm2 start 名字。
  • 服务开启后，通过ip或者域名就可以访问了。
• pm2常用命令
  • 查看服务列表 pm2 list
  • 开启服务 pm2 start 服务名|| 服务id || 配置文件路径三种方式
  • 停止服务 pm2 stop 服务名|| 服务id
  • 删除服务 pm2 delete 服务名|| 服务id
  • 剩余的可以查看pm2文档

通过GitHub自动部署

• 在项目根目录下创建.github/workflows/main.yml文件，固定文件夹和文件。文件下载地址：main.yml。建议直接下载保存，以防多个空格或者其他啥的。

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 }}  # github上的配置
      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 }} # github上的配置
      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 }} # github上的配置，服务器IP地址
        username: ${{ secrets.USERNAME }} # github上的配置，服务器实例的账号
        password: ${{ secrets.PASSWORD }} # github上的配置，服务器实例的密码
        port: ${{ secrets.PORT }} # github上的配置，ssh的端口号，一般都是22
        script: |
          cd /home/ubuntu/nuxt-realworld-demo  # 服务器上解压后的项目路径
          wget https://github.com/GitHub地址路径(只有这里改，后面的不要动)/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

• 去GitHub上配置要用的参数
  • 进入页面Settings > Developer settings > Personal access tokens，复制创建好的token
  
• 进入项目仓库，点击项目的设置，创建main.yml所需的secret

• 如何自动部署

当你正常的提交代码时不会触发GitHub的自动部署，当你给当前提交的代码放到tag中，并以'v*'开头，则会触发GitHub的自动部署，下面演示一下：

# 假设现在要提交代码
git add .
git commit -m '注释文字'
git tag v0.1.0
git push origin v0.1.0
以上则会触发自动部署，前往GitHub项目仓库中的'Actions'可以查看到当前部署情况

当部署提示成功后，可以直接访问设置的访问地址了，能访问到则表示部署成功，不能，则在上图中点击进去查看报错原因。

结束了，有感觉好的伙伴们，可以给一个赞喔