静态网站托管

OSS静态网站托管功能,支持将存储在存储空间(Bucket)中的静态文件(如HTML、CSS、JavaScript等)直接发布为一个公开访问的网站,无需维护传统服务器即可实现高可用网站部署,显著降低运维成本和技术门槛。

托管标准静态网站

适用于传统多页面静态网站(如企业官网、产品展示站)的完整托管部署,提供稳定的在线访问服务。

使用OSS Bucket域名访问HTML文件时,出于安全考虑浏览器会强制下载而非在线预览。要实现网页正常浏览(这是静态网站托管的主要目的),需要绑定自定义域名,具体操作请参见通过自定义域名访问OSS。若Bucket位于中国内地,绑定的域名需要完成ICP备案

步骤一:配置静态网站托管

通过配置默认首页和错误页面,建立网站的基础访问规则,确保用户能够正常浏览网站并在访问异常时获得友好的错误提示。

  1. 前往Bucket列表,单击目标Bucket名称,然后在Bucket左侧菜单栏单击数据管理 > 静态页面

  2. 单击设置,配置以下参数:

    • 默认首页:设置为index.html

    • 子目录首页:根据网站结构选择是否为子目录启用独立首页。

      • 不开通 (默认):适用于无需独立子目录首页的简单网站。选择此项后,所有以正斜杠(/)结尾的URL路径都将返回根目录下的默认首页。

      • 开通:适用于包含多个独立内容版块(如/blog//docs/)且各版块均有独立首页的复杂网站。开通后,需设置文件404规则,用于定义当用户请求一个不存在的文件时系统的响应行为:

        • Redirect (默认)重定向至目录。当请求的文件不存在时,系统会检查其对应目录下是否存在首页。如果存在,则返回一个302重定向响应,浏览器地址栏将更新为目录路径(例如,.../subdir变为.../subdir/)。

        • Index直接返回首页内容。与Redirect类似,但如果找到对应的目录首页,系统会直接返回该首页的内容和200状态码,浏览器地址栏保持不变

        • NoSuchKey直接返回404错误。最严格的规则,只要请求的文件不存在,无论其对应目录下是否有首页,都一律返回404错误。

          文件404规则详细说明

          当子目录首页功能开启后,此规则定义了请求指向不存在对象(Object)时系统的响应行为,确保网站路由访问的正确处理。

          核心机制:对象请求与目录请求的判定

          规则的行为取决于请求URL的结构,特别是其结尾是否包含正斜杠(/):

          • 对象请求:URL不以/结尾,例如.../subdir。系统将其判定为对一个名为subdir的对象的请求。

          • 目录请求:URL/结尾,例如..../subdir/。系统将其判定为对subdir目录下默认首页的请求。

          文件404规则仅在“对象请求”失败(即对象不存在)时被触发。

          规则行为详解

          下表详细说明了当访问一个不存在的对象(例如http://example.com/subdir)时,各规则的具体行为。

          规则

          核心行为

          处理流程

          最终效果 (取决于subdir/index.html是否存在)

          Redirect(默认)

          重定向至目录URL:检查对应目录下是否存在首页,若存在,则返回302重定向响应。

          1. 找不到对象subdir,触发规则。

          2. 检查subdir/index.html是否存在。

          3. 若存在,返回302 FoundLocation头指向.../subdir/;若不存在,返回404 Not Found

          • 存在时:显示首页内容,浏览器地址栏更新为.../subdir/

          • 不存在时:显示404错误页面。

          Index

          直接返回首页内容:检查对应目录下是否存在首页,若存在,则直接返回其内容及200状态码。

          1. 找不到对象subdir,触发规则。

          2. 检查subdir/index.html是否存在。

          3. 若存在,返回该文件内容及200 OK;若不存在,返回404 Not Found

          • 存在时:显示首页内容,浏览器地址栏保持.../subdir不变。

          • 不存在时:显示404错误页面。

          NoSuchKey

          直接返回404错误:不执行任何额外的目录或首页检查。

          1. 找不到对象subdir,触发规则。

          2. 立即返回404 Not Found

          无论是否存在:始终显示404错误页面。

    • 默认404:设置为error.html

    • 错误文档响应码:选择404

  3. 单击保存

步骤二:上传网站文件

将准备好的HTML文件上传到Bucket,为网站提供实际内容。

  1. 下载示例文件html.zip并解压,或使用已有的项目文件。

  2. Bucket左侧菜单栏单击文件管理 > 文件列表

  3. 拖动示例文件或已有项目文件到待上传文件窗口,将文件添加到待上传文件列表后,单击上传文件,完成文件上传。

步骤三:设置Bucket读写权限

配置公共读权限,使网站内容能够被互联网用户正常访问。

重要

公共读权限使Bucket内所有文件对互联网公开可访问,任何知道文件URL的用户都可以直接下载。因此,仅将网站必需的HTML、CSS、JavaScript等公开资源存储在此Bucket中,敏感数据应存储在其他具有访问控制的Bucket内。

  1. 由于创建OSS Bucket时默认开启阻止公共访问功能,该功能会阻止Bucket设置为公共读或公共读写权限,需要先关闭此功能。

    1. Bucket左侧菜单栏单击权限控制 > 阻止公共访问

    2. 单击阻止公共访问开关,在弹窗中输入我确认关闭阻止公共访问,单击确定,关闭阻止公共访问设置。

  2. 设置Bucket读写权限为公共读。

    1. 切换至读写权限页签,单击设置

    2. 选择Bucket ACL公共读,在弹窗中单击继续修改

    3. 单击保存。

步骤四:验证网站配置效果

通过实际访问测试,确认网站托管功能正常运行。

  • 验证首页访问:在浏览器中访问自定义域名(如http://example.com),访问效果如下图所示。

    image

  • 验证404页面:在浏览器中访问不存在的文件(如http://example.com/missing-object),访问效果如下图所示。

    image

托管SPA单页应用

针对单页应用(SPA)提供专门的托管方案,支持前端路由和页面刷新功能,满足现代Web应用的部署需求。

使用OSS Bucket域名访问HTML文件时,出于安全考虑浏览器会强制下载而非在线预览。要实现网页正常浏览(这是静态网站托管的主要目的),需要绑定自定义域名,具体操作请参见通过自定义域名访问OSS。若Bucket位于中国内地,绑定的域名需要完成ICP备案

步骤一:配置单页应用托管

配置单页应用托管的各项参数,针对SPA的路由特性进行优化,确保前端路由能够正常工作。

  1. 前往Bucket列表,单击目标Bucket名称,然后在Bucket左侧菜单栏单击数据管理 > 静态页面

  2. 单击设置,配置以下参数:

    • 默认首页:设置为index.html

    • 子目录首页:选择不开通,此时访问静态网站域名或者域名下任何一个以正斜杠(/)结尾的URL都会返回根目录默认首页。

    • 默认404:设置为index.html(关键配置:让所有路由都重定向到应用入口)。

    • 错误文档响应码:选择200(确保路由跳转返回正确状态码)。

  3. 单击保存

步骤二:上传应用文件

将准备好的单页应用文件上传到Bucket,完成应用部署。

  1. 下载示例应用demo.zip并解压,或使用已有的应用文件。

  2. Bucket左侧菜单栏单击文件管理 > 文件列表

  3. 拖动demo目录下的所有文件或已有应用文件到待上传文件窗口,将所有文件添加到待上传文件列表后,单击上传文件,完成文件上传。

步骤三:设置Bucket读写权限

重要

公共读权限使Bucket内所有文件对互联网公开可访问,任何知道文件URL的用户都可以直接下载。因此,仅将网站必需的HTML、CSS、JavaScript等公开资源存储在此Bucket中,敏感数据应存储在其他具有访问控制的Bucket内。

配置公共访问权限,使单页应用能够被用户正常访问。

  1. 关闭Bucket阻止公共访问功能。

    1. Bucket左侧菜单栏单击权限控制 > 阻止公共访问

    2. 单击阻止公共访问开关,在弹窗中输入我确认关闭阻止公共访问,单击确定,关闭阻止公共访问设置。

  2. 设置Bucket读写权限为公共读。

    1. 切换至读写权限页签,单击设置

    2. 选择Bucket ACL公共读,在弹窗中单击继续修改

    3. 单击保存。

步骤四:验证应用部署效果

通过实际访问测试,确认单页应用部署成功并能够正常处理路由跳转。

  • 验证首页访问:在浏览器中访问自定义域名(如http://example.com)访问单页应用,访问效果如下图所示。

    image

  • 验证404页面:在浏览器中访问不存在的文件(如http://example.com/missing-object),请求被重定向到应用入口,并返回200 OK。访问效果如下图所示。

    image

应用于生产环境

为了确保静态网站在生产环境中稳定运行并提供良好的用户体验,需要进行一系列安全性和性能优化配置。

最佳实践

  • 安全传输:启用HTTPS访问

    现代浏览器对HTTP网站显示"不安全"警告,搜索引擎对HTTPS网站给予更高的SEO评分。为绑定的自定义域名实现HTTPS访问,强制使用HTTPS访问。HTTPS协议通过TLS/SSL加密传输数据,防止数据在传输过程中被窃取或篡改,提升网站安全性和用户信任度。

  • 性能优化:配置CDN加速

    静态网站面向全球用户或大量并发访问时,可通过配置CDN加速,将内容缓存到全球边缘节点,显著提升访问速度并降低OSS流量成本。

  • 跨域访问:配置CORS规则

    单页应用通常需要调用后端API或访问第三方资源,会遇到浏览器同源策略限制。通过配置跨域规则,设置允许的请求来源、方法和头信息,确保前端应用能够正常访问所需的API服务和外部资源。

  • 版本管理:实现发布与回滚

    生产环境需要支持快速发布新版本和紧急回滚能力。启用OSS版本控制功能,结合自动化部署工具(如Jenkins),实现持续集成和持续部署的完整工作流,提高发布效率和系统稳定性。

风险防范

  • 流量盗用防护:配置防盗链规则

    静态资源被其他网站直接引用会产生额外的流量费用和服务器负载。通过配置Referer防盗链,设置允许访问的域名白名单,有效防止恶意网站盗用带宽资源并控制运营成本。

  • 访问监控:启用访问日志

    生产环境需要完整的访问记录用于安全审计、性能分析和故障排查。启用实时日志查询,记录所有访问请求的详细信息,便于识别异常访问模式、分析用户行为和优化网站性能。

常见问题

单页应用部署后刷新页面出现404错误如何解决?

单页应用的所有路由都由前端JavaScript处理,当直接访问或刷新非首页路由时,服务器找不到对应的物理文件。解决方法是将默认404设置为index.html错误文档响应码设置为200,这样所有"不存在"的路径都会重定向到应用入口,由前端路由正确处理。

如何关闭静态网站托管功能?

  1. 前往Bucket列表,单击目标Bucket名称,然后在Bucket左侧菜单栏单击数据管理 > 静态页面

  2. 单击设置,清空默认首页默认404配置,单击保存,即可关闭静态网站托管功能。

静态网站是否支持动态内容?

静态网站托管只支持客户端执行的静态内容,包括HTML、CSS、JavaScript等。不支持服务器端动态语言(如PHP、Python、Java)。如需动态功能,可以采用前端框架的客户端渲染技术,或结合阿里云函数计算等无服务器服务实现后端API调用。