OSS + CDN 如何部署前端静态资源OSS实现了非结构化数据的存储；CDN实现了用户就近访问的功能。两者结合就能实现

OSS 对象存储

对象存储就是图片、音频、视频等非结构化数据的数据池。

我们可以把它理解为商场的存包服务，顾客将包（数据）交给服务员（API接口），服务员给顾客一个凭证（对象地址URL），顾客想要取包时，只需提供凭证，不需要知道自己的包到底是以什么形式存储在哪里，省时省心省力。

对象存储适用于存储文档、图片、视频等非结构化数据，并且它让数据使用也更加方便。

以前，我需要使用某个资源，只能把这个资源拷贝到U盘等容器中，然后带着U盘导出拷贝。

当我突然要使用时，还必须要随身携带U盘，这非常不方便。

现在有了对象存储之后，我可以把资源存放在某个地方，会得到一个链接地址，在需要的时候只需要使用浏览器进行访问即可。非常方便。

CDN 内容分发网络

网络把几乎全世界的计算机都连接了起来，只需要把静态资源和动态的代码部署到服务器上，启动服务监听某个端口，这样世界各地的计算机就都能访问该网站。

但是这样有个问题，资源最终还是通过物理层网络线路和设备传输的，每经过一段线路、一个网络设备都有一些耗时，所以客户端和服务器相距越远，网站打开速度就越慢。

这样用户体验会很差。怎么解决这个问题呢？

离得越远网站打开速度就越慢，很容易想到，如果部署到很多个地方，当用户访问网络的时候，访问最近的那个不就行了？

这就像快递都有一些中转的仓库，可以存放一些货物，如果你人在北京，要买一个海南的东西，恰好北京的仓库里有，那岂不是很快就可以收到了。

这就是 CDN 内容分发网络的作用。

部署

单页应用

单页应用（single-page application，SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面与用户进行交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。

在单页应用中，所有必要的代码（HTML、JavaScript 和 CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。

下面使用腾讯云对象存储（Cloud Object Storage，COS） 提供的静态网站功能快速搭建一个线上可用的单页应用，并提供一些常见问题的解决方案。

示例代码如下:

// App.vue
<template>
  <div>
    <ul>
      <li><RouterLink to="/">home</RouterLink></li>
      <li><RouterLink to="/my">my</RouterLink></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

// router.js
import { createRouter, createWebHistory } from 'vue-router'

import Home from './views/Home.vue'
import My from './views/My.vue'

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/my',
    component: My
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router