如何利用AWS的S3,Route 53,CloudFront和ACM构建在线简历
如果您是AWS的新手,您可能会体会到试图理解所有不同的服务(真的,有上百种)所带来的压力它们都是做什么的,它们如何一起工作?然后,一旦您掌握了一些基本技能,您就可以......
如果你是AWS的新手,你可能会对试图理解所有不同的服务感到不知所措(说真的,好多好多)。这些服务都是用来做什么的,它们如何相互配合?
一旦你掌握了一些基本技能,下一个挑战就是如何向潜在雇主展示这些技能。在不花费太多费用的情况下,你能在简历或CV中突出你的项目吗?
在这个实践性的教程中,通过按照以下步骤在AWS上构建你的实际简历/CV,你将获得帮助:
- 使用HTML、CSS和JavaScript编写你的简历代码
- 将你的文件上传到配置了静态网站托管和公共访问权限的简单存储服务(S3)存储桶
- 使用Route 53为你的简历设置自定义域名
- 使用AWS证书管理器(ACM)设置一个TLS/SSL证书
- 创建一个CloudFront分发(指向S3中的文件),你可以在其中应用证书。
这是我们将要构建的内容:
通过完成本教程,你不仅拥有一个在线简历,还拥有一个可以用来吸引你的朋友、家人、社交网络和潜在雇主的现实项目。
要查看该项目的实际操作过程,请观看以下视频:
目录
- 跟随教程需要什么
- 但首先,这会花费多少?
- 创建简历的代码(HTML、CSS、JavaScript)
- 创建一个S3存储桶并对其进行静态网站托管和公共访问权限配置
- 域名选项1:使用Route 53注册一个新域名
- 域名选项2:使用第三方提供商的域名
- 创建一个A记录并设置别名指向S3网站
- 使用AWS证书管理器创建公共TLS/SSL证书
- 创建一个CloudFront分发
- 更新Route 53以指向CloudFront分发
- 欣赏最终结果
- 重要!删除你的资源
- 结束
跟随教程需要什么
要顺利完成本教程,你需要以下内容:
- 一个AWS账号:你可以免费注册(虽然需要信用卡验证)。
- 基础经验:具备一些AWS的基本经验将使本教程更容易理解,但即使你是个完全的新手,也应该能够跟上。
- 适当的权限:我建议您以具有管理员权限的IAM用户身份登录,或使用您的根帐户(尽管我必须说,日常使用根帐户并不被推荐/不是最佳做法)。
首先,这会花费多少呢?
在我们继续之前,让我们来了解一下不同的服务及其费用。
如果你想在教程之后删除所有内容,请确保查看本文末尾的那一部分。我还建议你设置一个AWS预算,这样你就可以设定消费限额,并在接近或超过限额时收到通知(不要有意外账单啊!)。
- S3:用于托管网站文件。如果你还在使用AWS免费层级,那么应该没有费用。在免费层级之外,费用应该是非常少的,仅为几美分。
- Route 53:如果你决定通过Route 53购买域名(可选 – 你也可以从其他提供商”带入”你自己的域名),它将花费$10+。你还需要一个托管区域,每月需要花费50美分。而Route 53的查询(当有人访问你的域名时)将花费40美分每一百万次查询。
- AWS证书管理器:通过ACM获取TLS/SSL证书是免费的。
- CloudFront:在免费层级内,没有费用。在免费层级之外,费用将取决于流量,但为了我们的目的,它可能只花费几美分。请参阅完整的定价页面以获取更多信息。
创建代码(HTML,CSS,JavaScript)用于你的简历
这一部分是你可以展示你的创造力(和编码技能)的地方。这里面没有与AWS相关的东西 – 这只是普通的Web开发。
你最终将使用一个S3存储桶来托管你的简历文件(HTML,CSS和JavaScript)。S3只能托管静态网站,这意味着你不能包含任何需要服务器端代码的内容。但前端的东西随便搞。
对于你在这里使用的代码,我不会太具体规定 – 这是你的简历。但你会想要突出显示“通常”的简历内容:工作经历,教育,技能/证书,也许还有荣誉/奖项或爱好之类的东西,让你显得更加人性化。
如果你想在你的简历中列出HTML,CSS和JavaScript等技能,你最好手写这部分代码(眨眼,ChatGPT不帮忙!),但你也可以使用我下面的代码作为起点。
index.html文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>在线简历 - 你的名字</title> <link rel="stylesheet" href="styles.css"></head><body> <div class="container"> <header> <img src="headshot.jpg" alt="头像" class="headshot"> <h1 id="name">名字</h1> <p id="contactInfo">地点 | 邮箱</p> </header> <section id="employmentHistory"> <h2>工作经历</h2> <div id="timeline"></div> <!-- JavaScript数组的占位符 --> </section> <section id="education"> <h2>教育</h2> <ul> <li>学位 | 大学(年份)</li> <li>学位 | 大学(年份)</li> <!-- 根据需要添加更多列表项 --> </ul> </section> <section id="skills"> <h2>技能/证书</h2> <ul> <li>技能1</li> <li>技能2</li> <li>技能3</li> <li>技能4</li> <!-- 根据需要添加更多列表项 --> </ul> </section> </div> <script src="script.js"></script></body></html>
styles.css文件
/* 所有元素的基本重置,包括内边距和外边距 */* { padding: 0; margin: 0; box-sizing: border-box;}/* Body样式 */body { font-family: 'Arial', sans-serif; line-height: 1.6; background-color: #f4f4f4;}/* 用于居中内容的容器 */.container { width: 80%; margin: auto; overflow: hidden; padding: 20px;}/* Header样式 */header { background: #333; color: #fff; padding: 20px; text-align: center;}/* Header 图像和名称的样式 */.headshot { width: 150px; height: 150px; border-radius: 50%; display: block; margin: 20px auto;}header h1 { margin-bottom: 10px;}/* 联系信息的样式 */#contactInfo { font-size: 1.1em; margin-bottom: 20px; color: #fff; padding: 15px;}/* 就业、教育和技能的部分样式 */section { background: #fff; margin: 20px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}section h2 { margin-bottom: 10px;}/* 时间线的样式 */#timeline .entry { border-left: 3px solid #333; margin-bottom: 5px; cursor: pointer;}#timeline .entry-header { background: #e2e2e2; padding: 10px; margin-left: -3px; }#timeline .entry-header:hover { background: #ccc; color: #333; }/* 工作描述内容的样式 */#timeline .entry-content p { padding: 5px 10px; background: #f9f9f9; border-left: 3px solid #333; display: block; }/* 教育和技能的列表样式 */section ul { list-style: inside square; padding: 0 20px;}section ul li { padding: 2px 0;}/* 活动类的调整 */.entry.active .entry-header { background-color: #e2e2e2; color: #333; }.entry.active .entry-content { display: block; }/* 可点击项的视觉提示 */.entry .entry-header:after { content: ' (点击展开)'; font-size: 0.8em; color: #666;}.entry.active .entry-header:after { content: ' (点击收起)'; font-size: 0.8em; color: #666; }
script.js文件
// 用于简历的就业历史互动性(可以通过点击每份工作进行查看)document.addEventListener('DOMContentLoaded', function () { // 包含就业历史数据的占位符数组 const employmentHistory = [ { id: 1, title: '职位名称', company: '公司名称', years: '年份-年份', description: '工作描述' }, { id: 2, title: '职位名称', company: '公司名称', years: '年份-年份', description: '工作描述' }, { id: 3, title: '职位名称', company: '公司名称', years: '年份-年份', description: '工作描述' } // 需要更多的条目时可添加 ]; const timeline = document.getElementById('timeline'); // 创建时间线条目 employmentHistory.forEach(job => { // 工作的条目容器 const entry = document.createElement('div'); entry.className = 'entry'; entry.id = 'entry-' + job.id; // 工作的标题头 const header = document.createElement('div'); header.className = 'entry-header'; header.innerText = job.title; // 工作的内容容器,初始隐藏 const content = document.createElement('div'); content.className = 'entry-content'; content.innerHTML = `<strong>公司:</strong> ${job.company}<br> <strong>年份:</strong> ${job.years}<br> <p>${job.description}</p>`; content.style.display = 'none'; // 将标题和内容添加到条目中 entry.appendChild(header); entry.appendChild(content); // 切换内容可见性的事件监听器 header.addEventListener('click', function () { // 检查点击的标题的内容是否当前显示 const isContentShown = content.style.display === 'block'; // 隐藏所有已打开的内容 document.querySelectorAll('.entry-content').forEach(el => { el.style.display = 'none'; // 隐藏内容 }); // 取消激活所有标题 document.querySelectorAll('.entry').forEach(el => { el.classList.remove('active'); // 移除活动类 }); if (!isContentShown) { // 如果之前未显示,则显示内容 content.style.display = 'block'; entry.classList.add('active'); } // 如果已显示,则会在上述循环中隐藏 }); timeline.appendChild(entry); });});
创建一个S3 Bucket并配置为静态网站托管和公共访问
现在你有了你的三个代码文件(别忘了一个”headshot.jpg”来展示你微笑的脸),你需要一个地方放它们。
在亚马逊AWS中,S3是一个非常适合存储对象(也就是文件)的廉价选项。如果你只使用客户端代码,就像你现在这样,那么你可以将S3配置为静态网站托管。
创建一个S3 bucket
在AWS管理控制台中,导航到S3。
点击创建 bucket。
输入bucket的详细信息。
- Bucket名称:重要!如果你计划为你的简历使用自定义域名,那么这个bucket名称应该与域名完全匹配。例如,我将使用”amberaws.com”,所以我的bucket名称需要是”amberaws.com”。如果你使用不同的名称,在教程的Route 53部分会遇到麻烦。
- AWS区域:你可以选择任何区域,但我建议选择离你最近的区域。
- 对象所有权:保持默认的禁用ACLs(推荐)。
往下滚动,取消选择阻止所有公共访问的设置。注意:在大多数情况下,这是不推荐的,因为你禁用时会收到警告。但是因为你创建的是一个希望向全世界开放的公开简历,所以禁用这个选项是合适的。
对于其余的bucket设置使用默认值,然后点击创建 bucket。
现在你有一个空的bucket,但它还没有准备好用于网站托管。你还需要做一些更新。
启用静态网站托管
为了让S3能够将你的文件作为网站提供,你需要在bucket上启用此功能。
点击刚刚创建的bucket并进入属性选项卡。
滚动到页面底部,在静态网站托管部分,点击编辑。
选择启用。这将打开其他选项。
对于索引文档,输入index.html。这会指定网站的默认主页(您的简历的HTML代码)。然后点击保存更改。
添加存储桶策略以允许公开访问存储桶的内容
在创建存储桶时,您表示不希望阻止所有公开访问。但即使在该设置下,S3的默认行为也是“拒绝”一切。因此,如果您不明确表示用户可以访问存储桶中的文件,他们将无法访问。您将使用存储桶策略授予读取权限。
在页面顶部,点击权限选项卡。
滚动到存储桶策略部分,点击编辑。
复制以下存储桶策略(JSON代码)。
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::Bucket-Name/*" ] } ]}
将代码粘贴到AWS控制台中的策略部分。该策略表示“允许”任何人(主体为“*”)对存储桶中的所有文件执行“GetObject”操作(基本上是“读取”)。(“Bucket-Name/*”)
重要提示:将”Bucket-Name”更新为您的存储桶名称,然后点击保存更改。
现在,您已经配置了一个用于静态网站托管的存储桶,并应用了一个可以让人们访问该网站的策略。现在是时候添加您之前创建的令人印象深刻的代码文件了。
在页面顶部,点击对象选项卡。
点击上传按钮。
将您的四个文件拖放到浏览器中。这应包括index.html、styles.css、script.js和headshot.jpg。
在所有四个文件上传且全部显示在文件和文件夹部分后,点击上传按钮。
现在是时候测试您的简历是否可以加载了。要执行此操作,您需要获取S3存储桶网站的端点。
导航到存储桶的属性选项卡。
将页面滚动到底部,到静态网站托管部分。点击Bucket网站端点链接(将在新标签页中打开)。
如果一切正常,您应该在浏览器中看到您的杰作。耶!
恭喜您在S3中以公开访问的方式托管您的简历!但是,尽管非常令人印象深刻,但如果您使用自定义域名,则会更加令人印象深刻。目前,它正在使用S3网站URL,格式为[bucketname].s3-website-[regionname].amazonaws.com。
让我们接下来使用Route 53来处理域名,这是Amazon的域名和DNS服务。
域名选项1:使用Route 53注册新域名
如果您还没有域名,您可以使用Route 53在AWS上注册一个域名。(如果您已经在其他供应商那里拥有域名,下一节中我会给您一些建议)
导航到Route 53。
在Route 53仪表板上,简单地输入您感兴趣的域名,然后点击检查。
如果域名可用,您将能够选择它(如果它不可用,您将会看到一些备选名称)。选择后,它会添加到购物车中,然后您将进行结账流程,费用将显示在AWS账单中。
购买域名后,它将自动为您创建一个托管区域。您可以将托管区域视为控制如何路由流量的记录和规则的容器。
公共托管区域(您将要使用的)用于控制来自互联网的流量。私有托管区域则用于控制在AWS虚拟私有云(VPC)内部的流量。
您可以通过点击左边导航栏上的托管区域来查看您的托管区域,然后点击与您购买的域名相匹配的区域(本例中为”amberaws.com”)。
域名选项2:使用第三方提供商提供的域名
所以,您已经从其他地方(如GoDaddy、Namecheap、Google Domains等)获得了域名。您完全可以使用Route 53作为您的DNS服务(它有很多优点,并且易于与其他AWS服务集成),同时仍然将域名保留在其他提供商那里。
每个注册商的详细信息略有不同,因此我将在这里给出一些通用指导。还要知道,使用外部提供商的DNS更改传播时间较长,如果出现问题,您可能需要直接与他们合作。但是我会帮助您入门!
创建托管区域并获取您的名称服务器
即使您不使用来自Route 53的域名,您仍然需要一个托管区域(再次,这个区域包含控制流量路由的记录和规则)。
点击左侧导航中的托管区域,然后点击创建托管区域。
输入来自第三方提供商的域名,选择公共托管区域,然后点击创建托管区域。
创建完成公共托管区域后,您将看到四个列出的名称服务器。记下这些名称服务器。
接下来,转到当前域名提供商的DNS设置。找到您的名称服务器设置,并将其替换为来自Route 53的名称服务器。
有关更详细的信息,这里有一些更受欢迎的域名提供商的指南:
在第三方网站上进行更新并传播更改后,您应该可以按照本文的其余部分进行操作。
创建一个别名为S3网站的A记录
现在您有一个公共托管区域,您需要创建一个记录,告诉路由访问者在访问您的域名时应该如何路由流量。
进入您的托管区域,然后点击创建记录。
注意:如果您看到下面的“向导”视图,请点击切换到快速创建。(如果您没有看到这个“磁贴”视图,则您已经处于快速创建模式。)
填写记录的详细信息。
- 记录名:将子域留空,只使用根域(如“amberaws.com”)。
- 记录类型:A
- 别名:将其切换为打开状态。别名允许您进行路由到AWS资源,如S3、CloudFront、Elastic Beanstalk等。
现在填写流量路由的详细信息。您可以在下拉菜单中输入以过滤值。
- 别名指向S3网站终端节点
- 您的地区(我使用的是美国西部(俄勒冈))
- 最后一个下拉菜单应自动填充为您的S3网站。注意:如果这里没有显示任何内容,很可能是因为您没有将存储桶命名为与您的域名相同。哎呀!您需要重新创建一个与您域名完全相同的存储桶。
对于路由策略,选择简单路由。对于评估目标健康状态,保持默认值是,然后点击创建记录。
更改可能需要多达60秒才能生效。您可以点击页面上方方便的查看状态来查看传播状态。
在状态从待处理更改为同步后,您应该可以测试您的更改。
现在让我们来测试吧!如果一切正常,当您在浏览器中输入您的域名(如amberaws.com),Route 53应该会将您重定向到S3网站,这意味着您应该能够看到您(令人惊叹的)的简历。
恭喜!您已经取得了巨大的进步。最后一步是通过HTTPS建立安全连接,并使用TLS/SSL证书,这样您就可以摆脱浏览器中烦人的“不安全”消息。
接下来,让我们使用AWS证书管理器来解决这个问题。
使用AWS证书管理器创建公共TLS/SSL证书
如果您需要证书的复习,请记住它们有助于保证用户和服务器之间的安全连接。
例如,如果我通过互联网发送银行信息,我希望知道它是发送到一个声誉良好的服务器,并且连接是加密的。即使像“简历”这样的东西,安全连接也能给查看者带来信心,他们没有进入一个可疑的网站。
在AWS领域中,证书是在AWS证书管理器(ACM)中创建和管理的。(如果您有现有的证书,您也可以从其他授权机构导入它们)
导航到证书管理器。
重要!在本节中,您需要将区域更改为us-east-1(北弗吉尼亚州)。如果您在其他区域创建证书,则无法将其与CloudFront(您最终要使用的地方)一起使用。
从证书管理器的首页,点击请求证书。
选择请求公共证书,然后点击下一步。
输入您的域名(例如”amberaws.com”),其余选项保持默认,然后点击请求。
请求已成功,但它目前处于”待验证”状态,直到您验证DNS。点击查看证书。
在颁发证书之前,亚马逊需要确认您拥有此域名并且能够修改DNS设置(在Route 53中)。要开始此过程,请点击在Route 53中创建记录。
下一个屏幕应用了各种过滤器,检查验证状态和您的域名是否在Route 53中找到。从这里,您可以点击创建记录,这实际上将为您在Route 53中创建一条记录。
如果记录创建成功,您应该会看到相应的消息。
记录已在Route 53中创建。因此,请导航至Route 53,到您之前工作的托管区域。您应该会看到一个新的CNAME记录,该记录由证书管理器创建。
太棒了!您现在拥有了一个TLS/SSL证书,但是您接下来该怎么做呢?
您的网站文件目前托管在S3上,但不幸的是,您不能在S3存储桶上使用证书。
相反,您需要一个指向S3存储桶的CloudFront分发。然后将证书应用于CloudFront分发。
您知道这意味着什么吗?这意味着我们需要前往CloudFront!
创建CloudFront分发
CloudFront是亚马逊的内容分发网络,也称为CDN。它通过在全球的”边缘位置”上缓存内容,将内容更快地传递给用户。这对于视频和图像等内容非常有用,使其加载更快。
对于您的简历来说,由于文件非常小,您可能不会注意到太大的性能差异。但这是您可以应用在上一节中创建的TLS/SSL证书的方法。
导航至CloudFront。
在CloudFront首页上,点击创建CloudFront分发。
原始域是您的网站文件所在的地方,即S3。如果您输入S3进行筛选,应该能找到您的存储桶。
但等等!您会收到一条有关使用网站终端节点而不是存储桶终端节点的消息。是的,这正是您想要的!点击使用网站终端节点,AWS将为您更新终端节点。
此页面下面还有许多设置,但您只需要更新其中的一部分。
向下滚动至默认缓存行为部分,然后在查看器下面,选择重定向HTTP到HTTPS。
向下滚动至Web应用防火墙(WAF),然后选择不启用安全保护。
在下一部分设置中:
- 对于替代域名(CNAME),输入您的域名(如“amberaws.com”)。
- 对于自定义SSL证书,选择您之前设置的证书。注意:如果您在与us-east-1(N. Virginia)不同的区域设置了证书,它将不会显示在这里。哎呀!您需要在us-east-1中重新创建它。
滚动到页面底部。
对于默认根对象,输入index.html(您的默认首页),然后点击创建分发。
CloudFront分发需要几分钟时间来完成部署(即使顶部显示“成功创建”)。当最近修改的值显示日期和时间时,表示已完成。
为了测试CloudFront和TLS/SSL证书是否正常工作,请复制分发域名。在浏览器中打开一个新标签页,并导航至该地址。
如果一切正常,您现在应该在浏览器中看到所有重要的挂锁图标,表示您正在使用通过证书管理器设置的证书的安全连接。
太棒了!但在兴奋之前,记住您最终希望转到您的自定义域名来加载简历,而不是这个冗长的CloudFront分布域名。
更新Route 53以指向CloudFront分布
目前,Route 53中的A记录指向S3存储桶,像这样…
相反,我们希望Route 53 指向CloudFront分布,然后指向S3,像这样…
返回Route 53,进入您正在使用的托管区 。 选择A记录,然后在屏幕右侧,点击编辑记录。
更新三个下拉菜单,而不是将流量路由到S3,使其指向CloudFront分布。
- 别名指向CloudFront分布
- 美国东部(弗吉尼亚北部)(此选项已为您选择并灰显)
- 选择您的分布(它应该自动填充到第三个下拉菜单中)
点击保存。
看哪,最终结果
现在是真相的时刻:如果一切顺利,您应该能够访问您的自定义域名,并通过安全连接加载您的简历。
VOILÀ!它起作用了。
简历文件(通过CloudFront从S3加载)通过使用TLS/SSL证书(通过证书管理器)在自定义域名(来自Route 53)上进行加载的安全连接。干得好。
这是您建立的内容:
重要!删除您的资源
在文章开始时,我提到了服务的费用。如果您选择保持运行,它不会花费您太多费用(除非,当然,您的简历突然走红,并且您突然需要支付大量的Route 53和CloudFront流量…也许是一个好问题?)
但是一定要设置AWS预算,以在费用达到某个阈值时收到通知。
对于那些想要删除您构建的所有内容的人,现在让我们这样做。
禁用并删除CloudFront分布
导航到CloudFront 并选择您的分布。在删除之前,您首先必须禁用它。
这将花费几分钟的时间完成,并且必须在删除其他内容之前完成。所以让它运行。完成后,您应该在上次修改列中看到一个日期和时间。
一旦禁用分发,请选择它,然后点击删除。
从 Route 53 托管区域中删除记录
导航到Route 53和您正在工作的托管区域。记录不会花费任何费用,但如果您不打算使用它们,删除它们是一个很好的主意,以避免将来的混淆。
选择A 记录和CNAME 记录,然后点击删除记录。
删除托管区域(可选)
您也可以选择删除 Route 53 中的托管区域,但如果这样做,您的域名可能在互联网上不可用。
如果您计划在将来某个时候使用您的域名,我建议保留托管区域(我选择保留我的)。保留该区域将每月花费您 50 美分。
但如果您想继续删除操作,只需选择托管区域,然后点击删除。
确认您已完成此警报消息中的操作,输入删除,然后点击删除。
从证书管理器中删除证书
导航到证书管理器。选择您创建的证书,然后点击删除。(如果尚未禁用 CloudFront 分发,您将在此步骤上收到一个错误,说资源仍在使用中。)
清空 S3 存储桶,然后删除它
导航到S3,到您所有存储桶的列表。选择存储桶,然后点击删除。
在删除存储桶之前,您必须首先删除其中的文件。AWS 提供了一个便捷的链接来完成这个操作。点击链接清空存储桶配置。
通过输入永久删除来确认您要永久删除文件(是的),然后点击清空。
现在桶已经清空,你可以删除它了。在屏幕顶部的成功消息中,有一个方便的链接可以这么做。点击删除桶配置。
通过输入桶的名称并点击删除桶来确认此操作。
就这样!资源已被删除,你不会产生任何额外费用。
总结
恭喜你成功完成了所有内容!希望你能成功建立一份简历,并在此过程中稳固自己未来的AWS技能。随时与世界分享,并祝你找工作时好运。
想要获取更多关于AWS和其他技术的教程,请访问YouTube上的微型技术教程。
Leave a Reply