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

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

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

  • 了解 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. 
  1. 一個AWS 帳戶,需要信用卡才能設定。

  2. 一個域名,無論您在哪裡註冊。

- In this how-to I use [Porkbun](porkbun.com) as my favorite registrar.
  1. 一台電腦
- [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/).
  1. 一個GitHub帳戶,以便您可以建立我的範例儲存庫。

  2. (可選)電子郵件收件匣供應商,我使用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 上設定您的網域

登入您的 AWS 控制台。

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

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

  3. 記下Hosted zone ID ,我們將在下一步中使用 Terraform 將所有 Route53 記錄自動化到正確的網域。

Terraform 託管區域 ID

如果您選擇使用 Terraform 實現自動化;

  • 從您的網域註冊商(Porkbun 等)匯出名稱伺服器。

  • 將託管區域資源配置新增至我的範例 Terraform 模組中,並將其連接到需要託管區域 ID 的所有相關資源。

(可選)電子郵件託管

如果您想設定電子郵件託管解決方案,我使用 migadu.com,保持 Route53 網站開啟。

我們將向 Route53 匯入其他設定文字區塊,以使您的網域與收件匣服務搭配使用。

  • 在郵件收件匣服務中,有一個DNS Configuration面板。

  • 取得BIND記錄輸出,複製/貼上所有 DNS 記錄的文字。

如果您需要自動發現您的電子郵件的郵件伺服器;

在提供的 DNS 記錄中檢查這些字串; _autodiscoverautoconfig

取得BIND記錄

  • 然後在 AWS Route53 中,針對您的託管區域; Import zone file ,然後複製貼上該對話方塊中的文字行。

Route53 託管區域文件

  • 現在您可以在郵件應用程式中新增新的電子郵件收件匣。

如果您有_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

路由 53:DNSSec

  • 然後,在下一個畫面中點擊; Establish a Chain of Trust

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

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

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

Porkbun.com DNSSec

  • dsData區塊中輸入以下內容;左邊是 Porkbun 輸入欄位名稱,右邊是值,我將放置在Route53中使用的名稱:
- Key Tag:  `Key tag`
- DS Data Algorithm: `Signing algorithm type`  
- Digest Type: `Digest algorithm type`  
- Digest: `Digest` 

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

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

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

現在我們有了一個 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 中的以下位置輸入它們:

GitHub 秘密配置

  • 例如,您現在可以create an issue ,詳細說明您網站上的更新。
For each comment that is added, the deployment will start.
  • 您可以按照Actions標籤中所採取的部署步驟和日誌進行操作。

GitHub問題,評論部署

  • (可選)如果您想要變更 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


共有 0 則留言