使用Amazon S3免费服务部署dumi静态站点

之前分享过使用亚马逊云科技提供的免费云服务器搭建个人博客的教程，但是随着前端技术的不断发展，静态站点生成器（SSG）的出现，使得构建静态博客变得更加简单高效。同时，人们对网站性能和安全性的要求也越来越高，静态博客的优势逐渐显现。

静态博客的优势主要有以下几点：

性能卓越：

加载速度快： 静态文件直接从服务器读取，无需数据库查询和服务器端渲染，大大缩短了页面加载时间，提升用户体验。

并发能力强： 静态文件可以被多个服务器同时提供服务，有效应对高并发访问。

安全性高：

攻击面小： 静态网站没有复杂的数据库和服务器端逻辑，减少了被攻击的风险。

不易被入侵： 攻击者难以找到漏洞进行入侵。

易于部署：

部署简单： 只需将生成的静态文件上传到服务器即可，无需复杂的配置。

搜索引擎友好：

利于SEO： 静态页面结构清晰，内容加载速度快，更容易被搜索引擎抓取和索引。

更重要的是静态网站的托管服务可选项很多，大幅度的降低了运营成本，本文就主要介绍如何通过亚马逊云科技提供的免费套餐部署一个入门级的静态网站；当然亚马逊云科技也提供了专门的网站托管服务，详细的内容可以上官网查看。

Amazon S3简介

什么是Amazon S3

官方的解释如下：

Amazon Simple Storage Service（Amazon S3）是一项对象存储服务，在可扩展性、数据可用性、安全性和能效方面业界领先。数百万不同规模和行业的客户可以为几乎任何应用场景存储、管理、分析和保护任意数量的数据，例如数据湖、云原生应用程序和移动应用程序。借助高成本效益的存储类和易于使用的管理功能，您可以优化成本、组织并分析数据，以及配置精细调整过的访问控制，从而满足特定的业务和合规性要求。

其实最主要的就是第一句，它就是一个对象存储服务。

特点

S3是一种对象存储服务，每个数据对象都有唯一的标识符，使得数据管理灵活。它确保了极高的数据耐久性（99.999999999%），并通过在多个设备和区域复制数据来保证高可用性。S3的存储容量可无限扩展，同时提供了安全功能如访问控制、加密和身份验证，以及灵活的访问控制和版本控制功能。通过生命周期管理，可以优化存储成本。S3易于使用，有简单的API和管理控制台，并且全球覆盖，支持快速访问。此外，S3还能与其他AWS服务无缝集成，助力构建复杂应用。

主要应用场景包括备份数据、搭建图床、托管静态网站等。

免费服务

亚马逊云科技提供了很多的免费云服务，S3就是其中一种，但是S3是12个月免费，针对12个月免费，如下图所示，并不是开始启动实例开始计算时间，而是注册账号开始，所以这里要注意不用超时，避免产生不必要的费用。

另外就是这个用量的区别，官网两个地方写了，但是是有出入的，我不清楚是不是因为是套餐区域的区别还是什么原因…

https://aws.amazon.com/cn/free

https://aws.amazon.com/cn/s3/pricing/?loc=ft#AWS_Free_Tier

dumi简介

以下内容来源于官网：https://d.umijs.org/guide

dumi，中文发音嘟米，是一款为组件开发场景而生的静态站点框架，与 father 一起为开发者提供一站式的组件开发体验，father 负责组件源码构建，而 dumi 负责组件开发及组件文档生成。

全新的 dumi 2.0 主要具备以下特性：

🚀 更好的编译性能：通过结合使用 Umi 4 MFSU、esbuild、SWC、持久缓存等方案，带来比 dumi 1.x 更快的编译速度
🔍 内置全文搜索：不需要接入任何三方服务，标题、正文、demo 等内容均可被搜索，支持多关键词搜索，且不会带来产物体积的增加
🎨 全新主题系统：为主题包增加插件、国际化等能力的支持，且参考 Docusaurus 为主题用户提供局部覆盖能力，更强更易用
🚥 约定式路由增强：通过拆分路由概念、简化路由配置等方式，让路由生成一改 dumi 1.x 的怪异、繁琐，更加符合直觉
💡 资产元数据 2.0：在 1.x 及 JSON Schema 的基础上对资产属性定义结构进行全新设计，为资产的流通提供更多可能
💎 继续为组件研发而生：提供与全新的 NPM 包研发工具 father 4 集成的脚手架，为开发者提供一站式的研发体验

部署前准备

亚马逊

确保有一个亚马逊云科技的账号。没有的话，可以参考前一篇文章：0成本起航：用亚马逊免费云服务器搭建个人博客

开发环境

确保正确安装Node.js且版本为 14+ 即可。

node -v
v21.7.3

详细部署指南

创建S3存储桶

以下信息主要来源为Amazon S3官网

在页面顶部的导航栏中，选择当前显示的 AWS 区域的名称。接下来，选择要在其中创建存储桶的区域。

点击创建存储桶

输入存储桶的名称

有关存储桶命名的更多信息，请参阅存储桶命名规则

避免在存储桶名称中包含敏感信息，例如帐号。存储桶名称在指向存储桶中对象的 URL 中可见。

这里是有坑的，如果你需要用域名访问，你就需要把桶的名字改成域名名称；例如，如果注册了域名 www.example-bucket.com，则可以创建一个存储桶 www.example-bucket.com，并添加指向DNS CNAME记录。

配置要禁用或启用 ACL 并控制存储桶中上传的对象的所有权

这里其实默认即可，更多的解释可以参考官网解释控制对象的所有权和禁用存储桶的 ACL

配置公共访问策略

默认情况下，所有四个“阻止公有访问”设置均已启用。这需要把公共访问权限给打开，有关阻止公有访问的更多信息，请参阅阻止对 Amazon S3 存储的公有访问。

后面的配置就使用默认的配置即可，这里不做过多的介绍，然后直接点击创建存储通

如下所示，创建成功

创建静态网站

主要信息来源参考dumi官网

后面我应该会出一篇关于静态网站详细的创建、部署、配置的记录，所以这里不详细记录高级配置之类的内容了；

启动项目的完整命令

选择模板的时候选第一个

# 先找个地方建个空目录。
mkdir myapp && cd myapp

# 通过官方工具创建项目，选择你需要的模板
npx create-dumi

# 选择一个模板
? Pick template type › - Use arrow-keys. Return to submit.
❯   Static Site # 用于构建网站
    React Library # 用于构建组件库，有组件例子
    Theme Package # 主题包开发脚手架，用于开发主题包

# 安装依赖后启动项目
npm start

新建目录后，运行npx create-dumi命令，然后按照提示输入信息即可；

等待创建成功

运行npm start测试：

运行没问题，需要运行npm run build进行打包

打包后的文件就是项目目录下的dist文件夹

配置存储桶启用静态网站托管

OK，完事具备，就差部署了！

启用托管服务

进入存储桶，进入属性页面，滑到最下面，找到静态网站托管，点击配置进入后启用；

启用服务，并配置首页

按照dumi打包的内容，我们分别设为index.html和404.html即可，完了点击保存更改；

查看终端节点的url

还是在属性页面的静态托管配置那查看：

上传网站文件

把打包好的dist目录下的文件全部上传：

配置访问策略

策略示例如下，需要把jmzdumi改为你存储桶的名字：

{"Version":"2012-10-17",
    "Statement":[
    {   "Sid":"PublicReadGetObject",
        "Effect":"Allow",
        "Principal":"*",
        "Action":"s3:GetObject",
        "Resource":"arn:aws:s3:::dumi.minchess.top/*"}
    ]
}

访问上面的终端节点url测试：

大功告成啦，速度也很不错！

自定义域名配置

在DNS服务中新增一条CNAME记录即可

前面说了这里要注意桶的名称，要是和域名不一致就会报错：

以CloudFlare为例：

这里具体怎么用就不在这里赘述了，可以查阅cloudflare的官网教程；

效果如下：

总结

本文详细记录了亚马逊云科技（Amazon Web Services）提供的免费资源如何轻松搭建静态网站。利用Amazon S3的高度耐久性、高可用性、安全性以及易于使用的特性，结合dumi静态站点框架的高效编译、全文搜索和灵活的主题系统，得以快速部署出性能卓越、安全稳固且易于维护的静态网站。此外，AWS的全球覆盖和与dumi的无缝集成，让网站的快速访问和国际化部署成为可能。本文展示了从创建S3存储桶到配置自定义域名的全过程，即使是技术新手也能通过AWS免费套餐以低成本启动并扩展自己的在线项目。