如何在 AWS 上部署自己的网站

最初发表于rolfstreefkerk.com

完全控制您的网站，并遵循我们的操作指南。

从头开始构建和部署网站的好处：

拥有代码并按您认为合适的方式控制它
了解 AWS 以及如何将网站部署到 AWS S3
了解 DNS 和 Route53
如何使用 DevOps 解决自动化问题

请继续阅读以开始。

在 Twitter 上关注我，了解有关 AWS 等的最新文章。

您需要以下信息才能开始

静态站点，我推荐以下框架之一（我已经使用过）：
- 雨果
  - 现有的主题将使您能够快速创建一个网站，这样您只需修改配色方案和布局。
- 或Astro；如果您还想集成 React、VueJS 等代码。
  - 使用这里的主题页面来获取起点。
一个AWS 账户，需要使用信用卡来设置。
域名，无论您在哪里注册的。
- 在本指南中，我使用Porkbun作为我最喜欢的注册商。
一台计算机；
- Terraform / OpenTofu已安装。本文使用 Terraform。
- 安装了AWS CLI，并配置了您想要用于网站部署的配置文件。
- Git命令行工具。
- 您选择的代码编辑器，我使用VSCode。
一个GitHub帐户，以便您可以 fork 我的示例存储库。
（可选）电子邮件收件箱提供商，我使用Migadu。## 我们今天要创造什么？

我们正在创建以下服务和配置：

用于将您的网站源文件发送到的 AWS S3 存储桶；
AWS CloudFront 分发将缓存并优化网站在全球范围内向您的受众交付。
AWS Route53 适合您；
- 带有 DNSSec 配置的电子邮件服务记录，
- 然后你可以连接新闻通讯服务，例如ConvertKit.com
- 您的域名的名称服务器配置；yourwebsite.com
- 以及 CloudFront 分布来优化您的网站托管。
GitHub Actions 用于 CI/CD 管道，可在一分钟内根据命令部署您的网站。

在 AWS 上设置您的域

登录您的 AWS 控制台。

登录后，前往 Route53，然后导航至Hosted zones。
创建您的托管区域并输入您的网站域名；yourwebsite.com
记下Hosted zone ID，我们将在下一步中使用它，以便 Terraform 将所有 Route53 记录自动转换为正确的域名。

如果您选择使用 Terraform 实现自动化；

从您的域名注册商（Porkbun 等）导出名称服务器。
将托管区域资源配置添加到我的示例 Terraform 模块中，并将其连接到所有需要托管区域 ID 的相关资源。

（可选）电子邮件托管

如果您想设置电子邮件托管解决方案，我使用 migadu.com，并保持 Route53 网站开放。

我们将把额外的配置文本块导入 Route53，以使您的域名与收件箱服务一起工作。

在邮件收件箱服务中，有一个DNS Configuration面板。
获取BIND记录输出，复制/粘贴所有 DNS 记录的文本。

如果您需要自动发现电子邮件的邮件服务器；
请在提供的 DNS 记录中检查这些字符串；_autodiscover或者autoconfig

然后在 AWS Route53 中，针对您的托管区域；Import zone file，并复制粘贴该对话框中的文本行。

现在您可以在邮件应用程序中添加新的电子邮件收件箱。

如果您有_autodiscover和/或autoconfig包含的 DNS 记录，您可以；

打开你的电子邮件应用程序，
使用电子邮件和密码添加新收件箱。
完成，收件箱已添加，无需进一步配置。

否则，请记下您的邮件收件箱服务 SMTP 和 IMAP 服务器配置。

使用 Terraform 自动设置 AWS 账户

现在我们已经有了域名和邮件收件箱（可选），我们可以配置实际的站点部署。

通过 Forking 创建一个新项目：https://github.com/rpstreef/terraform-yourwebsite.com

这是一个将使用来自另一个 Git 存储库的 Terraform 模块的模板；https://github.com/rpstreef/terraform-static-site

这个模板创建了什么？

该模板将创建以下一组资源；

Terraform 状态的 S3 存储桶
S3 存储桶yourwebsite.com
- ConvertKit.com 的 S3 CORS 配置，这将允许 ConvertKit JavaScript 和您的域之间的 CORS 而不会发出警告。
SSL 的 ACM 证书，*.yourwebsite.com以及用于 SSL 自动续订的 Route53 的 ACM 验证记录。
Route53 A 和 AAAA 记录 (IPv6)
Route53 DNSSec，
- 只需第一步！第二步必须由您的域名注册商手动完成。
Lambda 函数用于重定向到索引，确保您拥有良好的 URL。
- 例如https://yourwebsite.com/contact而不是https://yourwebsite.com/contact/index.html
CloudFront 用于缓存和网页速度优化，并提供 SSL 保护。

如何调整模板？

使模板适合您的网站。

执行以下操作

更改文件中的以下行terraform.tfvars：
- 你在哪里读到yourdomain.com，
- 和你hosted_zone_id的yourdomain.com。
- 检查文件底部的 404 响应，看看它是否与您的网站结构匹配。此外，HTTP 响应代码可以作为块添加{}；

如果需要额外的 CORS 设置，请按照与相同的方式添加额外的规则f.convertkit.com。

# General
environment = "prod"
region = "us-east-1"
project = "yourdomain.com"

# use tags to track your spend on AWS, seperate by 'product' for instance.
tags = {
    environment = "production"
    terraform = true
    product = "yourdomain.com"
}

# Which config line used in .aws/config
aws_profile = "yourdomain-profile"

# Route53
hosted_zone_id = "Z000000000"

# www.yourdomain.com
product_name = "yourdomain" # avoid to use `.`, this cause an error.
bucket_name = "yourdomain.com" # your site is deployed here.

# S3 bucket CORS settings:
bucket_cors = {
    rule1 = {
        allowed_headers = ["*"]
        allowed_methods = ["GET", "PUT", "POST"]
        allowed_origins = ["https://f.convertkit.com"]
        expose_headers = ["ETag"]
        max_age_seconds = 3000
    }
}

domain_names = ["yourdomain.com", "www.yourdomain.com"]

custom_error_responses = [{
    error_code = 404
    error_caching_min_ttl = 10
    response_code = 200
    response_page_path = "/404.html"
}]

确保project-state.tf文件中的配置正确；
- 检查存储桶名称，
- 以及使用的 AWSprofile名称，例如yourwebsite-profile。

locals {
    projects_state_bucket_name = "tfstate-yourwebsite.com"
}

provider "aws" {
    region = "us-east-1"
    profile = "yourwebsite-profile"
}

terraform {
    # First we need a local state
    backend "local" {
    }

    # After terraform apply, switch to remote S3 terraform state
    /*backend "s3" {
        bucket = "tfstate-yourwebsite"
        key = "terraform.tfstate"
        region = "us-east-1"
        profile = "yourwebsite-profile"

        encrypt = true
        acl = "private"
    }*/
}

如果所有配置都检查通过；
- 运行terraform init，这将下载依赖模块。
- 然后；terraform apply>yes
部署完成后，请记下输出中的变量。我们稍后会用到它们。要稍后检索这些变量，请在目录terraform output中输入； ./environments/production。

先有鸡还是先有蛋？

完成后，我们需要调整project-state.tf文件：
- 将backend "local"块放在注释中。
- 从块中删除注释backend "s3"。
- 将状态从迁移local到S3：
  - terraform init -migrate-state
  - 类型：yes将状态从本地复制到 s3。

现在它已完全部署，并且我们已将 Terraform 状态保存到 AWS S3，它不再位于您的磁盘上。您可以tfstate根据需要删除这些文件。

建立 DNSSec“信任链”

DNSSec的好处是建立了“信任链”。

这意味着，已经验证；

您拥有该域名，
当您导航到该域时，信息来自您的服务器，而不是来自其他人的服务器（例如黑客等）

如果你想了解更多关于 DNSSec 的知识，这篇文章是一个很好的入门

现在要完成 DNSSec 配置，您必须手动修改域名注册商信息。

首先，获取DSDNSSec所需的记录；View information to create DS record

然后，在下一个屏幕中单击；Establish a Chain of Trust。

您将看到一个概述配置项的表格。

如果您没有在 Route53 上注册域名，请单击Another Domain registrar

在我的域名注册商 Porkbun 上，屏幕如下所示：

在块中输入以下内容dsData；左侧是 Porkbun 输入字段名称，右侧是我将使用的名称作为值Route53：
- 关键标签：Key tag
- DS数据算法：Signing algorithm type
- 摘要类型：Digest algorithm type
- 消化：Digest

如果您有不同的注册商，您将需要查看他们的文档，可能会略有不同。

如何检查您的配置是否有效？

最后，使用此在线工具；https://dnssec-debugger.verisignlabs.com/检查您的域名，看看是否获得所有绿色复选标记。

如果它们都是绿色，则表示您的信任链已成功建立！

现在我们有一个 DNSSec 安全域配置，通过带有 SSL 的 CloudFront 具有 S3 静态托管站点。

高性能
便宜的
且安全。

上传您的网站

我们可以使用 AWS CLI 或 GitHub Actions 进行本地部署设置。

使用脚本进行本地部署

根据您的系统（Linux、Windows、Mac），您可能需要更改此脚本。

在 Linux 上，我们可以使用此 bash 脚本按如下方式自动化您的网站部署：

#! /bin/bash

npm run build

aws s3 sync dist s3://yourwebsite.com --profile yourwebsite-profile

aws cloudfront create-invalidation --distribution-id <CloudFront Distr. Id> --paths "/*" --profile yourwebsite-profile

确保；

替换npm run build生成静态网站构建的脚本。
dist如果您的网站构建在另一个文件夹中，则替换aws s3 sync dist。
替换<CloudFront Distr. Id>为您的 CloudFront 分发 ID。
- terraform apply完成后你可以在输出中找到它；cloudfront_distribution_id

GitHub Actions

如果您喜欢使用自动化，那么设置起来非常容易且便宜。

这到底要花多少钱？

计划	贮存	分钟（每月）
GitHub 免费	500 MB	2,000
GitHub 专业版	1 GB	3,000

Pro在达到上限之前，您可以部署多次Minutes per month：

该storage大小取决于您的存储库大小，对于大多数人来说，这将很难达到。

操作系统	分钟乘数
Linux	1
视窗	2

我们选择一个Linux构建环境，具体来说ubuntu-latest，是为了充分利用我们的空闲时间。

在此处查看有关 GitHub Action 定价的更多信息。

它是如何工作的？

要使用 GitHub Actions 进行部署，请执行以下操作：

首先，在您网站的 GitHub 存储库中创建一个新文件.github/workflows/deploy-on-comment.yml。
将以下代码添加到文件：

注意：我假设你的网站是基于 Node (v20) 的。请根据需要进行调整！

name: Deploy on Comment
on:
  issue_comment:
    types: [created, edited]
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Build website
        run: npm run build

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1

      - name: Sync build output with S3 bucket
        run: aws s3 sync ./dist s3://your-s3-bucket-name

      - name: Invalidate CloudFront cache
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

需要在 GitHub 上创建几个秘密变量，这些变量来自我们之前收到的 Terraform 输出：

AWS_ACCESS_KEY_ID：
AWS_SECRET_ACCESS_KEY：
CLOUDFRONT_DISTRIBUTION_ID
如果您需要再次查找这些内容，请导航到您的terraform-yourwebsite.comgit 存储库，然后；
- cd ./environments/production
- terraform output
将它们输入到 GitHub 中的以下位置：

create an issue例如，您现在可以详细查看网站上的更新。
每添加一条评论，部署就会启动。
您可以关注选项卡中采取的部署步骤和日志Actions。

（可选）如果您想更改 GitHub Actions 以使用Pull request，您可以在部署脚本中修改它。> 有关更多替代触发器，请查看GitHub Actions 文档。

您的网站已上线！

现在，当您访问您的网址时yourwebsite.com，一切都应该正常运行。

我们所建造的；

（可选）使用 Migadu 进行电子邮件托管（或选择您现有的任何服务）；例如hello@yourwebsite.com
- 例如，您可以将其连接到您的 ConvertKit.com 邮件列表。
您自己的受 DNSSec 保护的个人域名。
- 您可以确信没有黑客可以劫持您的域名。
您在 [[AWS]] 上使用 AWS S3 的静态网站。
- 免费网站托管！
CloudFront 内容分发网络 (CDN)，支持：
- SSL 保护的网站。表单提交默认全部加密。
- 提高全球范围内的加载速度和延迟性能。
- 静态网站的 URL 重写。index.html导航时不会显示“否”。
- 并重定向至 404 未找到页面。您的访客将看到正确的404.html页面，而不是错误信息。

有问题吗？欢迎讨论！

您在 AWS 上遇到了什么困难？
在 AWS 上部署时遇到过问题吗？
您是怎么解决的？

请在评论区或Twitter上告诉我

感谢您的时间，期待下一次！

文章来源：https://dev.to/rolfstreefkerk/how-to-deploy-your-own-website-on-aws-1l05