aws s3 静态网站

S3 and CloudFront are AWS cloud services that make serving static assets powerful and cheap. How can we host a simple static website or JAMstack app on it?

S3和CloudFront是AWS云服务，使服务静态资产功能强大且价格便宜。 我们如何在其上托管简单的静态网站或JAMstack应用程序？

  • A little about AWS

    关于AWS的一些知识

  • What are the benefits of serving from S3 and CloudFront?

    从S3和CloudFront提供服务有什么好处？

  • Before we start, you’ll need an AWS account

    在开始之前，您需要一个AWS账户

  • Storing your website on S3

    在S3上存储您的网站

  • Serving your website on S3

    在S3上服务您的网站

  • Distributing your website on CloudFront

    在CloudFront上分发您的网站

  • Custom domain names

    自定义域名

  • Advanced AWS Usage

    高级AWS使用

  • Resources

    资源资源

关于AWS的一些知识 (A little about AWS)

If you’re not familiar, AWS (Amazon Web Services) is a cloud service provider that gives developers opportunities to build pretty much anything they can imagine in the cloud.

如果您不熟悉， AWS (Amazon Web Services)是云服务提供商，它为开发人员提供了构建几乎所有他们可以在云中想象的东西的机会。

Though their services extend beyond the likes of machine learning and artificial intelligence, we’re going to stick with the entry level services for the purpose of this guide that will allow us to easily host an HTML website.

尽管它们的服务不仅仅局限于机器学习和人工智能 ，但出于本指南的目的，我们将继续使用入门级服务，这将使我们能够轻松托管HTML网站。

Building a site with S3 and CloudFront is a common recipe that small and high scale companies across the web use, but let’s break down what each service actually does.

使用S3和CloudFront构建站点是小型和大型公司在网络上使用的常见方法，但是让我们分解一下每个服务的实际作用。

使用S3进行对象存储 (Object storage with S3)

S3 (Simple Storage Service) acts as your hosting for your static website. Think of it like a hard drive in the cloud which we’re not able to use it for processing purposes, but rather for simple file storage and access.

S3 (简单存储服务)充当静态网站的托管。 可以将其视为云中的硬盘驱动器，我们无法将其用于处理目的，而仅用于简单的文件存储和访问。

When an app or website is compiled in static form, this is all we need to serve it to the people visiting our site. The HTML is sent in the initial request “as is” (unless there’s processing with your provider) and any additional work occurs after the page loads in the browser usually by JavaScript. This allows us to take this simple (and cheap) approach by serving these files from S3.

当应用或网站以静态形式编译时，这就是我们需要将其提供给访问我们网站的人们的全部条件。 HTML是在初始请求中“按原样”发送的(除非提供者正在处理)，并且通常在JavaScript将页面加载到浏览器中之后，才会进行其他工作。 这使我们能够通过从S3提供这些文件来采用这种简单(且便宜)的方法。

使用CloudFront的内容交付网络 (Content Delivery Network with CloudFront)

CloudFront works as a CDN (Content Delivery Network) that sits in front of your website, caching the files, and serving them directly to the people visiting your site.

CloudFront充当CDN (内容交付网络)，它位于您网站的前面，缓存文件，并将其直接提供给访问您网站的人。

Where you host and serve your website from, typically called the origin, is the main source of your files and can serve the website itself. But putting a CDN in front of it provides the people accessing your content a shorter and faster way to make their request.

文件的主要来源是托管和服务网站的来源(通常称为来源)，并且可以为网站本身提供服务。 但是将CDN置于其前面，可以使访问您内容的人们以更短，更快的方式提出他们的请求。

从S3和CloudFront提供服务有什么好处？ (What are the benefits of serving from S3 and CloudFront?)

Given the rise in the JAMstack era, many services are popping up that provide similar services for static sites that make it really easy to deploy. Some even come with a generous free tier like Netlify and Zeit!

鉴于JAMstack时代的兴起， 涌现了许多服务，它们为静态站点提供了类似的服务，从而使其真正易于部署。 有些甚至带有慷慨的免费套餐 ，例如Netlify和Zeit ！

But sometimes developers need a little bit more control over their services or they need to integrate into a larger cloud pipeline that’s already 99% percent in AWS, which is exactly where S3 shines. Also, chances are, during your first year you might still qualify for AWS’s free tier.

但是有时开发人员需要更多地控制他们的服务，或者他们需要集成到更大的云管道中，该管道在AWS中已经占99％，这正是S3的亮点。 此外，很有可能在您的第一年中，您仍然有资格获得AWS的免费套餐 。

适应AWS架构完善的框架 (Fitting in to the AWS Well-Architected Framework)

As a lead provider in cloud services, AWS has published many guides to help developers and teams strive for excellence in their solutions in terms of performance, cost, and security.

作为云服务的领先提供商，AWS已发布了许多指南，以帮助开发人员和团队在性能，成本和安全性方面寻求卓越的解决方案。

One particular guideline is their 5 pillars of what they describe as a “well-architected" infrastructure.

其中一个特定的指导原则是其所谓的“结构完善”的基础架构的5个Struts。

By default, we check all of these boxes with our hosting solution by using S3 and CloudFront. Out of the box, the HTML and assets you serve will be fast, cheap, secure, and reliable.

默认情况下，我们使用S3和CloudFront在我们的托管解决方案中选中所有这些框。 开箱即用，您提供HTML和资产将快速，廉价，安全和可靠。

静态和JAMstack网站的美丽 (The beauty of static and JAMstack sites)

Building on top of the pillars, what you’re actually serving is a static HTML file and group of assets that won’t require any type of rendering resources on the initial request. Before this, a common problem was having to worry about a site crashing due to heavy load. But with S3 and CloudFront, your website is infinitely scalable.

在Struts之上构建的服务，实际上是一个静态HTML文件和一组资产，这些资产在初始请求时不需要任何类型的渲染资源。 在此之前，一个常见的问题是必须担心由于高负载而导致站点崩溃。 但是使用S3和CloudFront，您的网站可以无限扩展。

On a similar note, when that server scales up as it's trying to serve millions of hits on your post that went viral, so will your costs. Serving a static site is cheap and can greatly reduce the cost associated with running a web server.

与此类似，当该服务器尝试为病毒式传播的帖子提供数百万次点击时，如果该服务器规模扩大，那么您的费用也将随之增加。 为静态站点提供服务很便宜，并且可以大大降低与运行Web服务器相关的成本。

在开始之前，您需要一个AWS账户 (Before we start, you’ll need an AWS account)

To work through this guide, you’ll need an AWS account. Luckily, it's free to create an account – you’ll only pay for the services used.

要完成本指南，您需要一个AWS账户。 幸运的是，创建帐户是免费的-您只需为使用的服务付费。

On top of that, AWS provides a generous free tier for some of its services. Some services provide only 12 months of a free tier (like S3) where others are always eligible for the free tier (like Lambda), so make sure to do your homework so you don’t rack up an unexpectedly high bill.

最重要的是，AWS为某些服务提供了免费的免费套餐。 某些服务仅提供12个月的免费套餐(如S3)，而其他服务始终有资格享受免费套餐(如Lambda )，因此请务必做功课，以免产生意想不到的高额账单。

To create your account, head over to the AWS website and then continue on to get started: https://aws.amazon.com/.

要创建您的账户，请转到AWS网站，然后继续入门： https : //aws.amazon.com/ 。

在S3上存储您的网站 (Storing your website on S3)

To get started, we’re going to begin with a simple HTML file that will serve as our website. This will allow us to focus more on the process of hosting rather than the intricacies of the website itself.

首先，我们将从一个简单HTML文件开始，它将作为我们的网站。 这将使我们更加专注于托管过程，而不是网站本身的复杂性。

创建我们的网站文件 (Creating our website file)

Begin by creating a new folder called my-static-site. Inside that folder, let's create a new file called index.html and add the following to the file:

首先创建一个名为my-static-site的新文件夹。 在该文件夹内，让我们创建一个名为index.html的新文件，并将以下内容添加到该文件中：

<!DOCTYPE html>
<html lang=“en”>
<head><meta charset=“UTF-8”><meta name=“viewport” content=“width=device-width, initial-scale=1.0”><title>My Static Website</title>
</head>
<body><h1>Hello World!</h1><p>This is my static website. 												


											

aws s3 静态网站_如何将静态网站或JAMstack应用托管并部署到AWS S3和CloudFront相关推荐
	

    
								
  1. 学习java的中文网站_学习java的网站有哪些
		
    1.Stack overflow Stack可能是编程界中非常流行的网站了 , 是一个与程序相关的 IT 技术问答网站,用户可以在网站免费提交问题,浏览问题,索引相关内容,在创建主页的时候使用简单的  ...
    
		
    2. 
						
  2. 十个程序员必备的网站_程序员必备网站之一：VisuAlgo
		
    大家好,我是小 G. 我们都知道,在人体的直接感官体验上,动画与图形相对于文字代码往往能带来更有冲击感的视觉效果,也更容易加深大脑对某项事物的认知程度. 而像算法这类,拥有完整逻辑推理计算链条的知识, ...
    
		
    3. 
						
  3. 编辑器生成静态网页_不使用静态网站生成器的7个理由
		
    编辑器生成静态网页 Trending posts on SitePoint today: 今天在SitePoint上的热门帖子: 7 Ways to Make WordPress Simpler fo ...
    
		
    4. 
						
  4. node.js 静态属性_如何使用静态站点和Node.js开发和部署第一个全栈式Web应用程序
		
    node.js 静态属性 This tutorial will show you how to convert a static website that uses HTML, CSS and Jav ...
    
		
    5. 
						
  5. java jsp取静态常量_获取java静态
		
    Android NDK开发系列教程4:对类变量进行操作 终于建了一个自己个人小站:https://huangtianyu.gitee.io,以后优先更新小站博客,欢迎进站,O(∩_∩)O~~ 通常我们 ...
    
		
    6. 
						
  6. 静态路由_配置IPv4静态路由
		
    组网需求 如图1所示,属于不同网段的主机通过几台Switch相连,要求不配置动态路由协议,使不同网段的任意两台主机之间能够互通. 图1 配置IP静态路由组网图 配置思路 采用如下的思路配置IPv4静态 ...
    
		
    7. 
						
  7. 极路由添加静态路由表_如何将静态TCP / IP路由添加到Windows路由表
		
    极路由添加静态路由表 In some specific types of environments, you might find it useful to add a static route to ...
    
		
    8. 
						
  8. 静态原型_如何在静态，低保真和高保真原型之间做出选择
		
    静态原型 现代技术设计要求高度的交互性:导航栏随用户的滚动位置而变化,单击框展开以显示和隐藏支持信息,将列表拖放到重新排序等.设计人员必须考虑到所有可能的用户交互来在他们的产品中创建最简化,最直观的用 ...
    
		
    9. 
						
  9. 宝塔如何备份网站_学习织梦网站必需会的一件事：织梦网站数据备份
		
    任务:宝塔面板织梦网站备份 织梦CMS程序运行环境:PHP+MySQL 所以无论是备份还是还原,都涉及2个部分,一个是web文件的备份,一个是数据库的备份. 做好数据备份是站长管理员和维护人员的基本操 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. Android实战——第三方服务之Bmob后端云的推送服务的集成和使用（三）
		
    2. 
						
  2. SAP NetWeaver平台介绍
		
    3. 
						
  3. 机器学习面试题(part2)
		
    4. 
						
  4. mysql 分词搜索_实战 | canal 实现Mysql到Elasticsearch实时增量同步
		
    5. 
						
  5. 怎么撤回操作_微信又更新，拍一拍能撤回了
		
    6. 
						
  6. 深入探究ConvNets vs. Transformers，哪种预训练模型的可迁移性更好？
		
    7. 
						
  7. c语言的point函数,C语言中friend友元函数详细解析
		
    8. 
						
  8. Python新手学习基础之数据类型——字符串的切片截取
		
    9. 
						
  9. c#基础数据操作之遍历DataTable并输出
		
    10. 
						
  10. BZOJ4559 JLOI2016成绩比较（容斥原理+组合数学+斯特林数）
		
    11. 
						
  11. Qt 点击任意子控件，背景选中 选中背景
		
    12. 
						
  12. 即时通讯源码对企业到底有多重要呢？
		
    13. 
						
  13. Jade win10 安装教程
		
    14. 
						
  14. 19年12月英语六级第一套听力单词
		
    15. 
						
  15. zblog自动采集伪原创站群文章更新器
		
    16. 
						
  16. 一致性检验评价方法kappa
		
    17. 
						
  17. Python 一百多行实现抢票助手
		
    18. 
						
  18. window10笔记本安装USB转VGA驱动，电脑重启后无法开机
		
    19. 
						
  19. app小程序手机端Python爬虫实战10xpath定位方式
		
    20. 
						
  20. “革命者”贝壳找房：如何让房产经纪行业进入新大陆？
		
    21. 
		

	


热门文章
	

    
									
  1. 身份证敏感信息处理 图片添加蒙版
			
    2. 
						
  2. python实现平衡二叉树_LeetCode 110. 平衡二叉树 | Python
			
    3. 
						
  3. python二分法求解_Python使用二分法求平方根的简单示例
			
    4. 
						
  4. vue el-form鼠标事件导致页面刷新解决方案；vue 阻止多次点击提交数据通用方法...
			
    5. 
						
  5. Ubuntu 之linux与windows互传文件
			
    6. 
						
  6. Confluence 6 数据库表-系统信息（System information）
			
    7. 
						
  7. 聚焦OA品牌：OA产品影响力是选型关键
			
    8. 
						
  8. 《HTML5开发手册》——2.4　初学者“菜谱”：使用address元素提供通信信息
			
    9. 
						
  9. while循环中，break,continue,return的差别
			
    10. 
						
  10. VS Code - Debugger for Chrome调试JavaScript的两种方式
			
    11.