aws route53_如何使用AWS S3，Route53和CloudFront构建和部署漂亮的个人投资组合网站？...

aws route53

by Nicholas Vincent-Hill

尼古拉斯·文森特·希尔(Nicholas Vincent-Hill)

如何使用AWS S3，Route53和CloudFront构建和部署漂亮的个人静态站点？ (How to build and deploy a beautiful personal static site with AWS S3, Route53, and CloudFront ?)

This is a step-by-step guide to creating a responsive static billboard/portfolio site, deploying it to the web with AWS, and serving it securely with HTTPS.

这是有关创建响应式静态广告牌/组合网站，使用AWS将其部署到Web以及使用HTTPS安全提供服务的分步指南。

This guide is designed for beginner and intermediate-level software engineers and web developers looking for an easy way to create a personal site for cheaper than paid-services like SquareSpace or other site-builders. Basic technical requirements include a knowledge of HTML/CSS/JS, npm, and Git (the advanced site creation process uses Gatsby.js which requires knowledge of React.js and GraphQL).

本指南是为初学者和中级软件工程师和Web开发人员而设计的，他们正在寻找一种简便的方法来创建个人站点，以使其价格低于SquareSpace或其他站点构建者之类的付费服务。 基本的技术要求包括HTML / CSS / JS，npm和Git的知识(高级站点创建过程使用Gatsby.js，这需要具备React.js和GraphQL的知识)。

The only economic requirements are AWS Route53 hosted zone fees ($0.50/month) and the cost of acquiring a domain (I rented nickvh.tech for $25 for five years from get.tech). Netlify is a free option as well. The estimated time commitment is four to five hours depending on individual skill and experience.

唯一的经济要求是AWS Route53托管区域费用(每月0.50美元)和获取域的成本(我从get.tech租用nickvh.tech五年，价格为25美元)。 Netlify也是一个免费选项。 估计的时间投入为四到五个小时，具体取决于个人的技能和经验。

This guide will enable you, the developer, to control all aspects of the design, development, and deployment of your site.

本指南使开发人员可以控制网站的设计，开发和部署的各个方面。

第1步-创建您的个人网站(简单方法或困难方法) (Step 1 — Create your personal site (the easy way or the hard way))

Here’s the easy way: go here and pick out a fully responsive, super customizable, and 100% free (under the Creative Commons) HTML/CSS/JS template. Download it and customize/build on it until you love it!

这是简单的方法：转到此处 ，选择一个完全响应的，可高度自定义的，100％免费的(在Creative Commons下 )HTML / CSS / JS模板。 下载它并自定义/构建它，直到您喜欢它为止！

Create a package.json by calling npm init in the root directory of your chosen project. Make sure to git init, add all non-public information to .gitignore, and write great commit messages.

通过在所选项目的根目录中调用npm init创建package.json 。 确保git init ，将所有非公开信息添加到.gitignore ，并编写出色的提交消息。

Here’s the hard way: use Gatsby.js to build a blazing fast static site and PWA from scratch. This isn’t a Gatsby.js tutorial (plenty of great tutorials can be found here) and requires React.js and GraphQL knowledge. A number of starter templates can be found here (I used the “strata” HTML5UP template as a jumping off point for nickvh.tech).

这是困难的方法：使用Gatsby.js从头开始构建快速的静态站点和PWA。 这不是Gatsby.js教程(可以在此处找到很多很棒的教程)，并且需要React.js和GraphQL知识。 在这里可以找到许多入门模板(我使用“ strata” HTML5UP模板作为nickvh.tech的起点 )。

Test and develop your website until you are happy with it and want to share it with the world. We will be building a continuous development pipeline with either Grunt or the gatsby-plugin-s3 plugin later so future revisions/deployment will be quick and easy.

测试并开发您的网站，直到对它感到满意并希望与世界分享。 稍后，我们将使用Grunt或gatsby-plugin-s3插件建立一个持续的开发管道，以便将来的修订/部署将变得快速而简单。

第2步-获取域 (Step 2 — Get a domain)

Sites like https://get.tech or https://www.namecheap.com offer very compelling prices for domains. I waited for a promotion and got https://nickvh.tech for $25 for five years. Alternatively buy a .dev domain from Google.

像https://get.tech或https://www.namecheap.com这样的网站都为域名提供了非常诱人的价格。 我等待晋升，并以25美元的价格获得了https://nickvh.tech ，为期五年。 或者从Google购买.dev域。

步骤3 —创建一个AWS账户 (Step 3 — Create an AWS account)

Create an AWS account. This step is fairly straightforward. New accounts get free services for a year — outlined here. This requires you to have an active credit card on file with AWS. Be aware of the security implications and do not accidentally push your AWS credentials to the public web.

创建一个AWS账户 。 此步骤非常简单。 新帐户可获得一年的免费服务- 此处概述。 这要求您在AWS上存档一个有效的信用卡。 请注意安全隐患，请勿意外将您的AWS凭证推送到公共网站。

步骤4 —配置AWS S3存储桶 (Step 4 — Configure AWS S3 buckets)

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. This means customers can use it to store and protect any amount of data for a range of use cases, such as websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics.

Amazon Simple Storage Service(Amazon S3)是一种对象存储服务，可提供行业领先的可扩展性，数据可用性，安全性和性能。 这意味着客户可以使用它来存储和保护各种用例的任何数量的数据，例如网站，移动应用程序，备份和还原，存档，企业应用程序，IoT设备和大数据分析。

AWS S3 is where your static site will live; there are a few things to do in order to configure this correctly.

AWS S3是您的静态站点所在的位置； 为了正确配置，需要做一些事情。

First create a bucket; AWS S3 and Route53 only work correctly if your bucket name and domain name match precisely — name your bucket mysite.domain (i.e. nickvh.tech). Make sure to set permissions correctly; the public should be able to read from the bucket but not write to it.

首先创建一个存储桶； 仅当您的存储桶名称和域名完全匹配时，AWS S3和Route53才能正常工作-将存储桶命名为mysite.domain(即nickvh.tech)。 确保正确设置权限； 公众应该能够从存储桶中读取内容，但不能向其写入内容。

Next navigate to “Properties” and configure AWS S3 to statically serve index.html (see below).

接下来，导航到“ Properties”，并将AWS S3配置为静态服务index.html (请参见下文)。

Create a bucket (also public read access enabled) named www.mysite.domain (www.nickvh.tech in my case) and redirect to the main bucket address (see below).

创建一个名为www.mysite.domain(在我的情况下为www.nickvh.tech )的存储桶(也启用了公共读取访问权限)，然后重定向到主存储桶地址(请参见下文)。

Next, create aws-keys.json in the root directory of your project:

接下来，在项目的根目录中创建aws-keys.json ：

Here’s a guide to finding your AWS access key ID and Secret key.

这里有一个指南 ，以找到您的AWS访问密钥和秘密密钥。

Remember to add aws-keys.json to your .gitignore! One of my students accidentally pushed their AWS credentials to Github, was programmatically attacked, and incurred ~$1.3k in charges in a few hours.

请记住将 aws-keys.json 添加 到您的 .gitignore ！ 我的一位学生不小心将他们的AWS凭证推送给了Github，遭到了程序攻击，并在几个小时内产生了约1.3万美元的费用。

第5步–使用Grunt或gatsby-plugin-s3将您的网站上传到AWS S3 (Step 5— Upload your site to AWS S3 with Grunt or gatsby-plugin-s3)

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

Grunt是JavaScript任务运行程序，该工具用于自动执行频繁的任务，如缩小，编译，单元测试和整理。 它使用命令行界面来运行文件中定义的自定义任务。

If you choose the easy way to create your site, you can use Grunt to upload your completed site files to your AWS S3 bucket.

如果选择创建站点的简便方法，则可以使用Grunt将完成的站点文件上传到AWS S3存储桶。

npm install grunt grunt-aws-s3 --save-dev

Create a Gruntfile.js:

创建一个Gruntfile.js ：

Add this to the scripts object of your package.json.

将此添加到package.json的脚本对象中。

"deploy": "grunt deploy"

Now whenever you want to deploy a new production version of your site just execute npm run deploy. This will only POST/PUT files to AWS S3 that have changed — reducing the number of requests you need to pay for (new AWS accounts get 2,000 free PUT requests/month for the first year).

现在，只要要部署站点的新生产版本，只需执行npm run deploy 。 这只会将已更改的POST / PUT文件发布到AWS S3，从而减少了您需要付费的请求数量(新的AWS账户在第一年每月可获得2,000个免费PUT请求)。

Alternatively — if you built your site with Gatsby.js, forget Grunt and just use gatsby-plugin-s3 for static site deployment. I wrote a npm script npm run ship which builds the production bundle and uploads it to AWS S3 - gatsby build && gatsby-plugin-s3 deploy. The code for my Gatsby site can be found here.

另外，如果您是使用gatsby-plugin-s3构建站点的，那么请忘记Grunt，而只需使用gatsby-plugin-s3进行静态站点部署。 我编写了一个npm脚本npm run ship ，该脚本构建生产捆绑包并将其上传到AWS S3- gatsby build && gatsby-plugin-s3 deploy 。 我的Gatsby网站的代码可以在这里找到。

第6步—使用AWS CloudFront创建分配 (Step 6— Create a distribution with AWS CloudFront)

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment.

Amazon CloudFront是一项快速的内容交付网络(CDN)服务，可在开发人员友好的环境中以低延迟，高传输速度安全地向全球客户交付数据，视频，应用程序和API。

Create a new CloudFront distribution (loosely following these AWS docs). Make sure to specify Alternate Domain Names (CNAMEs) correctly and request a custom SSL certificate to enable HTTPS.

创建一个新的CloudFront发行版(轻松地遵循这些AWS文档 )。 确保正确指定备用域名 (CNAME) ，并请求自定义SSL证书以启用HTTPS。

Also specify the Default Root Object as index.html.

另外，将默认根对象指定为index.html 。

Click Create Origin to link your S3 bucket to your CloudFront Distribution. Specify Origin Domain Name as YOUR_S3_BUCKET_NAME.s3.amazonaws.com. Do not restrict bucket access.

单击创建来源以将S3存储桶链接到CloudFront分配。 将原始域名指定为YOUR_S3_BUCKET_NAME.s3.amazonaws.com 。 不要限制存储桶访问。

Create a new behavior and set Viewer Protocol Policy to “Redirect HTTP to HTTPS.”

创建新行为，并将查看器协议策略设置为“将HTTP重定向到HTTPS”。

You can also customize error responses — I redirect 404 errors to a custom 404.html page.

您还可以自定义错误响应-我将404错误重定向到自定义404.html页面。

第7步-使用AWS Route53将流量重定向到新的CDN (Step 7— Redirect traffic to your new CDN with AWS Route53)

Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service. It is designed to give developers and businesses an extremely reliable and cost effective way to route end users to Internet applications by translating names like www.example.com into the numeric IP addresses like 192.0.2.1 that computers use to connect to each other.

Amazon Route 53是一种高度可用且可扩展的云域名系统(DNS) Web服务。 通过将名称(如www.example.com)转换为计算机用来相互连接的数字IP地址(如192.0.2.1)，它为开发人员和企业提供了一种极其可靠且经济高效的方式来将最终用户路由到Internet应用程序。

Now we need to connect your domain name (mysite.domain) to your CloudFront distribution so that when a user makes a request to your domain they receive your index.html and the rest of your static site (by hitting your newly created CDN).

现在，我们需要将您的域名(mysite.domain)连接到您的CloudFront发行版，以便当用户向您的域发出请求时，他们会收到index.html和静态站点的其余部分(通过点击新创建的CDN)。

Open the AWS Route53 console and create a new Hosted Zone. Here’s some helpful AWS docs to get you started.

打开AWS Route53控制台并创建一个新的托管区域 。 以下是一些有用的AWS文档 ，可帮助您入门。

Make sure to update the name servers for the domain you bought. Use the method provided by the registrar for the domain you purchased to change the name servers for the domain (use the four Route53 name servers found in the NS — Name server record set).

确保为您购买的域更新名称服务器。 使用注册商为您购买的域提供的方法更改域的名称服务器(使用在NS —名称服务器记录集中找到的四个Route53名称服务器)。

Create a new record set and set the alias target to your AWS CloudFront distribution (see below). Make sure to name it yoursite.domain.

创建一个新记录集，并将别名目标设置为您的AWS CloudFront分配(请参阅下文)。 确保将其命名为yoursite.domain。

Changes to domain name servers take time to propagate so make sure to wait a few minutes before attempting to access your site via your new domain.

域名服务器的更改需要一段时间才能传播，因此请确保等待几分钟，然后再尝试通过新域访问您的站点。

第8步-尽情享受您新部署的站点的荣耀！ (或解决问题) (Step 8— Bask in the glory of your newly deployed site! (or troubleshoot problems))

You did it! Enjoy your beautiful new portfolio site deployed to the world wide web. Check out my site I built and deployed using this tech stack; I wired up the contact form with AWS Lambda using this guide.

你做到了！ 享受将您美丽的新投资组合网站部署到万维网上的乐趣。 查看我使用此技术堆栈构建和部署的网站 ； 我使用本指南将联系表单与AWS Lambda相连。

Read Next:

继续阅读：

Scrabblr — A React game with react-dnd and react-flip-move

Scrabblr —一个带有react-dnd和react-flip-move的React游戏

翻译自: https://www.freecodecamp.org/news/how-to-build-and-deploy-a-beautiful-personal-portfolio-site-with-aws-s3-route53-and-cloudfront-8827975129ef/

aws route53