使用React及静态网站托管功能部署单页应用

什么是单页应用

单页应用是一种只有一个Web页面的网络应用程序。通过动态重写当前页面与用户交互，避免页面切换中断用户体验，使其更像桌面应用程序。单页应用的所有必要代码（HTML、JavaScript和CSS）在初次加载时检索，或根据用户操作动态加载资源。

前提条件

• 已安装Node.js SDK。

• 已创建Bucket。本教程以创建名为examplebucket的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文件如下图所示：

6. 调试并预览检查无误后，执行以下命令打包生产环境代码。

   npm run build

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

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

1. 登录OSS管理控制台。

2. 单击Bucket列表，然后单击examplebucket。

3. 在左侧导航栏，选择数据管理 > 静态页面。

4. 在静态页面，单击设置，按如下说明配置各项参数。

   参数	说明
   默认首页	默认首页是您通过浏览器访问静态网站域名时，OSS返回的网站首页。此处设置为index.html。
   子目录首页	根据实际业务需求选择开通或不开通。 开通后，访问根域名下以正斜线（/）结尾的URL时会返回对应目录的默认首页。 不开通时，访问根域名或任何以正斜线（/）结尾的URL都会返回根目录默认首页。
   文件404规则	选择Redirect。
   默认404页	访问Bucket内文件出现404错误时，OSS返回的错误页面。当前配置用于前端单页应用，请将默认404页也配置为应用入口，即与默认首页相同的index.html。
   错误文档响应码	配置返回错误文档时的HTTP响应码为200。

   开通子目录：

5. 单击保存。

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

1. 单击Bucket列表，然后单击examplebucket。

2. 在左侧导航栏，选择文件管理>文件列表。

3. 在文件列表页面，单击上传文件。

4. 在上传文件面板，按以下说明配置各项参数，其他参数保留默认配置。

   参数	说明
   上传到	选中当前目录。
   文件ACL	设置文件读写权限ACL为公共读。
   待上传文件	单击扫描文件夹，选中React生成的spa-demo项目中build目录下的所有文件。 重要 仅上传build目录下的所有文件到Bucket根目录，不需要上传build目录。否则，通过自定义域名访问单页应用时，路径解析可能会出错，导致无法正常跳转。

5. 单击上传，然后在上传列表页签查看上传进度。上传完成后，您可以在examplebucket的文件列表下找到名为index.html文件。

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

1. 打开浏览器。

2. 本教程以自定义域名example.com为例，输入https://example.com/index.html，访问单页应用。

   效果如下图所示：

常见问题

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

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

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

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

• 静态网站设置之后文件直接下载怎么办？

  您可以配置访问OSS文件时是预览行为。