aws s3 静态网站

by Ben Cheng

通过本诚

如何使用AWS S3，CloudFront和命令行管理静态网站 (How to manage your static websites with AWS S3, CloudFront, and a command line)

Here’s a short list of things you shouldn’t need to worry about when setting up a static website:

以下是建立静态网站时您无需担心的事情：

• scaling up your servers for surges in traffic
  扩展服务器以应对流量激增
• logging into the AWS Management Console just to upload a new index.html file
  登录到AWS管理控制台只是为了上传新的index.html文件
• spending US$5 to host a single static website
  花费5美元托管一个静态网站

I myself was sick of worrying about these things. So I learned some Go, developed a small command line tool over the weekend, and open-sourced it.

我自己已经担心这些事情了。 因此，我学习了一些Go语言，在周末开发了一个小型命令行工具，并将其开源。

AWS S3 is an affordable option for for hosting (and free for first time users), and AWS CloudFront is good for CDN. But setting up the two is a pain. The checklist is pretty long:

AWS S3是负担得起的主机托管选项(对于首次使用的用户免费)，AWS CloudFront非常适合CDN。 但是设置两者是很痛苦的。 清单很长：

1. set up S3 correctly
   正确设置S3
2. configure CloudFront
   配置CloudFront
3. make sure you’ve followed best practices such as HTTP -> HTTPS redirection
   确保您已遵循最佳实践，例如HTTP-> HTTPS重定向
4. sync files
   同步文件
5. invalidate CloudFront for updates.
   使CloudFront无效以进行更新。

Luckily, my open source AWS-site-manager makes hosting and updating a static site as simple as a single command line.

幸运的是，我的开源AWS-site-manager使托管和更新静态站点变得像单个命令行一样简单。

AWS Site Manager is a simple command-line tool that makes it easy to host a static website with AWS S3 and CloudFront, without running afoul of best practices.

AWS Site Manager是一个简单的命令行工具，可轻松使用AWS S3和CloudFront托管静态网站，而无需遵循最佳实践。

If this is your first time hosting a site, create an AWS account and register your domain name with a service such as Namecheap (make sure you use their monthly discount coupon).

如果这是您首次托管站点，请创建一个AWS账户并使用Namecheap之类的服务注册您的域名(确保您使用其每月折扣券)。

为什么将S3和CloudFront用于静态站点？ (Why use S3 and CloudFront for static sites?)

So given all the trouble, why bother with S3 and CloudFront? The two main reasons are:

因此，考虑到所有麻烦，为什么还要麻烦S3和CloudFront？ 两个主要原因是：

1. Affordability for features (compared to free Heroku dyno — which shuts down when you reach their inactivity limit — or Github.io — which doesn’t support HTTPS with custom domains)
   功能的可承受性(与免费的Heroku dyno(当您达到其不活动限制时会关闭)或Github.io(不支持带有自定义域的HTTPS相比)
2. Speed (CloudFront is a cheap, but acceptable CDN)
   速度(CloudFront是便宜的，但可以接受的CDN)

Given the advantages, the only barrier was the setup, so we created a command line tool for convenient future usage. Below, I’ll walk you through how to set up this open-source site manager.

有了这些优点，唯一的障碍就是设置，因此我们创建了命令行工具以方便将来使用。 下面，我将引导您完成如何设置此开源站点管理器的操作。

AWS-site-manager做两件事： (AWS-site-manager does 2 things:)

1.使用确定的配置设置S3和CloudFront： (1. Setup S3 and CloudFront with an opinionated configuration:)

• Create S3 buckets
  创建S3存储桶
• Configure CloudFront Distribution and set up CNAME
  配置CloudFront分配并设置CNAME
• Upload and set custom HTTPS certs
  上传并设置自定义HTTPS证书
• Redirect www to naked domains for better SEO
  将www重定向到裸域以获得更好的SEO
• Redirect HTTP to HTTPS for better SEO (if HTTPS is enabled)
  将HTTP重定向到HTTPS以获得更好的SEO(如果启用了HTTPS)

• Set up IAM / let’s encrypt cert automatically (coming soon)

  设置IAM /让我们自动加密证书(即将推出)

2.与S3同步本地文件夹 (2. Sync a local folder with S3)

• Gzip files for better site speed (will replace with CloudFront Gzip Setting)

  Gzip文件可提高站点速度(将替换为CloudFront Gzip设置)

• Sensible default for HTTP Header (correct MIME type, max-age=900, etag etc)
  HTTP标头的明智默认值(正确的MIME类型，max-age = 900，etag等)
• Invalidate CloudFront distribution for files synced
  使CloudFront分配的文件同步无效

入门：安装 (Getting started: Install)

Download the binary for Linux / Mac / Windows release here.

在此处下载适用于Linux / Mac / Windows 版本的二进制文件。

Or compile from sources: If you have Go 1.6 or above installed, run the following command:

或从源代码进行编译：如果已安装Go 1.6或更高版本 ，请运行以下命令：

如何使用AWS Site Manager (How to Use AWS Site Manager)

1.设置AWS凭证和配置。 (1. Set up AWS Credentials and config.)

If you haven’t set up AWS credentials on your environment before, you can set it up by putting the following lines in ~/.aws/credentials.

如果您之前未在环境中设置过AWS凭证，则可以通过在~/.aws/credentials放置以下几行来进行设置。

And in ~/.aws/config

并在~/.aws/config

You should also set the environment variable of AWS_SDK_LOAD_CONFIG If you’re on Linux / Mac using bash put the following line in ~/.bashrc

您还应该设置AWS_SDK_LOAD_CONFIG的环境变量。如果您使用bash在Linux / Mac上，请将以下行放入~/.bashrc

You can read more about AWS CLI set up on its official documentation.

您可以在其官方文档中阅读有关AWS CLI设置的更多信息。

2.使用它！ (2. Use it!)

Assuming you’re going to set up a website example.com and www.example.com, you can:

假设您要设置网站example.com和www.example.com，则可以：

The commands above will:

上面的命令将：

• set up a S3 bucket example.com and www.example.com

  设置一个S3存储桶example.com和www.example.com

• sync all files in local folder
  同步本地文件夹中的所有文件

• redirect www.example.com to example.com

  将www.example.com重定向到example.com

If you want to use https, and have the cert in PEM format ready, run the following command lines instead to setup HTTPS. (if your SSL registry sent you .key / .crt, read this)

如果要使用https，并准备好PEM格式的证书，请运行以下命令行来设置HTTPS。 (如果您的SSL注册表向您发送了.key / .crt ， 请阅读此内容 )

Finally, you need to set up DNS mapping to your CloudFront distribution endpoint. Consider using AWS Route-53 for that.

最后，您需要设置到CloudFront分发端点的DNS映射。 考虑为此使用AWS Route-53 。

You need to setup a CNAME record to point your domain name to the Cloud Front Distribution. You can get your CloudFront Domain Name from AWS Management Console, then set your domain’s CNAME to the Domain Name.

您需要设置一个CNAME记录，以将您的域名指向Cloud Front Distribution。 您可以从AWS管理控制台获取CloudFront域名，然后将域的CNAME设置为域名。

If you need to update the site, just run aws-site-manager sync –domain example.com In the folder and the command will compare the file changes, upload new files to S3, and invalidate the CloudFront cache for you.

如果您需要更新站点，只需运行aws-site-manager sync –domain example.com在文件夹中，该命令将比较文件更改，将新文件上传到S3，并为您使CloudFront缓存无效。

继续发射 (Go forth and launch)

This project solved a recurring problem for me and my team at Oursky. In addition to building mobile and web apps, we also often create one-off static sites that we want to be able to conveniently update every once in a while.

这个项目为我和我的Oursky团队解决了一个反复出现的问题。 除了构建移动和Web应用程序之外，我们还经常创建一个一次性的静态站点，我们希望该站点能够方便地每隔一段时间进行一次更新。

AWS-site-manager is open source and in its preliminary stages. If you want to contribute, you can create issues or submit a pull request.

AWS-site-manager是开源的，并且处于初始阶段。 如果您想做出贡献，则可以创建问题或提交请求请求。

If you have any questions about this project or serverless solutions in general, you can contact me here or on Twitter. Or, if you’re ever dropping by Hong Kong, come visit my office for a chat!

如果您对此项目或无服务器解决方案总体上有任何疑问，可以在此处或在Twitter上与我联系。 或者，如果您曾经来过香港，请来我的办公室聊天！

Enjoy!

请享用！

PS: My company’s also working on another open-sourced project called Skygear.io, which is a free BaaS that includes features such as chat, social networks, bots, social logins, real-time and offline data sync, CMS for mobile, user management, etc.

PS：我公司还正在开发另一个名为Skygear.io的开源项目，这是一个免费的BaaS，其中包括聊天，社交网络，机器人，社交登录，实时和脱机数据同步，移动CMS，用户的功能管理等

翻译自: https://www.freecodecamp.org/news/how-to-manage-your-static-websites-with-aws-s3-cloudfront-and-a-command-line-4a1be228f8e8/

aws s3 静态网站