【初心者向け】EC2のNginxサーバーに自作Webサイトをデプロイする方法

この記事では、Amazon EC2インスタンスにインストールしたNginxサーバーに、自分で作成したWebサイト（HTML、CSS、JavaScriptファイル）をデプロイする方法を初心者向けに解説します。

## 前提条件

- AWS EC2インスタンス（Amazon Linux 2）が起動済み
- Nginxがインストール済み
- ドキュメントルートが`/var/www/html`に設定済み
- ローカルPCに配置したいWebサイトのファイルがある

## 1. デプロイの全体像

Webサイトをデプロイするための基本的な流れは以下の通りです：

1. ローカルPCからEC2にファイルを転送する
2. 転送したファイルをNginxのドキュメントルートに配置する
3. 必要に応じてファイルの権限を設定する
4. ブラウザでアクセスして確認する

## 2. ファイルの転送と配置

### 方法1: 直接配置する（EC2にファイルがすでにある場合）

すでにEC2インスタンス上にファイルがある場合は、直接ドキュメントルートに移動できます。

```bash
# EC2インスタンスにSSH接続
user@local-pc:~$ ssh -i ~/.ssh/your-key.pem ec2-user@xx.xxx.xx.xxx

# フォルダの内容を確認
[ec2-user@ip-xx-xx-xx-xxx ~]$ ls ./front_test/
index.html  script.js  style.css  vocab

# ファイルをドキュメントルートに移動
[ec2-user@ip-xx-xx-xx-xxx ~]$ sudo mv ./front_test/* /var/www/html

# 移動の確認
[ec2-user@ip-xx-xx-xx-xxx ~]$ ls /var/www/html
index.html  script.js  style.css  vocab
```

**Point**: `sudo`を使用しているのは、`/var/www/html`ディレクトリが一般ユーザーには書き込み権限がないためです。

### 方法2: SCPでローカルからファイルを転送する

ローカルPCからファイルを直接転送する場合は、SCPコマンドを使用します。

```bash
# ローカルPCから実行（単一ファイルの場合）
user@local-pc:~$ scp -i ~/.ssh/your-key.pem ./website/index.html ec2-user@xx.xxx.xx.xxx:~/

# ディレクトリごと転送する場合
user@local-pc:~$ scp -i ~/.ssh/your-key.pem -r ./website ec2-user@xx.xxx.xx.xxx:~/
```

転送後は、方法1と同様に`sudo mv`コマンドでファイルをドキュメントルートに移動します。

### 方法3: tarを使って一括転送する（推奨）

複雑なディレクトリ構造やパーミッション問題がある場合は、tarを使った方法が効果的です。

```bash
# ローカルPCでアーカイブ作成
user@local-pc:~$ tar -czf website.tar.gz ./website

# アーカイブを転送
user@local-pc:~$ scp -i ~/.ssh/your-key.pem website.tar.gz ec2-user@xx.xxx.xx.xxx:~/

# EC2にSSH接続
user@local-pc:~$ ssh -i ~/.ssh/your-key.pem ec2-user@xx.xxx.xx.xxx

# EC2上でアーカイブを展開
[ec2-user@ip-xx-xx-xx-xxx ~]$ sudo tar -xzf website.tar.gz -C /var/www/html --strip-components=1
```

`--strip-components=1`オプションを使うと、website ディレクトリ自体は作成せずに、その中身を直接 /var/www/html に展開できます。

## 3. ファイル権限の設定

Webサーバーがファイルにアクセスできるように、適切な権限を設定します。

```bash
# ファイルの所有者をnginxユーザーに変更
[ec2-user@ip-xx-xx-xx-xxx ~]$ sudo chown -R nginx:nginx /var/www/html

# 適切な権限を設定
[ec2-user@ip-xx-xx-xx-xxx ~]$ sudo chmod -R 755 /var/www/html
```

これにより、Nginxはファイルを読み取り、実行できるようになります。ディレクトリは755（rwxr-xr-x）、ファイルは644（rw-r--r--）に設定するのが一般的です。

## 4. 動作確認

ブラウザでEC2インスタンスのパブリックIPアドレスにアクセスして、Webサイトが正しく表示されるか確認します。

```
http://xx.xxx.xx.xxx/
```

表示されない場合は、以下を確認してください：

- Nginxが起動しているか：`sudo systemctl status nginx`
- エラーログを確認：`sudo tail -f /var/log/nginx/error.log`
- ファイルの権限が適切か
- EC2のセキュリティグループでポート80が開放されているか

## よくあるトラブルと解決策

### 1. 403 Forbidden エラー

ファイルの権限やオーナーが原因で発生することが多いです。

```bash
sudo chown -R nginx:nginx /var/www/html
sudo find /var/www/html -type d -exec chmod 755 {} \;
sudo find /var/www/html -type f -exec chmod 644 {} \;
```

### 2. 404 Not Found エラー

ファイルが正しい場所にない、またはindex.htmlの名前が異なる可能性があります。

```bash
ls -la /var/www/html
```

### 3. CSS・JavaScriptが読み込まれない

パスの問題が考えられます。HTMLファイル内のパスを確認してください。

```html
<!-- 絶対パスを使用 -->
<link rel="stylesheet" href="/style.css">

<!-- または相対パスを使用 -->
<link rel="stylesheet" href="./style.css">
```

## より安全なデプロイ方法

運用環境では、以下のような改善を検討してください：

1. **rsync を使ったデプロイ**：変更があったファイルのみを効率的に転送
   ```bash
   rsync -avz -e "ssh -i ~/.ssh/your-key.pem" ./website/ ec2-user@xx.xxx.xx.xxx:/tmp/website/
   ```

2. **デプロイスクリプトの作成**：デプロイ手順を自動化
   ```bash
   #!/bin/bash
   tar -czf website.tar.gz ./website
   scp -i ~/.ssh/your-key.pem website.tar.gz ec2-user@xx.xxx.xx.xxx:~/
   ssh -i ~/.ssh/your-key.pem ec2-user@xx.xxx.xx.xxx "sudo tar -xzf website.tar.gz -C /var/www/html --strip-components=1 && sudo chown -R nginx:nginx /var/www/html"
   ```

3. **バージョン管理**：GitHubなどと連携してCICD（継続的インテグレーション/デプロイ）を構築

## まとめ

この記事では、EC2インスタンス上のNginxサーバーに自作Webサイトをデプロイする方法を紹介しました。

1. ファイルをEC2に転送（SCP、tar）
2. ドキュメントルートに配置
3. 適切な権限設定
4. 動作確認

これで、自分で作成したWebサイトをインターネット上に公開する第一歩を踏み出せました。次のステップとしては、独自ドメインの設定やHTTPS化などがあります。

---