【初心者向け】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インスタンス上にファイルがある場合は、直接ドキュメントルートに移動できます。

# EC2インスタンスにSSH接続
user@local-pc:~$ ssh -i ~/.ssh/your-key.pem [e-mail]

# フォルダの内容を確認
[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コマンドを使用します。

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

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

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

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

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

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

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

# EC2にSSH接続
user@local-pc:~$ ssh -i ~/.ssh/your-key.pem [e-mail]

# 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サーバーがファイルにアクセスできるように、適切な権限を設定します。

# ファイルの所有者を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 エラー

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

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の名前が異なる可能性があります。

ls -la /var/www/html

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

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

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

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

より安全なデプロイ方法

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

1. rsync を使ったデプロイ：変更があったファイルのみを効率的に転送

   rsync -avz -e "ssh -i ~/.ssh/your-key.pem" ./website/ [e-mail]:/tmp/website/
   

2. デプロイスクリプトの作成：デプロイ手順を自動化

   #!/bin/bash
   tar -czf website.tar.gz ./website
   scp -i ~/.ssh/your-key.pem website.tar.gz [e-mail]:~/
   ssh -i ~/.ssh/your-key.pem [e-mail] "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化などがあります。

---