Nuxt服务端渲染ssr

前言：

Nuxt是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用。

正文：

Nuxt集成了vue2、vue-route、vuex、vue ssr、vue-meta等组件/框架，用webpack、和vue-loader、babel-loader来处理代码的自动化构建工作（打包、代码分层、压缩等）。

一般我们在部署Nuxt应用的时候，有两种选择：

1、通过静态化部署（也称为预渲染）-- 使用 nuxt generate 命令。这个命令依据应用的路由配置将每一个路由静态化成为对应的 HTML 文件

2、通过ssr部署 -- 先使用nuxt build编译构建再使用nuxt start开启一个web服务，有时会使用npm run start &。

【温馨提示：nuxt提供了一个asyncData的api，这个是SSR最关键的地方】

asyncData：

1、asyncData方法会在组件（限于页面组件）每次加载之前被调用。

2、它可以在服务端或路由更新之前被调用。

3、在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，

Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

【温馨提示：asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象】

具体细节可以访问中文官网https://zh.nuxtjs.org

说到SEO，简单的理解就是自己的网站在搜索引擎的排名，简单粗暴理解。这里我们拿百度搜索引擎来讲讲，百度蜘蛛爬虫。

百度蜘蛛爬虫工作原理：

step 1：抓取网页

先从索引区出发抓取网络上的网页链接，初步蜘蛛抓取的是全网的链接，没有针对性和目的性

step 2：筛选过滤（收录）

将抓取到的网页放入索引库来进行筛选和过滤，将符合百度算法和规则的内容进行索引，将不符合的内容进行剔除，还有一部分的内功存放，进行二次的筛选过滤，这样不断的进行循环。

step 3：进行索引

收录不等于索引，一般而言，收录是大于索引的。只有被收录，才能被索引。并不是所有文章都能被索引的。

step 4：排名展现

顾名思义，就是自己的网站在引擎的排名

Tips: 纯html等静态化网站对百度蜘蛛比较友好，且百度蜘蛛几乎不会爬取js动态的网站，如vue/react构建的且经webpack/gulp等构建工具压缩处理过的网站。meta的设置，以及网站TDK的优化，网站结构优化，外链，文章原创等同样对SEO有很大作用。

Nuxt安装，启动，这种基操这里就不讲，前往中文官网https://zh.nuxtjs.org 按照步骤就可以启动nuxt应用来。

当我们启动我们应用后，我们需要注意一点，在本地开发，如果后台没有设置跨域头，我们需要做以下改造：

nuxt.config.js：

module.exports= {
    modules: [
        '@nuxtjs/axios'
    ],
    axios: {
        proxy: true, //开启代理
        credentials: true, //跨域请求需使用凭证
    },
    proxy: [
        ['/api',{ 
            target: 'http://example.com/api', // (后端请求地址)
            changeOrigin: true,
            pathRewrite: {'^/api': ''}
        }]
    ]
}

服务端渲染SSR

如果我们只是做简单的静态部署，执行nuxt generate会生成静态化页面，然后再执行nuxt build 打包后将dist文件夹推上服务器就可以上线了。

这种比vue构建简单了一点。

另外一种就是ssr，在服务器搭个node服务器然后直接在上面跑。我们需要使用asyncData/fetch。Nuxt也是基于vue开发的，生命周期也一样。

但Nuxt在服务端中会触发beforeCreate 、created两个生命周期。其次，nuxt有自己一套服务器渲染流程。

Nuxt 提供了几种不同的方法来使用 asyncData 方法：

返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
使用 async 或 await
使用回调函数

1、返回Promise

export default {
  asyncData ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
      .then((res) => {
        return { title: res.data.title }
      })
  }
}

2、async或await

export default {
  async asyncData ({ params }) {
    const { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

3、使用回调函数

export default {
  asyncData ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
      .then((res) => {
        callback(null, { title: res.data.title })
      })
  }
}

Tips: 在实际项目中，我们一般会有验权操作的。我们需要获取cookie或者服务端存储的session里面的一些校验机制。

这时候我们需要使用到vuex状态树，在状态树中有个方法非常有用 nuxtServerInit

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}

多环境配置（开发、测试、生产）

如果项目中不：要那么多环境，简单配置一个环境就可以了。

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    ['@nuxtjs/dotenv', { filename: '.env.prod' }],
  ],

如果有多环境，为了不需要频繁改动环境，我们可以在nuxt.config.js中引入并且在module中使用：

require('dotenv').config({path: '.env'})
module.exports={
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/dotenv'
    ]
}

而且我们可以在根目录配置.env.dev 、 .env.test 、.env.prod文件，

我们只需要修改对应的NODE_ENV:

// .env.dev
NODE_ENV=development
// .env.test
NODE_ENV=test
// .env.prod
NODE_ENV=production

axios做跨域请求时，可以自动根据环境给axios配置baseURL。API_URL是我们在env配置的url

import axios from 'axios';
const axiosInstance = axios.create({
    timeout: 10000,
    baseURL: process.env.API_URL
})

到这一步基本完成我们Nuxt的基础配置了，还有一些周边知识可以梳理梳理：

Nginx反向代理

一般在测试环境或者生产环境，需要使用到nginx做代理服务器，解决跨域。因为我们的项目前后端可能部署在不同的服务。

upstream nodenuxt {
    server 127.0.0.1:3000; #nuxt项目 监听端口
    keepalive 64;
}
server {
    listen 80;
    server_name https://www.example.com; #访问域名  
    location / {
        proxy_http_version 1.1;        
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "upgrade";        
        proxy_set_header Host $host;        
        proxy_set_header X-Nginx-Proxy true;        
        proxy_cache_bypass $http_upgrade;        
        proxy_pass http://nodenuxt; #反向代理
    }
}

pm2守护node进程配置

一般我们在服务端执行npm start项目可以跑起来，but我们的项目总会挂掉。为了让我们服务进程常驻，我们要用到pm2来守护node进程。

而且可以用pm2来做自动重启、性能监控以及负载均衡。

步骤如下：

step 1:

npm install pm2 -g // 全局安装

step 2:

pm2 start ./node_modules/nuxt/bin/nuxt.js -- start // 启动

step 3:

当项目报错，我们想查看日志，这时候，我可以修改pm2.config.js的配置：

module.exports = {
    apps: [
        {
            name: 'nuxt-demo',//项目名称
            cwd: './',//当前工作路径
            script: 'npm',//实际启动脚本
            args: 'run start',//参数
            autorestart: true, //自动重启
            error_file: 'logs/nuxt-demo-err.log',//错误日志
            out_file: 'logs/nuxt-demo-out.log', //正常运行日志
            exec_mode: 'cluster_mode',// 应用启动模式，支持fork和cluster模式
            min_uptime: '60s', //应用运行少于时间被认为是异常启动
            restart_delay: '60s',//重启时延
            instance: 4,//开启4个实例，仅在cluster模式有效，用于负载均衡
            watch: true,//监控变化的目录，一旦变化，自动重启
            watch: ['.nuxt', 'nuxt.config.js'],//监控变化的目录
            watch_delay: 1000,//监控时延
            ignore_watch: ['node_modules'],//从监控目录中排除
            watch_options: { // 监听配置
                'followSymlinks': false,
                'usePolling': true
            }
        }
    ]
}

这个文件我们可以在package.json中引入使用：

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
        "build": "nuxt build",
        "start:test": "cross-env NODE_ENV=test node server/index.js pm2 start pm2.config.js --exec babel-node",
        "start:prod": "cross-env NODE_ENV=production node server/index.js pm2 start.config.js --exec babel-node",
    }
}

Tips: 如果有报错需要安装babel转译 ```npm install babel-cli babel-core babel-preset-es2015 --save-dev

到这里，基本就大功告成了，but还是可以弄下docker容器部署前端工程

服务端docker容器部署前端工程

step 1: 建立Dockerfile

FROM node:alpine

RUN mkdir -p /app/src
COPY ./src /app/src
WORKDIR /app/src

ENV HOST "0.0.0.0"

RUN sed -i "s/dl-cdn.alpinelinux.org/${ALPINE_REPOSITORIES}/g" /etc/apk/repositories

RUN apk add --no-cache make gcc g++ python

RUN npm config set registry https://registry.npm.taobao.org
RUN npm install -g pm2
RUN npm install
RUN npm run build
RUN npm cache clean --force

RUN apk del make gcc g++ python

EXPOSE 3000
CMD ["npm", "run", "start:test"]
#CMD ["npm", "run", "start:prod"]

setp 2: 然后构建镜像

docker build -t nuxt-demo

step 3: 启动容器

docker run -dt -p 3000:3000 nuxt-demo

Tips：这里服务端部署后需要0.0.0.0:3000访问，我们还需配置主机号和端口，在nuxt.config.js中配置。

module.exports = {
    server: {
        host: '0.0.0.0',
        port: 3000
    }
}

本篇分享到这里就结束啦，给朋友们推荐一个前端公众号，里面都是前端技术干货。

posted @ 2020-05-19 12:50 广东靓仔-啊锋阅读(793) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端开发-阿锋

Nuxt服务端渲染ssr

1、返回Promise