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接続

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

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


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

### Nginxインストール

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

### /var/www/html の作成
```bash
sudo mkdir -p /var/www/html
sudo mv ~/index.html ~/favicon.svg /var/www/html/
sudo chown -R nginx:nginx /var/www/html
sudo chown -R ec2-user:ec2-user /var/www/html
```


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

### Astroプロジェクト作成

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

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

### ① `deploy.sh`ファイルを作成

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

```bash
touch deploy.sh
```

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

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

```bash
#!/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に変更

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

```bash
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インストール

```nginx
sudo dnf install certbot python3-certbot-nginx -y
```

### SSL証明書取得

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

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


### Nginx設定ファイルを編集

```bash
sudo nano /etc/nginx/nginx.conf
```

以下の内容に修正：

```nginx
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log;
    sendfile        on;
    keepalive_timeout  65;

    
    server {
        listen 80;
        listen [::]:80;
        server_name sub-domain.main-domain.com;

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

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

        ssl_certificate /etc/letsencrypt/live/sub-domain.main-domain.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/sub-domain.main-domain.com/privkey.pem;

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

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

```

### Nginx再起動

```nginx
sudo nginx -t
sudo systemctl restart nginx
```





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

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

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