AWS + Cloudflareで無料でサイトをホスティングしている

こんにちは、こんにちは！AWSでほぼ無料でサイトを上げて、GitHubに自動デプロイパイプラインもつけるんだ。これがこのポストで紹介する内容だ、煩わしい話はしないぞ.

ここでの考え方はシンプルだ：準備されたリポジトリ（オープンソース、MIT、最後にリンクがある）を取って、何が動いているかを理解し、自分のプロジェクトに合わせて適応する。ポートフォリオ、ランディングページ、静的ドキュメント、React、Vue、Vite、AstroのSPAがあってもいい。最終的にHTML/CSS/JSが生成されればいい。

コードが落ちる前に、ちょっと三つの概念をまとめてみましょう。すでに詳しい人は、さっさと実践部分に飛び込んでください.

AWS、これは何ですか？

AWSはAmazonのクラウドサービスです。サーバーを買ってプラグインして落ちないように祈る代わりに、インフラの「小さな部分」を利用する形で借りることができます。簡単なもの（S3にファイルを保存する）から複雑なもの（クラスタ Kubernetes のマネジメント、マルチリージョンデータベース、生成型 AI など）まで対応しています。

ホスティング用の静的サイトの場合、私たちは基本的に四つのツールを使います：

S3：オブジェクトストレージ。クラウド上のフォルダにあなたのファイルを置く場所を想像してください。
CloudFront：グローバルCDN。AWSのグローバルエッジサーバーでサイトを配信するので、東京にいる人もサンパウロにいる人も速く読み込めます。
ACM：SSL証明書管理ツール。無料でHTTPSを提供し、自動更新機能付き.
IAM：誰が何ができるかを管理。アクセス権限、ロールなど.

そしてCloudflare、AWS以外ではDNSプロバイダとして機能。無料プランで解決できるため、Route 53を購入する必要はありません.

インフラストラクチャ・コード（IaC）、何に役立つのか？

オペラの要約：AWSコンソールをクリックする代わりに、コードファイルでインフラを記述します。利点：

Gitでバージョン管理できます.
一つのコマンドでどの環境にもデプロイできます.
壊れたらdiffで確認できます.
インフラのコードレビュー、マノ.

最も有名なツール：Terraform、Pulumi、CloudFormation（AWSのもの）とAWS CDK は何を使いますか？

AWS CDK、どういうことですか？

CDK = Cloud Development Kit。AWS でインフラを書く「現代的な」方法です。巨大な YAML/JSON (純粋な CloudFormation) を書く代わりに、TypeScript、Python、Java、Go または C# を書きます。CDK はそれを CloudFormation にコンパイルし、AWS が適用します。

利点: オートコンプリート、型付け、高レベルの抽象化（「コンストラクト」と呼ばれるもの）を得ます。OAC、プライベートS3、バケットポリシーを設定するために20の機能を設定する代わりに、クラスをインスタンス化するだけで完了します。

CDKスタックの例:

export class MinhaStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const bucket = new s3.Bucket(this, 'MeuBucket', {
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      encryption: s3.BucketEncryption.S3_MANAGED,
    });
  }
}

すぐに、これでプライベートなS3が暗号化で作成されます。どこもクリックしなくてもいいです。

私たちが構築するアーキテクチャ

サイトの流れはこんな感じです：

翻訳：

ユーザーがブラウザでseusite.comにアクセスします。
CloudflareがDNSを解決し、CloudFrontにポイントします。
CloudFrontはHTTPS経由で配信し（ACM証明書を使用）、OACを使用してプライベートS3のファイルを取得します.
S3は決して公開されません。CloudFrontのみがそれと通信します.

そしてデプロイの側では：

あなたはmainブランチにプッシュします.
GitHub ActionsはOIDC経由でAWSに認証します（固定アクセスキーなし、より安全です）。
cdk deployを実行し、s3 sync は CloudFront のキャッシュ無効です。

いいね？実行する準備をします。

リポジトリ

プロジェクトはこちらです。MIT ライセンスで、自由にクローンできます：

github.com/markgerald/aws-cdk-static-site-starter

ドキュメントのバージョンが英語とポルトガル語__JHSNS_SEG_211f888d_56__ で用意されています。ここで、幸せな道のりを要約します.

前提条件

まず、あなたには必要があります:

AWSアカウント（無料トライアルがあるので、支払いなしで遊べます).
Node.js 22以降がインストールされています.
AWS CLIが設定されています (aws configure).
Cloudflareで権威的なDNSとしてドメインがあります.

Node/AWS CLIをまだインストールしたことがない場合は、こちらにステップバイステップのチュートリアルがあります：ローカルインストールです。

Cloudflareを設定するには、こちらをご覧ください：ドメイン、DNS、SSL/TLSのCloudflare設定です。

`.env`

git clone https://github.com/markgerald/aws-cdk-static-site-starter.git
cd aws-cdk-static-site-starter
cp .env.example .env

をクローンして設定し、__JHSNS_SEG_211f888d_73__を開きます。.envエディタなしで調整します。これが設定の核心です。

PROJECT_NAME=meu-site
DOMAIN_NAME=meusite.com
WWW_DOMAIN_NAME=www.meusite.com

AWS_ACCOUNT_ID=123456789012
AWS_REGION=eu-west-1
CERTIFICATE_REGION=us-east-1

ENABLE_SPA_FALLBACK=true

CREATE_GITHUB_OIDC_ROLE=false
GITHUB_OWNER=seuuser
GITHUB_REPO=seu-repo
GITHUB_BRANCH=main
GITHUB_OIDC_PROVIDER_ARN=

二つのポイントに注意してください：

CERTIFICATE_REGION テム何となんやus-east-1. CloudFrontはこの地域のACMの特定のものを受け取るだけ、AWSのルールです。
AWS_REGIONどこにでもできます。私は使っています。eu-west-1デフォルトでsa-east-1 (サンパウロ) は同じように動作します。

インストールし、ブートストラップを行います。

npm install

# Bootstrap nas duas regiões (cert e stack principal)
npx cdk bootstrap aws://123456789012/us-east-1
npx cdk bootstrap aws://123456789012/eu-west-1

ブートストラップは「初期設定」のようなもので、CDKがアカウントで行います。アセットバケットを作成し、デプロイ用のロールを設定などです。一度ごとにリージョンで実行し、忘れるだけです。

初回デプロイ

npm run build
npm run build:site
npm test

npx cdk deploy --all --require-approval never

初めて、ACMはDNSの検証待ち状態になります。これは次のようなことです：AWSはドメインがあなたのものかどうかを確認する必要があります。彼らはあなたにコピーするための奇妙なCNAMEをCloudflareに表示します

AWSコンソールにアクセスして> ACM > リージョン us-east-1> あなたの証明書を確認してください。それには次のようなものがあります：

Name:  _abc123.meusite.com
Value: _xyz789.acm-validations.aws
Type:  CNAME

これをCloudflareにコピーしてください、DNSのみ (グレーの雲、プロキシなし)。数分間待って、ACMがIssuedをマークし、デプロイが続きます。

検証の詳細：クラウドフロア ACM なしのリポジトリ.

CloudFrontにドメインを指定します

スタックが上がった後、CDKはd111111abcdef8.cloudfront.netのような出力を返します。Cloudflareにアクセスして作成します：

Type   Name   Target
CNAME  @      d111111abcdef8.cloudfront.net
CNAME  www    d111111abcdef8.cloudfront.net

DNSのみで始まります もし Cloudflare のオレンジ色のプロキシを有効にしたい場合は、フルモード（厳格） を SSL/TLS で使用してください。絶対にFlexible（リダイレクトループを引き起こします）を使用しないでください。

ブラウザを開き、https://meusite.com にアクセスすると、リポジトリのサンプルページが読み込まれます。

あなたのサイトに適用する方法

今から重要な部分です： あなたのサイトは例として使わない場所です.

サイトのファイルが含まれるフォルダはwebsite_src/です。デフォルトではReact + Viteの最小構成が含まれます。構造:

website_src/
├── favicon.svg
├── index.html
├── src/
│   └── (componentes React)
├── tsconfig.json
└── vite.config.ts

あなたには二つの選択肢があります.

オプション1:プロジェクト全体を`website_src/`

に置きます。より簡単です。コンテンツを削除してwebsite_src/ あなたのプロジェクト（Next exportされたもの、Astro、Vue、純HTML、何でも）をエクスポートします。スクリプト build:site を package.json に合わせて、あなたのフレームワークのビルドを実行するように調整します。現在はこんな感じです：

"build:site": "vite build --config website_src/vite.config.ts"

Astroを使用している場合、次のようなものになります：

"build:site": "cd website_src && npm install && npm run build"

重要なのは、のビルドが最終的にwebsite_dist/に出力される必要があるということです。なぜなら、デプロイがS3にアップロードするのはそのフォルダだからです。あなたのフレームワークの出力をそこに設定してください：

// vite.config.ts
export default defineConfig({
  build: {
    outDir: '../website_dist',
  },
});

オプション2：モノレポとして使用

あなたのサイトを別のリポジトリに保持し、ファイルを生成して、それをwebsite_dist/ はただデプロイだけです。フロントエンドチームがインフラチームから分かれている場合に便利です。

純粋なHTML？いいですよ。

もしあなたのサイトがただのHTML/CSS/JSの静的なら、すべてを直接 website_dist/ に置きます：

mkdir -p website_dist
cp -r meu-site-pronto/* website_dist/

そしてSPAフォールバックを無効にします（クライアントサイドルートがない場合、index.htmlのフォールバックは必要ありません）。

ENABLE_SPA_FALLBACK=false

サイトのデプロイを行います

設定とビルド後：

npm run build:site

BUCKET_NAME=$(aws cloudformation describe-stacks \
  --stack-name aws-cdk-static-site-starter-static-site \
  --region eu-west-1 \
  --query "Stacks[0].Outputs[?OutputKey=='WebsiteBucketName'].OutputValue" \
  --output text)

DISTRIBUTION_ID=$(aws cloudformation describe-stacks \
  --stack-name aws-cdk-static-site-starter-static-site \
  --region eu-west-1 \
  --query "Stacks[0].Outputs[?OutputKey=='CloudFrontDistributionId'].OutputValue" \
  --output text)

aws s3 sync website_dist/ "s3://${BUCKET_NAME}" --delete --cache-control "public,max-age=300"
aws cloudfront create-invalidation --distribution-id "$DISTRIBUTION_ID" --paths "/*"

このcreate-invalidationは、CloudFrontに新しいバージョンを取得させるために強制します。これがないと、数分間/数時間キャッシュが古いものを提供する可能性があります。

Dica: これをスクリプトにして一度で実行できるdeploy-site.sh.

GitHub Actionsですべてを自動化する

手順は学ぶのに良い。本番環境ではmainにpushしてサイトが自動的に更新されるようにしたい

リポジトリには既に二つのワークフローが含まれている

.github/workflows/ci.yml：PRとpush時に実行され、ビルド/テスト/合成を行い、AWSの認証情報なしで動作する
.github/workflows/deploy.yml：メインでプッシュし、OIDC経由で認証し、cdk deployを行い、同期と無効化を行います。

OIDCは便利な手法です：GitHubにAWS_ACCESS_KEY_IDとAWS_SECRET_ACCESS_KEYを秘密として保存する代わりに（これらはログに漏洩します）、GitHub ActionsはAWSに一時的な認証情報を要求し、GitHubのOIDCプロバイダを信頼します。固定キーなし、手動の回転なし。

IAMロールを信頼するOIDCで作成し、.envで有効にします：

CREATE_GITHUB_OIDC_ROLE=true
GITHUB_OWNER=seuuser
GITHUB_REPO=seu-repo
GITHUB_BRANCH=main

再度npx cdk deployを実行し、出力GithubActionsRoleArnをコピーして、GitHubのリポジトリ変数として追加します：

AWS_ROLE_ARN=arn:aws:iam::123456789012:role/...github-actions-deploy

他の変数と一緒に（同じキーは.envと同じです）:

AWS_ACCOUNT_ID=123456789012
AWS_REGION=eu-west-1
DOMAIN_NAME=meusite.com
WWW_DOMAIN_NAME=www.meusite.com
PROJECT_NAME=meu-site
CERTIFICATE_REGION=us-east-1
ENABLE_SPA_FALLBACK=true
CREATE_GITHUB_OIDC_ROLE=false
GITHUB_OWNER=seuuser
GITHUB_REPO=seu-repo
GITHUB_BRANCH=main

mainにプッシュして、Actionsでビルド、デプロイ、同期、無効化を賢くする。すべて自動的です.

これはいくらかかりますか？

小さなサイト（月に数万回のヒットまで）の場合、コストは月額セントavoまたはゼロ、量に応じて：

ACM：CloudFront向けの公証書は無料です。
S3：ストレージとリクエストに対して料金を請求します。小規模なサイトはセントavoで済みます。
CloudFront：無料トライアル月額プランは慷慨で（1 TBの転送量＋10Mリクエスト）。それ以上は有料です.
Cloudflare DNS：無料プランで解決します.

高くなる可能性のあるもの：

CloudFrontでの高トラフィック（無料トライアルプランを超える場合）。
頻繁かつ広範な無効化（/*直接、1日に何度も）。
WAF、ログ、Lambda@Edge、CloudFront Functionsを不要にして有効にする

そのため、プロジェクト意図的にこれらを有効にしない。必要であれば後で有効にし、コストを意識する

セキュリティは、ご飯と豆

セットアップにはすでに含まれている:

S3とBlockPublicAccess。一度も公開されていない。
CloudFrontはOAC（現代的な方法）経由でS3にアクセスしません、OAIのレガシー方法ではありません.
HTTPは自動的にHTTPSにリダイレクトします.
ワークフローはOIDCを使用し、長期間有効なアクセスキーは不要です.

本番環境では、AdministratorAccessのデプロイロールをより限られた権限を持つポリシーに置き換えます。リードマークではその方法が説明されています.

そして「すべてを削除する」部分は？

遊びを終わらせたいですか？まずバケットを空にしてください（oautoDeleteObjectsタfalse意図的に、カスタムリソースを避けるために):

BUCKET_NAME=$(aws cloudformation describe-stacks \
  --stack-name aws-cdk-static-site-starter-static-site \
  --region eu-west-1 \
  --query "Stacks[0].Outputs[?OutputKey=='WebsiteBucketName'].OutputValue" \
  --output text)

aws s3 rm "s3://${BUCKET_NAME}" --recursive
npx cdk destroy --all

クラウドフロアーでもCNAMEを削除するのを忘れないでください。

閉じるには

起こったことを要約すると：

AWS、IaC、CDKを学んだ（または復習した）
AWS上で静的サイトをHTTPS、グローバルCDN、CloudflareのDNSでデプロイした
GitHub Actions経由でOIDCを使った自動デプロイを設定した
ほぼ何もお金がかからなかった

プロジェクトはオープンソースで、github.com/markgerald/aws-cdk-static-site-starterにあるを楽しんでください、スターレットをください。バグを見つけたり、提案があれば、PRを送ったり、問題を開いたりしてください.

疑問ですか？下でコメントをどうぞ、私は答えます.

お願いします、話しました！👋

おすすめ購読元

DEV Community

AWS、これは何ですか？

インフラストラクチャ・コード（IaC）、何に役立つのか？

AWS CDK、どういうことですか？

私たちが構築するアーキテクチャ

リポジトリ

前提条件

`.env`

インストールし、ブートストラップを行います。

初回デプロイ

CloudFrontにドメインを指定します

あなたのサイトに適用する方法

オプション1:プロジェクト全体を`website_src/`

オプション2：モノレポとして使用

純粋なHTML？いいですよ。

サイトのデプロイを行います

GitHub Actionsですべてを自動化する

これはいくらかかりますか？

セキュリティは、ご飯と豆

そして「すべてを削除する」部分は？

閉じるには

有用なリンク

おすすめ購読元

DEV Community

AWS、これは何ですか？

インフラストラクチャ・コード（IaC）、何に役立つのか？

AWS CDK、どういうことですか？

私たちが構築するアーキテクチャ

リポジトリ

前提条件

.env

インストールし、ブートストラップを行います。

初回デプロイ

CloudFrontにドメインを指定します

あなたのサイトに適用する方法

オプション1:プロジェクト全体をwebsite_src/

オプション2：モノレポとして使用

純粋なHTML？いいですよ。

サイトのデプロイを行います

GitHub Actionsですべてを自動化する

これはいくらかかりますか？

セキュリティは、ご飯と豆

そして「すべてを削除する」部分は？

閉じるには

有用なリンク

`.env`

オプション1:プロジェクト全体を`website_src/`