本文介绍如何使用React框架,通过OSS的静态网站托管功能在前端快速部署一个线上可用的单页应用SPA(Single-Page Application)。

什么是单页应用

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

前提条件

  • 已安装Node.js SDK。具体操作,请参见安装
  • 已创建Bucket。本教程以创建名为examplebucket的Bucket为例,具体操作,请参见创建Bucket
  • 已为名为examplebucket绑定自定义域名example.com。具体操作,请参见绑定自定义域名

步骤一:使用React快速创建单页应用

  1. 打开命令行终端cmd或者PowerShell,本教程以cmd为例。
  2. 执行以下命令创建项目。
    npx create-react-app spa-demo

    返回示例以下:

    Need to install the following packages:
    create-react-app
    Ok to proceed? (y)
  3. Ok to proceed? (y)后输入y,然后回车。
    等待几分钟后项目将自动创建完成,同时会自动安装依赖。
  4. 执行以下命令进入已创建的项目。
    cd spa-demo
  5. 执行以下命令预览已创建的项目。
    npm run start
    App.js文件如下图所示:js
  6. 调试并预览检查无误后,执行以下命令打包生产环境代码。
    npm run build

    项目根目录下生成build目录。

步骤二:为examplebucket配置静态网站托管

  1. 登录OSS管理控制台
  2. 单击Bucket列表,然后单击examplebucket
  3. 选择基础设置 > 静态页面,在静态页面区域单击设置
    • 开通子目录index1
      参数 说明
      默认首页 默认首页是您通过浏览器访问静态网站域名时,OSS返回的网站首页。此处设置为index.html
      子目录首页 选择开通。开通子目录首页后,访问静态网站根域名时,返回根目录默认首页。访问根域名下以正斜线(/)结尾的URL时会返回对应目录的默认首页。
      默认404页 访问Bucket内文件出现404错误时,OSS返回的错误页面。当前配置用于前端单页应用,请将默认404页也配置为应用入口,即与默认首页相同的index.html
      错误文档响应码 配置返回错误文档时的HTTP响应码为200
    • 不开通子目录static
      参数 说明
      默认首页 默认首页是您通过浏览器访问静态网站域名时,OSS返回的网站首页。此处设置为index.html
      子目录首页 选择不开通,此时访问静态网站根域名或者根域名下任何一个以正斜线(/)结尾的URL都会返回根目录默认首页。
      默认404页 访问Bucket内文件出现404错误时,OSS返回的错误页面。当前配置用于前端单页应用,请将默认404页也配置为应用入口,即与默认首页相同的index.html
      错误文档响应码 配置返回错误文档时的HTTP响应码为200
  4. 单击保存

步骤三:上传build目录下的所有文件

  1. 单击左侧导航栏的Bucket列表,然后单击examplebucket
  2. 在左侧导航栏,选择文件管理 > 文件管理
  3. 文件管理页签,单击上传文件
  4. 上传文件面板,按以下说明配置各项参数。
    参数 说明
    上传到 选中当前目录
    文件ACL 设置文件读写权限ACL为公共读
    待上传文件 单击扫描文件夹,选中React生成的spa-demo项目中build目录下的所有文件。
  5. 单击上传
    此时,您可以在上传列表页签查看各个文件的上传进度。上传完成后,您可以在examplebucket的文件列表下找到名为index.html文件。

步骤四:通过自定义域名访问已部署的单页应用

  1. 打开浏览器。
  2. 本教程以自定义域名example.com为例,输入https://example.com/index.html,访问单页应用。
    效果如下图所示:html

常见问题

  • 部署好应用之后,切换路由能成功渲染,但页面刷新会出现404报错,怎么解决?

    原因可能是配置静态网站托管时,默认首页和默认404页配置有误。请确保默认首页默认404页均配置为index.html

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

    原因可能是配置静态网站托管时,错误文档响应码未配置或配置错误。请确保错误文档响应码配置为200