route53でドメイン管理されているサイトのサブドメインにSSGで作ったサイトを載せる手順書

メインサイトが別フレームワークで作られていても、ペロッと静的サイトをサブドメインに載せたい場合ってありますよね。そういう時のための手順書です。

なお、今回静的サイトはAstroで作成し、deploy.shを実行することでbuildからアップロードまで一つのコマンドで実行できるようになっています。

【全体の流れ】

1. 新規EC2インスタンスの作成
2. EC2インスタンスへのSSH接続
3. Nginxのインストールと設定
4. Astroサイトのローカル構築とビルド
5. AstroビルドファイルをEC2にアップロード（deploy.sh作成）
6. Route 53でサブドメインのDNS設定
7. SSL証明書（Let's Encrypt）を取得し、Nginxに適用
8. セキュリティグループの設定（HTTP→HTTPSリダイレクト対応）

1. 新規EC2インスタンスの作成

• AWSコンソールで EC2 にアクセス。
• 「インスタンスを起動」をクリック。
• Amazon Linux 2023 AMI を選択。
• インスタンスタイプを選択（例: t2.micro）。
• 「キーペア」を作成または既存のものを選択し、保存。
• ネットワーク設定でセキュリティグループを作成し、以下を追加。
  • SSH (ポート22): ソースをマイIP
  • HTTP (ポート80): ソースを0.0.0.0/0
  • HTTPS (ポート443): ソースを0.0.0.0/0
• 「インスタンスを起動」し、パブリックIPをメモ。

2. EC2インスタンスへのSSH接続

ターミナルで以下のコマンドを実行：

ssh -i /path/to/your-key.pem ec2-user@<EC2パブリックIP>

3. Nginxのインストールと設定

Nginxインストール

sudo dnf update -y
sudo dnf install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

/var/www/html の作成

sudo mkdir -p /var/www/html
sudo mv ~/index.html ~/favicon.svg /var/www/html/
sudo chown -R nginx:nginx /var/www/html

4. Astroサイトのローカル構築とビルド

Astroプロジェクト作成

npm create astro@latest your-project-name
cd your-project-name
yarn install

5. AstroビルドファイルをEC2にアップロード（deploy.sh作成）

① deploy.shファイルを作成

Astroプロジェクトのルートディレクトリで以下を実行してdeploy.shを作成します。

touch deploy.sh

② 正しいファイル内容を記述

作成したdeploy.shに以下を記述します。

#!/bin/bash

# Astroのビルド
echo "Astroビルドを開始..."
npx astro build

# ビルドが成功したか確認
if [ $? -eq 0 ]; then
  echo "ビルド成功！EC2にファイルをアップロードします..."

  # SCPでEC2にファイルをアップロード
  scp -i /path/to/your-key.pem -r ./dist/* ec2-user@<EC2パブリックIP>:/var/www/html

  # アップロード後の確認
  if [ $? -eq 0 ]; then
    echo "アップロード完了しました！"
  else
    echo "アップロードに失敗しました。"
  fi
else
  echo "ビルドに失敗しました。"
fi

※ 上記コードの変更箇所

• /path/to/your-key.pem → ご自身のキーファイルのパスに変更
• <EC2パブリックIP> → EC2インスタンスのパブリックIPに変更

③ 実行権限を付与し、アップロード

chmod +x deploy.sh
./deploy.sh

（これで、ビルドからEC2へのアップロードまで一括実行）

6. Route 53でサブドメインのDNS設定

• AWSコンソール → Route 53を開く。
• 「ホストゾーン」を選択し、ドメインyour-domain.comをクリック。
• 「レコードを作成」で以下を設定。
  • 名前: subdomain.your-domain.com
  • 種類: A
  • 値: EC2のパブリックIP
  • TTL: デフォルトのまま（300秒）
• 「レコードを作成」をクリックして設定を保存。

7. SSL証明書（Let's Encrypt）を取得し、Nginxに適用

Certbotインストール

sudo dnf install certbot python3-certbot-nginx -y

SSL証明書取得

sudo certbot --nginx -d subdomain.your-domain.com

• メールアドレス入力、利用規約に同意

Nginx設定ファイルを編集

sudo nano /etc/nginx/nginx.conf

以下の内容に修正：

server {
    listen 80;
    listen [::]:80;
    server_name subdomain.your-domain.com;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    http2 on;
    server_name subdomain.your-domain.com;
    root /var/www/html;

    ssl_certificate /etc/letsencrypt/live/subdomain.your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/subdomain.your-domain.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        try_files $uri $uri/ =404;
    }
}

Nginx再起動

sudo nginx -t
sudo systemctl restart nginx

8. セキュリティグループの設定（HTTP→HTTPSリダイレクト対応）

• EC2コンソール → 「セキュリティグループ」を選択。
• 今回作成したセキュリティグループを編集し、HTTP（ポート80）のアクセスを許可する。

---

これで`subdomain.your-domain.com`にアクセスするとbuildした内容が表示されるはずです。