控制台指南

最佳实践

开发者指南

API 文档

SDK 文档

诚邀爱技术、爱分享的你,成为文档内容共建者> HOT
文档中心 > 对象存储 > 最佳实践 > 域名管理实践 > 使用 COS 静态网站功能搭建前端单页应用

什么是单页应用?

单页应用(single-page application,SPA)是一种网络应用程序或网站的模型,它通过动态重写当前页面与用户进行交互,而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验,使应用程序更像一个桌面应用程序。在单页应用中,所有必要的代码(HTML、JavaScript 和 CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面。

目前在前端开发领域,常见的单页应用开发框架有 React、Vue、Angular 等。

本文将使用目前较为热门的2个框架,一步步教您使用腾讯云对象存储(Cloud Object Storage,COS)提供的静态网站功能快速搭建一个线上可用的单页应用,并提供一些常见问题的解决方案。

准备工作

  1. 安装 Node.js 环境。
  2. 注册腾讯云账户,并完成实名认证,确保能正常登录 腾讯云 COS 控制台
  3. 创建一个存储桶(为了方便测试可将权限设置为公有读私有写)。

编写前端代码

注意:

如果已经自行实现了代码,可直接跳至 开启存储桶静态网站配置 步骤查看。

使用 Vue 快速搭建一个单页应用

  1. 执行如下命令,安装 vue-cli:
    npm install -g @vue/cli
  2. 执行如下命令,使用 vue-cli 快速生成一个 vue 项目,可参考 官方文档
    vue create vue-spa
  3. 执行如下命令,在项目根目录下安装 vue-router:
    npm install vue-router -S  (Vue2.x)
    或者
    npm install vue-router@4 -S  (Vue3.x
  4. 修改项目里的 main.js 和 App.vue 文件。
    main.js 如下图:


    App.vue 主要修改组件的 template,如下图:

    说明:

    由于篇幅有限,这里仅节选部分关键代码,完整代码可 单击此处 下载。

  5. 修改好代码后,执行如下命令,进行本地预览。
    npm run serve
  6. 调试并预览检查无误后,执行如下命令,打包生产环境代码。
    npm run build
    此时,将会在项目根目录下生成 dist 目录。至此,Vue 的程序代码已经准备完毕。

使用 React 快速搭建一个单页应用

  1. 执行如下命令,安装 create-react-app:
    npm install -g create-react-app
  2. 使用 create-react-app 快速生成一个 react 项目,可参考 官方文档
  3. 执行如下命令,在项目根目录下安装 react-router-dom:
    npm install react-router-dom -S
  4. 修改项目里的 App.js 文件。

    说明:

    由于篇幅有限,这里仅节选部分关键代码,完整代码可 单击此处 下载。

  5. 修改好代码后,执行如下命令,进行本地预览。
    npm run start
  6. 调试并预览检查无误后,执行如下命令,打包生产环境代码。
    npm run build
    此时将会在项目根目录下生成 build 目录。至此,React 的程序代码已经准备完毕。

开启存储桶静态网站配置

  1. 进入创建好的存储桶详情页面,并在左侧导航栏中,单击基础配置 > 静态网站
  2. 在静态网站管理页面,参考下图,进行配置。操作详情请参见 设置静态网站

部署至 COS

  1. 找到之前已经配置了静态网站的存储桶,进入文件列表页面。
  2. 将编译目录(Vue 默认为 dist 目录,react 默认为 build 目录)下的所有文件上传至存储桶的根目录下。操作详情请参见 上传对象
  3. 访问存储桶的静态网站域名(如下图中的访问节点)。

    即可看到已经部署完成的应用主页,这里以 Vue 应用举例。
  4. 尝试切换路由(Home、Foo、Bar),并刷新页面,验证是否符合预期(即在路由下刷新不会出现404报错)。

常见问题

我不想使用静态网站的默认域名怎么办?可以使用我自己的域名吗?

除了上面使用的默认静态网站域名,COS 还提供了默认 CDN 加速域名、自定义 CDN 加速域名、自定义源站域名等其他选择。

具体可参考 域名管理概述 文档进行配置,配置成功后即可使用自己想要的域名来访问应用。

部署好应用之后,切换路由能成功渲染,但页面一刷新就出现404报错,是什么原因?

原因可能是配置静态网站的时候,缺失配置或错误配置了错误文档导致,请再次回顾本文开头提供的标准配置截图,可以看到错误文档和索引文档均配置为 index.html

由于单页应用的特性,我们需要保证在任何情况下都要成功访问到应用入口(一般为index.html),这样才能触发后续路由的一系列内部逻辑。

切换路由之后,页面能正常显示,但 HTTP 状态码依然为404,怎样才能正常返回200?

这里原因是配置静态网站的时候,缺少了配置错误文档响应码导致,可参考开头的配置截图,将其配置为200即可解决。

配置了错误文档之后,访问错误的路径还需要展示404的功能,应该如何处理?

这里推荐在前端代码里实现404逻辑,在路由配置最底部设置一个底层的匹配规则,当前面所有规则都匹配失败的时候则渲染一个404组件,组件内容可根据自行需求来设计实现。具体可参考本文提供的代码 demo 里的路由配置的最后一个配置。

访问页面出现 403 Access Denied 报错是什么原因?

原因可能是存储桶的权限设置了私有读写,可以修改为公有读私有写解决。

另外,如果使用 CDN 加速域名访问私有读写的存储桶,还需注意开启回源鉴权配置,这样才能授权 CDN 服务正常访问到 COS 下的资源。

目录