完全控制您的網站，並遵循我們的操作指南。

從頭開始建立和部署網站的好處：

• 擁有程式碼並以您認為合適的方式控制它

• 了解 AWS 以及如何將網站部署到 AWS S3

• 了解 DNS 和 Route53

• 如何使用DevOps解決自動化問題

請繼續閱讀以開始使用。

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

您將需要以下內容才能開始

1. 靜態站點，我推薦以下框架之一（我已經使用過）：

- [Hugo](https://gohugo.io/) 

    - existing [themes](https://themes.gohugo.io/) will get you a website quick, such that you only have to modify color schemes and layouts.

- or [Astro](https://astro.build/); if you’d like to integrate React, VueJS etc. code as well.

    - use their themes page [here](https://astro.build/themes/) to get a starting point. 

2. 一個AWS 帳戶，需要信用卡才能設定。

3. 一個域名，無論您在哪裡註冊。

- In this how-to I use [Porkbun](porkbun.com) as my favorite registrar.

4. 一台電腦；

- [Terraform](https://www.terraform.io/)/[OpenTofu](https://opentofu.org/) installed. We use Terraform in this article.

- [AWS CLI](https://aws.amazon.com/cli/) installed with profile configured you want to use for your website deployment.

- [Git](https://git-scm.com/downloads) command line tooling.

- your code editor of choice, I use [VSCode](https://code.visualstudio.com/).

5. 一個GitHub帳戶，以便您可以建立我的範例儲存庫。

6. （可選）電子郵件收件匣供應商，我使用Migadu 。

今天我們在創造什麼？

我們正在建立以下服務和配置：

• 用於將網站來源檔案傳送到的 AWS S3 儲存桶；

• AWS CloudFront 發行版將在全球範圍內快取、優化向您的受眾交付的網站。

• AWS Route53 適合您；

- Email service records with DNSSec configuration,

- You can then hookup a newsletter service like `ConvertKit.com` 

- Name Server Configuration for your domain; `yourwebsite.com`

- and the CloudFront distribution to optimize your website hosting.

• 適用於 CI/CD 管道的 GitHub Actions，可在一分鐘內根據命令部署您的網站。

在 AWS 上設定您的網域

登入您的 AWS 控制台。

1. 登入後，前往 Route53，然後導覽至Hosted zones 。

2. 建立您的託管區域並輸入您的網站網域； yourwebsite.com

3. 記下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 儲存桶

• yourwebsite.com的 S3 儲存桶

- S3 CORS configuration for ConvertKit.com , this will allow CORS between ConvertKit JavaScript and your domain without warnings.

• SSL 的 ACM 憑證、 *.yourwebsite.com以及用於自動續訂 SSL 的 Route53 的 ACM 驗證記錄。

• Route53 A 和 AAAA 記錄 (IPv6)

• Route53 DNSSec，

- only the first step! The second step must be done manually with your Domain Registrar.

• 用於重定向到索引的 Lambda 函數可確保您擁有良好的 URL。

- E.g. https://yourwebsite.com/contact instead of https://yourwebsite.com/contact/index.html

• CloudFront 用於快取、網頁速度優化以及 SSL 保護。

如何調整模板？

使模板適合您的網站。

請執行下列操作

• 更改terraform.tfvars檔案中的這些行：

- where you read `yourdomain.com`, 

- and your `hosted_zone_id` for `yourdomain.com`.

- check 404 response at the bottom of the file to see if that matches up with your website structure. Additionally HTTP response codes can be added as blocks; `{}`.

如果您需要額外的 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檔案中的配置正確；

- check the bucket name, 

- and the AWS `profile` name used, e.g. `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"
    }*/
}

• 如果所有配置都檢查通過；

- run `terraform init`, this will download the dependent modules.

- then; `terraform apply` > `yes`

• 完成部署後，記下輸出中的變數。我們稍後會需要它們。若要稍後檢索這些，請鍵入； ./environments/production目錄中的terraform output 。

哪一個先出現？雞還是雞蛋？

• 完成後，我們需要調整project-state.tf檔案：

- Place the  `backend "local"` block in comments.

- Remove the comments from the  `backend "s3"` block.

- Migrate the state from `local` to `S3`: 

    - `terraform init -migrate-state`

    - type: `yes` to copy state from local to s3.

現在它已完全部署，我們已將 Terraform 狀態儲存到 AWS S3，它不再位於您的磁碟上。如果您願意，可以刪除這些tfstate檔案。

建立 DNSSec“信任鏈”

DNSSec 的好處是建立了「信任鏈」。

這意味著，已驗證；

• 您擁有該域名，

• 當您導航到該網域時，資訊來自您的伺服器而不是來自其他人的伺服器（例如駭客等）

如果您想了解有關 DNSSec 的更多訊息， 本文是一本很好的入門讀物

現在要完成 DNSSec 配置，您必須手動修改網域註冊商資訊。

• 首先，取得DNSSec所需的DS記錄； View information to create DS record

• 然後，在下一個畫面中點擊； Establish a Chain of Trust 。

您將看到一個概述配置專案的表格。

如果您沒有在 Route53 上註冊網域，請按一下Another Domain registrar

在我的網域註冊商 Porkbun 上，畫面如下所示：

• 在dsData區塊中輸入以下內容；左邊是 Porkbun 輸入欄位名稱，右邊是值，我將放置在Route53中使用的名稱：

- Key Tag:  `Key tag`

- DS Data Algorithm: `Signing algorithm type`  

- Digest Type: `Digest algorithm type`  

- Digest: `Digest` 

如果您有不同的註冊商，您需要查看他們的文件，可能會略有不同。

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

• 最後，使用這個線上工具；如果您獲得所有綠色複選標記，請使用 https://dnssec-debugger.verisignlabs.com/ 檢查您的網域。

如果都是綠色的，那就表示你的信任鏈已經成功建立了！

現在我們有了一個 DNSSec 安全性網域配置，其中包含一個透過 CloudFront 使用 SSL 的 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替換為產生靜態網站建置的腳本。

• 如果您的網站建置位於另一個資料夾中，請取代aws s3 sync dist中的dist 。

• 替換<CloudFront Distr. Id>與您的 CloudFront 指派 ID。

- you can find it in the outputs after `terraform apply` has finished; `cloudfront_distribution_id`

GitHub 操作

如果您喜歡使用自動化，那麼設定起來非常簡單且便宜。

無論如何，這要花多少錢？

|計劃|儲存|分鐘（每月）|

| ----------- | -------- | ------------------- |

| 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.com git 儲存庫，然後；

- `cd ./environments/production`

- `terraform output`

• 在 GitHub 中的以下位置輸入它們：

• 例如，您現在可以create an issue ，詳細說明您網站上的更新。

For each comment that is added, the deployment will start.

• 您可以按照Actions標籤中所採取的部署步驟和日誌進行操作。

• （可選）如果您想要變更 GitHub 操作以使用Pull request ，您可以在部署腳本中進行修改。

> For more alternative triggers, check out the [GitHub Actions documentation](https://docs.github.com/en/actions/using-workflows/triggering-a-workflow).

您的網站上線了！

現在，當您造訪您的網址時； yourwebsite.com ，一切都應該啟動並執行。

我們已經建造了什麼；

• （可選）使用 Migadu 託管電子郵件（或選擇您擁有的任何託管服務）；例如[email protected]

- You can connect this to your ConvertKit.com mailing list for example.

• 您自己的受 DNSSec 保護的個人網域。

- You’ll be certain no hackers can hi-jack your domain.

• 您在 [[AWS]] 上使用 AWS S3 的靜態網站。

- Free web-hosting!

• CloudFront 內容傳遞網路 (CDN)，支援：

- SSL protected website. Form submits are all encrypted by default.

- Increased performance in load speeds, latency across the globe.

- URL rewrites for static websites. No `index.html` will be displayed when navigating. 

- and redirects for 404 not found pages. Your visitors will see the `404.html` page instead of an error text message.

問題？來！

您在 AWS 上遇到什麼困難？

您在 AWS 上部署時遇到問題嗎？

你會怎麼做？

請在評論或Twitter上告訴我

感謝您的寶貴時間，直到下次！

原文出處：https://dev.to/rolfstreefkerk/how-to-deploy-your-own-website-on-aws-1l05