随着互联网的不断发展，许多公司和个人都需要搭建自己的网站。然而，对于初学者和小型团队而言，搭建一个静态网站的成本和难度都比较高。为了解决这个问题，我们可以尝试使用 Serverless 架构快速部署一个静态网站，从而实现快速部署和便捷管理的目标。
什么是 Serverless 架构？
Serverless 架构，也被称为无服务器架构，是一种云计算架构。在 Serverless 架构中，使用者不需要关心运行自己代码的服务器，因为云服务提供商会自动管理服务器资源。使用者只需要编写代码并上传至云端，云服务提供商会负责部署、扩展、维护和监控代码运行。这种方式可以减少服务器管理的工作量，并节省一定的运营成本。
Serverless 架构与静态网站
静态网站不需要在服务器上动态生成网页内容，而是直接通过 HTML、CSS、JavaScript 文件在前端渲染页面。因此，部署静态网站时只需要将页面文件存储在服务器上，并确保页面可以被访问就可以了。而 Serverless 架构可以提供快速、便捷的文件存储和分发服务，因此可以被用于部署静态网站。
我们可以使用云服务提供商的静态文件托管、对象存储等服务，来快速部署一个静态网站。下面以阿里云 OSS 服务为例，简单介绍如何快速部署一个静态网站。
1. 搭建静态网站
首先，我们需要准备好一个静态网站，即包含 HTML、CSS、JavaScript 等文件的文件夹，可以通过本地搭建或者从 GitHub 上克隆一个现成的静态网站。为了便于演示，这里我们克隆了一个简单的静态网站仓库 https://github.com/ruanyf/simple-birthday-card。
2. 创建 OSS Bucket
在阿里云 OSS 控制台中，我们可以创建一个 Bucket 用于存储静态网站页面文件。创建 Bucket 的时候需要选择地域和存储类型，根据实际需求选择即可。
3. 上传静态网站
在创建好的 Bucket 中，选择“文件管理”选项卡，点击“上传文件”按钮，将之前准备好的静态网站文件夹上传至 OSS。
4. 配置 Bucket
选择刚刚上传的文件夹，点击“管理”按钮，选择“静态页面托管”选项卡。在该选项卡中，我们可以设置静态网站中的默认首页与错误页面，并获取网站的访问链接。
5. 配置 CDN （可选）
如果需要更快速、更安全的静态文件分发服务，可以在阿里云 CDN 控制台中添加该 Bucket 的加速域名，并配置 SSL 证书、防盗链等加速策略。
示例代码
为了演示如何使用 Serverless 架构快速部署静态网站，这里提供了一份基于 Node.js 的上传静态网站文件到阿里云 OSS 的示例代码。该代码使用阿里云 OSS SDK 实现上传功能，可以帮助我们快速地将本地静态网站文件夹上传至 OSS。具体实现步骤如下：
- 使用
npm安装阿里云 OSS SDK：npm install ali-oss --save - 创建一个用于上传静态网站的脚本文件，并读取配置好的阿里云 OSS 配置信息。
- 使用
ali-oss客户端，连接 OSS 服务，写一个上传函数，将本地静态网站文件夹上传至 OSS。
const OSS = require('ali-oss');
const path = require('path');
// 读取阿里云 OSS 配置文件
const config = require('./config.json');
// 连接 OSS 客户端
const client = new OSS({
accessKeyId: config.accessKeyId,
accessKeySecret: config.accessKeySecret,
bucket: config.bucket,
region: config.region
});
// 上传静态网站文件夹至 OSS
function uploadDir(dirPath) {
const dirName = path.basename(dirPath) + '/';
client.useBucket(config.bucket);
return client.put('/', Buffer.from(''))
.then(() => client.get('/', { subres: { 'x-oss-delete': 'true' } }))
.then(result => {
const objects = result.objects || [];
const delObjects = objects.filter(v => v.name !== dirName).map(v => ({ key: v.name }));
if (delObjects.length) {
return client.deleteMulti(delObjects);
}
return [];
})
.then(() => client.put(encodeURI(dirName), '', {
headers: { 'x-oss-object-acl': 'public-read' }
}))
.then(() => client.putDir(dirName, dirPath))
.then(() => console.log(`静态网站已成功上传至 OSS！`))
.catch(err => console.error(`上传失败：${err.message}`));
}
const dirPath = process.argv[2];
if (!dirPath) {
console.error('请输入要上传的静态网站文件夹路径！');
} else {
uploadDir(dirPath);
}在命令行中执行 node upload.js [path] 即可上传静态网站至阿里云 OSS。
总结
使用 Serverless 架构部署静态网站，可以大大提升网站部署和管理的效率。本文以阿里云 OSS 服务为例，详细阐述了快速部署静态网站的步骤，并提供了基于 Node.js 的上传示例代码。当然，除了阿里云之外，其他云服务提供商也都支持类似的 Serverless 架构服务。我们可以根据自己的需求和实际情况选择合适的服务商和解决方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b5ac3eadd4f0e0ffe6c52c