体验阿里云OSS部署静态网站

Posted by on October 25, 2021 · 1 min read

背景

静态页面托管服务国外其实有很多，比如：Github Pages，Cloudflare Pages等，但是国内访问有时连接不稳定，加载不到或者访问速度很慢。OSS是阿里云的对象存储服务，可以用来存储图片、音频、视频等各种类型文件，也可以存储HTML格式文件，理论上说访问速度应该比较快。

体验

创建Bucket

创建一个公共读的Bucket：

  1. 登录OSS管理控制台
  2. 单机Bucket列表，创建Bucket
  3. 创建Bucket面板配置参数：
    • 设置Bucket名称，例如examplebucket
    • 地域，例如 华东1（杭州）
    • 存储类型，选择标准存储
    • 读写权限，选择公共读

创建网页文件并上传

您需要创建静态网站首页和404错误页面的网页文件，并上传至目标Bucket。

本地创建两个HTML格式文件 默认首页

<html>
    <head>
       <title>Hello OSS!</title>
       <meta charset="utf-8">
    </head>
    <body>
       <p>开始阿里云OSS托管</p>
       <p>这是索引页面</p>
    </body>
</html>

默认404页

<html>
<head>
   <title>Hello OSS!</title>
   <meta charset="utf-8">
</head>
<body>
   <p>这是404错误页面</p>
</body>
</html>

将网页文件上传到目标Bucket

  1. 登录OSS管理控制台
  2. 单击Bucket列表，然后单击目标Bucket
  3. 单击文件管理，然后单击上传文件
  4. 在上传文件面板的上传文件区域，单击直接上传并选中刚刚创建的两个网页文件。其他参数均保持默认配置

配置静态网站托管

  1. 单击基础设置 > 静态页面
  2. 单击设置，将index.html设置为默认首页；将error.html设置为默认404页。
  3. 单击保存

绑定自定义域名

现在，您已有了根域名example.com和名为examplebucket的Bucket，接下来您需要将域名绑定到Bucket，以便能够使用您的域名访问Bucket。

  1. 在Bucket管理页面，单击传输管理 > 域名管理。
  2. 单击绑定域名。
  3. 在域名文本框输入example.com，并打开自动添加CNAME记录开关。
  4. 单击确定。

测试网站

在浏览器中访问以下URL以验证网站是否正常运行：

  • 访问静态网站首页http://example.com，配置正确时显示如下页面：
  • 访问Bucket中不存在的文件http://example.com/example.txt，配置正确时显示如下页面：

参考

← Previous Post Next Post →