如何在 Serverless 架构下设置静态网站

随着 Serverless 发展至今,越来越多的网站在部署时选择 Serverless 架构,其中静态网站是最为常见的类型。相比于传统服务器架构,Serverless 架构有着更高的可扩展性、高可靠性、更低的成本以及更短的上线时间。本文将详细介绍如何在 Serverless 架构下设置静态网站,包括如何将静态网站部署到 Amazon Web Services – AWS Lambda 和 Amazon S3 上,为涉及到的各类技术以及操作过程提供深度和学习以及指导意义。

Serverless 架构中的静态网站部署

静态网站是只由前端代码组成的网站,其中不包含任何服务器端的代码,因此静态网站可以非常方便地部署到 Serverless 架构上。Serverless 架构中,两个最常用的托管选项是 AWS Lambda 和 Amazon S3。

AWS Lambda

AWS Lambda 是一种事件驱动的计算服务,可以让您运行代码作为响应特定事件,例如 HTTP 请求、文件上传、数据库写入等等。因此,AWS Lambda 是一种可用于设置静态网站的 Serverless 架构。

AWS Lambda 来部署静态网站的基本思路是将静态网站的所有代码打包成 zip 文件,并将其通过 AWS CLI 或者 AWS 的 console 管理工具上传到 AWS Lambda 中。Lambda 会自动解压上传的 zip 文件并将代码部署到所需的存储桶中,接着您可以配置 API Gateway 触发器,将 Lambda 与 API Gateway 绑定并为其分配一个可访问的 URL,所有的前端代码都将从这个 URL 访问和下载。

一个典型的 AWS Lambda 部署静态网站的例子如下:

  1. 打包静态网站的所有代码

我们假设您的静态网站代码存在于 my-static-site 目录下,那么您可以使用如下命令打包所有代码:

-- --------------
--- -- ------------------ -

这会生成一个名为 my-static-site.zip 的压缩包,其中包含了所有的静态网站代码。

  1. 将静态网站上传到 AWS Lambda

接下来,使用 AWS CLI 工具将 my-static-site.zip 压缩包上传到 AWS Lambda 中:

--- ------ --------------- --------------- -------------- -
---------- -------------------------- -
--------- ---------- --------- ---------- -
------ ---------------------

上述命令会创建并部署一个名为 my-static-site 的函数,其中:

  • function-name:指定创建的 Lambda 函数的名称。
  • zip-file:指定上传的压缩包的路径。
  • handler:指定入口文件的文件名。
  • runtime:指定 Lambda 执行时的运行环境。
  • role:指定 Lambda 执行的 IAM 角色。
  1. 配置 API Gateway 触发器

接下来,需要配置 API Gateway 触发器,将 Lambda 与 API Gateway 绑定,并为其分配一个可访问的 URL。具体步骤如下:

  • 在 AWS 控制台中打开 API Gateway 服务。
  • 创建 REST API,并将其命名为您的网站名称(例如 my-static-site)。
  • 创建一个新的资源 /,并在该资源下创建一个 GET 方法,将其与 Lambda 函数绑定。
  • 配置 API Gateway 和Lambda 之间的集成,以便在 API Gateway 接收到 GET 请求时,将调用 Lambda 函数。
  • 部署 API Gateway 以使其在 Internet 上可用,
  • 验证您的网站是否可以通过网关 URL 访问。

至此,您已成功地将静态网站部署到 AWS Lambda 和 API Gateway 上,网站的地址将是API Gateway 分配的 URL。

Amazon S3

除了 AWS Lambda,Amazon S3 也是 static website hosting 方面的专业服务。同样是无需服务器的静态内容服务,其提供了非常简单快捷的方式来部署您的网站。

Amazon S3 部署静态网站的基本思路是将您完整的网站代码上传到 S3 存储桶中,并在 S3 存储桶设置中启用静态网站托管。通过此方式,所有来自 Internet 的 HTTP/HTTPS 请求,都将自动转接到托管网站的 S3 存储桶中。

Amazon S3 部署静态网站的步骤如下:

  1. 登录 AWS 控制台,进入 Amazon S3 服务界面。

  2. 创建一个 S3 存储桶,并指定该存储桶托管您的网站。

  3. 将您的网站文件上传到 S3 存储桶中。

  4. 配置您的 S3 存储桶,以便正常托管静态网站。

完成上述步骤后,您的静态网站就已经成功托管在 Amazon S3 中了。

总结

本文主要介绍了如何在 Serverless 架构下设置静态网站,包括部署到 AWS Lambda 和 Amazon S3 上。无论您选择哪种方式,都可以使用 Serverless 架构来快速、便捷地部署您的静态网站。这对于对于想要建立自己的新网站或者在互联网上展示照片或者做托管一些 HTML、CSS 和 JavaScript 代码的时候会非常有帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64a04dd348841e9894ca34b2


猜你喜欢

  • SASS 开发中的组件划分技巧

    SASS 开发中的组件划分技巧 SASS 是一种强大的 CSS 预处理器,它可以让前端开发者更加轻松地管理 CSS 样式。在实际开发中,我们经常会使用 SASS 来构建复杂的组件,但是如何正确地划分组...

    1 年前
  • 使用 Custom Elements 开发组件时注意事项及技巧

    什么是 Custom Elements Custom Elements 是一组 API,提供了一种在浏览器中创建自定义元素的方法。通过这些 API,开发者可以创建出自定义的 HTML 标签,并在应用中...

    1 年前
  • Promise 实现异步操作,解决回调地狱问题

    前言 在前端开发中,我们经常会用到各种异步操作,例如 AJAX、setTimeout 等。在处理多个异步操作时,我们往往需要使用回调函数,但是多层嵌套的回调函数会导致代码难以维护,形成所谓的“回调地狱...

    1 年前
  • ECMAScript 2020 中的字符串扩展和 trimStart/trimEnd 方法

    在 ECMAScript 2020 中,字符串扩展以及新的 trimStart 和 trimEnd 方法被引入,在前端开发中非常实用。这些新特性不仅可以优化代码,还可以提高程序的性能。

    1 年前
  • RESTful API中的REST和SOAP协议对比

    近年来,随着Web 2.0的发展和云计算技术的普及,REST(Representational State Transfer)和SOAP(Simple Object Access Protocol)变...

    1 年前
  • 如何快速入门 Angular 7?

    Angular 7 是一款现代的前端框架,它以 TypeScript 为基础语言,提供了许多用于构建复杂应用程序的工具和组件。如果你想快速掌握 Angular 7,那么本文为你提供了以下几个步骤。

    1 年前
  • Kubernetes 中调度错误导致 Pod 无法正常启动的解决思路

    Kubernetes 是一款开源的容器调度管理平台,能够自动化地部署、扩展和管理容器化应用程序。并且,Kubernetes 更是一个支持多种容器运行时的平台,包括 Docker、rkt、CRI-O 等...

    1 年前
  • Koa2 开发中的分页处理及封装

    在 Web 应用程序的开发中,分页是非常常见的需求。Koa2 是一款 Node.js 的 Web 框架,使用 Koa2 进行开发时,如何实现分页功能?本文将提供详细的分页处理方法和封装方式,使得读者可...

    1 年前
  • Sequelize 使用过程中如何进行数据合并与去重

    介绍 Sequelize 是一个基于 Node.js 的 ORM 框架,用于操作关系型数据库。它简单易用,可以让开发者通过 JavaScript 的方式来操作数据库,无需写 SQL 语句。

    1 年前
  • 如何在 Nuxt.js 中使用 LESS 进行全局样式设置

    在前端开发中,样式设置是一个非常重要的方面。在 Nuxt.js 中使用 LESS 进行全局样式设置可以帮助我们更加方便地管理样式文件,并且可以提高开发效率。在本文中,我将详细介绍如何在 Nuxt.js...

    1 年前
  • 如何优化 Redis 的内存使用率?

    Redis 是一个流行的开源内存数据库,它被广泛应用于前端技术栈中的数据缓存、消息队列、会话存储等场景。然而,由于 Redis 的数据完全保存在内存中,如果处理不当,就会导致 Redis 的内存使用率...

    1 年前
  • 使用 C++11 的高性能编程技巧

    C++11 是 C++ 语言的一个重要版本,它引入了许多新特性,包括语言特性、标准库功能等。这些新特性让 C++ 语言更加易用、高效、安全,也让 C++ 成为了一种非常适合编写高性能程序的语言。

    1 年前
  • 十七条有关 JavaScript 调试的做法

    在前端开发过程中,调试 JavaScript 代码是必不可少的环节。但是,有时候我们会遇到一些比较麻烦的问题,比如出现莫名其妙的错误、页面渲染不对等等。这个时候,我们需要一些高效的 JavaScrip...

    1 年前
  • 了解 Server-Sent Events 和 EventSource API

    了解 Server-Sent Events 和 EventSource API 简介 Server-Sent Events (SSE) 是一个 HTML5 规范定义的 API,它允许服务器实时向客户端...

    1 年前
  • ES8 中的 Async 函数与 JavaScript 异步编程的比较分析

    在前端开发中,异步编程是一个非常重要的话题。在 JavaScript 中,异步编程可以使用回调函数、Promise 和 Async 函数等方式来实现。本文将重点分析 ES8 中的 Async 函数与 ...

    1 年前
  • Fastify 如何实现输入验证和数据校验?

    Fastify 是一个快速、低开销且极简的 web 框架,它可以帮助 web 开发者更轻松、更高效地构建 web 应用程序。除了速度和性能之外,Fastify 还提供了许多有用的功能,比如说输入验证和...

    1 年前
  • CSS Flexbox 实现多列布局的技巧及实践

    什么是 CSS Flexbox? CSS Flexbox 是一种用于布局的弹性盒子模型,它可以让开发者更加容易地实现各种复杂布局,包括等高、响应式、顶部固定、底部固定以及垂直居中等,而不需要使用传统的...

    1 年前
  • 使用 Socket.io 实现多房间即时通讯

    前言 在 Web 开发中,如果实现即时通讯功能,通常会使用 WebSocket 进行实现。但在某些情况下,WebSocket 可能无法满足需求,例如如果需要实现多房间聊天室的功能,就需要考虑如何处理多...

    1 年前
  • 统一清除浮动方法 - CSS Reset

    在前端开发中,页面布局排版经常需要用到浮动,但是使用浮动可能会出现父元素高度塌陷等问题,为了解决这些问题,我们需要使用清除浮动的方法,本文将介绍一种较为常用和可靠的 CSS Reset 方式。

    1 年前
  • 基于 Headless CMS 的互动直播技术实现

    前言 随着互联网技术的不断演进,直播技术已经成为了一种趋势,越来越多的企业和个人开始利用直播技术进行营销、宣传、教育等方面的活动。而直播技术也随着需求的不断增加逐渐从传统的单向播放逐渐转变为互动直播。

    1 年前

相关推荐

    暂无文章