ssp 架构 ssr架构是什么

转载

笑傲江湖求败 2023-07-11 14:44:22

文章标签 ssp 架构目录结构 web服务 nginx 文章分类 架构后端开发

理解ssr

博主最近招前端，发现大部分的前端只会写js、css等。对于后端以及服务器一无所知。但是容器化时代，所有程序必然是独立应用。所以ssr这样的偏后端技术是不可或缺的。博主身为一个全栈架构，觉得有必要向大家展示完全不神秘并非常简单的ssr

首先我们来看张图：

ssp 架构 ssr架构是什么_nginx

总之，SSR就是类似于老的node ejs或者java jsp方式的web技术。使用后端将html全部准备好，直接抛给前端。

SSR的重要性

当前端为vue、react这种spa应用时，非常不利于SEO，各种路由的跳转也变得复杂，并且在首屏渲染时间上也花费了大量时间。在整体架构部署上，还需要利用各种web服务（如ngxin），这点很麻烦

ssp 架构 ssr架构是什么_ssp 架构_02

非SSR

可以看到，普通的spa项目部署非常简单，根据环境打包后，把静态资源自动上传至cdn，然后随便nginx上设置一下就行了，前面挂一个LB，这种只涉及到静态资源的部署，非常适用于后台管理系统。

SSR

上图看到，SSR部署因为涉及到后端，所以需要部署node（可以使用pm2托管）。

那么就会有两个web服务：node和nginx。 当然，你可以只保留一个，把nginx去掉，这样的话。你需要在node服务中进行一些转发规则的配置

当你的前端是SSR，说明自带web服务。我们可以利用serverless方式部署：

ssp 架构 ssr架构是什么_目录结构_03

你会发现你的前端项目完全变成了一个应用程序

了解vapper

ssr会有一定的难度，有没有一种框架，可以让你的vue默认变成ssr，而你编程方式还是写普通的vue文件？

当然，水滴团队推出的这个框架实在太赞了。博主使用它搭建开箱即用的脚手架，直接上了生产

https://vapperjs.org/zh/introduction.html

制作简易版脚手架

我们使用vapper框架来只做一个简单的脚手架，方便开发

vue框架

可以使用vue cli3创建项目，这里博主就不多减少了。不过vapper提供了一个简单的模板。可以直接下载下来。博主使用npm，所以删掉了yarn.lock
vapper example 下载下来后，可以直接运行，发现已经是ssr了

环境区分

上生产的话，这些完全不够。我们需要针对不同环境做区分

首先，我们来四种环境：

qa：测试环境
demo：预发环境
prod：生产环境
development：开发环境

ssp 架构 ssr架构是什么_ssp 架构_04

ssp 架构 ssr架构是什么_web服务_05

ssp 架构 ssr架构是什么_目录结构_06

然后我们针对不同环境，编写打包命令：

ssp 架构 ssr架构是什么_目录结构_07

我们使用环境，来区分接口前缀

export const getRootApi = function (urlRoot) {
  let apiRoot = 'http://localhost:9001' //本地后台接口地址
  if (process.env.NODE_ENV === 'production') {
    if (process.env.VUE_APP_ENV === 'qa') {
      apiRoot = ''//'qa环境的后台接口地址'
    } else if (process.env.VUE_APP_ENV === 'demo') {
      apiRoot = ''
    } else {
      apiRoot = ''
    }
  }
  if (urlRoot) {
    apiRoot = apiRoot + urlRoot
  }
  return apiRoot
}

目录结构

搞定编译打包与环境问题，我们开始设置目录结构

ssp 架构 ssr架构是什么_目录结构_08

如图所示

api：所有的后台接口
assets：公共静态资源
plugin：vapper自定义插件
router：路由
views：页面

api

模拟一个接口promise：

ssp 架构 ssr架构是什么_web服务_09

router

写两个页面，并且为了避免单例，每次路由直创建

ssp 架构 ssr架构是什么_web服务_10

必须这么写，不可以在外面定义router对象，用export导出，这样会不生效
export default () => {
  return new VueRouter({
    mode: 'history', //可以利用keep-alive
    routes: [
      ...demo2Router
    ]
  })
}