VitePress + AWS でブログを公開するまでの全手順
公開日: 2026-02-15
このブログ「ガロッキーの自由帳」を公開するまでに実際にやったことを、構築手順としてまとめました。
Windows環境を汚さないよう、Windows 11 + WSL2 (Ubuntu 24.04 LTS) の環境で構築を進めています。
1. 開発環境のセットアップ (WSL2 + Homebrew)
AWS CLIやTerraformのインストールを楽にするため、WSL2上にHomebrewを導入しました（必須ではありませんが便利です）。
# Homebrewのインストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# PATHを通す
eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv bash)"
# バージョン確認
brew -v
# 永続化
echo "eval \"\$(/home/linuxbrew/.linuxbrew/bin/brew shellenv bash)\"" >> ~/.bashrc
# 必要なLinuxパッケージのインストール
sudo apt update
sudo apt install build-essential procps curl file git2. 必須ツールのインストール
Terraformのバージョン管理ツール（tfenv）と、AWS CLIをインストールします。
# Terraform環境構築
brew install tfenv
tfenv -v
tfenv install latest
tfenv use latest
terraform -v
# AWS CLIインストール
brew install awscli
aws --version3. AWSの初期設定とドメインの取得
インフラを構築する前に、AWSマネジメントコンソールとドメイン取得サービスで下準備を行います。
- AWSの設定:
- rootユーザーでAWS Organizationsを作成。
- 「IAM Identity Center」を有効化。
- ユーザーを作成（メールでパスワード設定）。
- 初回bootstrap時だけ、復旧手順を確認したうえで
AdministratorAccessを割り当てる。日常運用のprofileには専用のBlogTerraformOperatorを割り当てる。 - AWSアカウントに作成したユーザーと許可セットを割り当てる。共通Identity Center・permission set・state基盤は別リポジトリ infra-aws の
bootstrap/account-foundation/で管理し、このブログのTerraformは本リポジトリのterraform/で管理する。 - （事前準備として）S3バケットを全て初期設定で作成。
- root break-glassが必要な場合は、root MFAで一時的に
AdministratorAccessを再割り当てし、復旧後ただちに解除する。root Access Keyは作成しない。
- ドメインの取得:
- お名前.comで
garookie.comを取得。AWS Route53だと年間15USDかかりますが、初年度無料で取得できました。
- お名前.comで
4. AWSへのSSOログイン設定
AWS CLIからアクセスできるようにプロファイルを作成します。
aws configure sso --profile blog対話形式で以下のように設定しました。
- SSO session name:
blog - SSO start URL:
https://<your-identity-center-id>.awsapps.com/start（実際のURLに置き換える。公開文書には実値を書かない） - SSO region:
ap-northeast-1 - SSO registration scopes: （そのままEnter）
- ※ブラウザが開くのでログインして「Allow」をクリック
- Default client Region: （そのままEnter）
- CLI default output format: （そのままEnter）
- Profile name:
blog
日常のブログTerraformにはpermission set BlogTerraformOperator を割り当てた blog profileを使います。共通基盤を保守する非日常の作業では、permission set InfraAwsIdentityCenterBootstrap を割り当てた infra-bootstrap profileを使用します。どちらのprofileもセッション有効期間は1時間です。AWS CLIの詳細は AWS CLIでIAM Identity Centerを設定する、permission setのカスタマイズは IAM Identity Centerのpermission set を参照してください。
設定後、以下のコマンドでセッション情報を確認します。
aws sso login --profile blog
aws sts get-caller-identity --profile blogTerraformを実行するシェルでは、bash / zshなら export AWS_PROFILE=blog、PowerShellなら $env:AWS_PROFILE = "blog" を設定します。
5. Terraformによるインフラ構築
インフラをコードからデプロイします。tfファイルがあるディレクトリで初期化と計画の確認を行います。
terraform fmt
terraform init -backend=false
terraform validate
terraform init # remote backendを使うためSSOログイン必須
terraform plan # SSOログイン必須fmt、init -backend=false、validate はAWS認証なしで実行できます。remote backendを使う init、plan、apply は blog profileでSSOログイン済みであることが必要です。適用時は terraform apply を実行します。 planを実行すると、以下の13リソースが作成されることが確認できました。
| # | リソース | 説明 |
|---|---|---|
| 1 | aws_s3_bucket.blog | S3バケット your-bucket-name (ap-northeast-1) |
| 2 | aws_s3_bucket_versioning.blog | バージョニング有効化 |
| 3 | aws_s3_bucket_public_access_block.blog | パブリックアクセス全ブロック |
| 4 | aws_s3_bucket_policy.blog | CloudFrontからのアクセスのみ許可するポリシー |
| 5 | aws_s3_bucket_website_configuration.blog | 静的ウェブサイトホスティング設定 (index.html / 404.html) |
| 6 | aws_cloudfront_origin_access_control.blog | OAC (S3へのセキュアなアクセス) |
| 7 | aws_cloudfront_distribution.blog | CloudFrontディストリビューション (aliases: your-domain) |
| 8 | aws_acm_certificate.blog | SSL証明書 (us-east-1, DNS検証) |
| 9 | aws_acm_certificate_validation.blog | 証明書のDNS検証完了待ち |
| 10 | aws_route53_zone.blog | Route53ホストゾーン your-domain |
| 11 | aws_route53_record.cert_validation | 証明書検証用DNSレコード |
| 12 | aws_route53_record.blog_a | Aレコード → CloudFront |
| 13 | aws_route53_record.blog_aaaa | AAAAレコード → CloudFront (IPv6) |
問題なければ terraform apply を実行します。 途中、ターミナルにネームサーバー情報が出力されるので、その値をお名前.com側のネームサーバー設定に登録し、再度 terraform apply を実行して構築を完了させます。
6. GitHub ActionsによるCI/CD設定
最後に、記事の自動デプロイを設定します。GitHubの production Environment と OIDC を使用し、SSOやAccess Keyは使いません。GitHubの Settings > Environments > production に以下を登録します。
- AWS_ROLE_ARN:
arn:aws:iam::<account-id>:role/personal-blog-github-actions
さらに、環境変数として以下の値もSecretに登録します。
| Secret名 | 値 |
|---|---|
| AWS_REGION | ap-northeast-1 |
| S3_BUCKET_NAME | your-bucket-name |
| CLOUDFRONT_DISTRIBUTION_ID | YOUR_DISTRIBUTION_ID |
| DOMAIN_NAME | your-domain |
これで、main ブランチにプッシュするだけで、GitHub Actionsが自動でビルド・デプロイを行ってくれる環境が完成しました！