VitePress + AWS でブログを公開するまでの全手順
公開日: 2026-02-15
このブログ「ガロッキーの自由帳」を公開するまでに実際にやったことを、構築手順としてまとめました。
Windows環境を汚さないよう、Windows 11 + WSL2 (Ubuntu 24.04 LTS) の環境で構築を進めています。
1. 開発環境のセットアップ (WSL2 + Homebrew)
AWS CLIやTerraformのインストールを楽にするため、WSL2上にHomebrewを導入しました（必須ではありませんが便利です）。
bash
# 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をインストールします。
bash
# 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」を有効化。
- ユーザーを作成（メールでパスワード設定）。
- 許可セットを作成し「AdministratorAccess」を選択。
- AWSアカウントに作成したユーザーと許可セットを割り当て。
- （事前準備として）S3バケットを全て初期設定で作成。
- ドメインの取得:
- お名前.comで
garookie.comを取得。AWS Route53だと年間15USDかかりますが、初年度無料で取得できました。
- お名前.comで
4. AWSへのSSOログイン設定
AWS CLIからアクセスできるようにプロファイルを作成します。
bash
aws configure sso対話形式で以下のように設定しました。
- SSO session name:
blog - SSO start URL:
https://d-xxxx.awsapps.com/start（Identity CenterのURL） - SSO region:
ap-northeast-1 - SSO registration scopes: （そのままEnter）
- ※ブラウザが開くのでログインして「Allow」をクリック
- Default client Region: （そのままEnter）
- CLI default output format: （そのままEnter）
- Profile name:
blog
設定後、以下のコマンドでセッション情報を確認します。
bash
aws sts get-caller-identity --profile blog5. Terraformによるインフラ構築
インフラをコードからデプロイします。tfファイルがあるディレクトリで初期化と計画の確認を行います。
bash
terraform init
terraform planplanを実行すると、以下の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の Settings > Secrets > Actions に以下を登録しました。
- AWS_ROLE_ARN:
arn:aws:iam::アカウント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が自動でビルド・デプロイを行ってくれる環境が完成しました！