🚀 初級編：Nginxで静的Webサーバー構築（CentOS版）
はじめに
以下環境では、CentOS7を利用しております。
VS-CodeのRemote-SSHのような拡張機能を用いたほうが良いかもしれません。(本環境では利用しておりません)
🎯 目標
Nginxを使って、以下の構成を実現します：
-
http://<サーバーIP>/にアクセスすると、自分で作成したHTMLページが表示される - カスタムエラーページ（404, 50x）を設定する
- MIMEタイプの基本動作を理解する
✅ 前提条件
- OS：CentOS 7 または 8
- Nginxがインストール・起動済み
確認コマンド：sudo systemctl status nginx - ブラウザでサーバーにアクセスできる環境があること（例：同一ネットワーク、ファイアウォール許可など）
⚙️ ステップ１：Nginx設定の確認・編集
CentOSにNginxをインストールすると、以下のような構成が自動で有効になります：
- メイン設定ファイル：
/etc/nginx/nginx.conf - サブ設定ファイル：
/etc/nginx/conf.d/*.confが自動で読み込まれる
まず、既存の設定ファイルを確認します：
cat /etc/nginx/conf.d/default.conf
例として、以下のようになっている場合：
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
→ /usr/share/nginx/html/index.html を編集すれば、http://<サーバーIP>/ の出力が変更されます。
✏️ ステップ２：index.htmlの編集
sudo vi /usr/share/nginx/html/index.html
以下のようなHTMLを記述して保存：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Nginx Site</title>
</head>
<body>
<h1>こんにちは、Nginx！</h1>
</body>
</html>
🌐 ステップ３：ブラウザで動作確認
ブラウザを開き、以下のURLにアクセス：
http://<サーバーのIPアドレス>/
→ 「こんにちは、Nginx！」と表示されれば成功！
📄 ステップ４：カスタムエラーページの設定（任意）
4-1. エラーページの作成
🔸 404ページ
sudo vi /usr/share/nginx/html/404.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>404 Not Found</title>
<style>
body { text-align: center; font-family: sans-serif; padding: 50px; }
h1 { color: #c00; font-size: 48px; }
</style>
</head>
<body>
<h1>404 Not Found</h1>
<p>お探しのページは見つかりませんでした。</p>
</body>
</html>
🔸 50xページ
sudo vi /usr/share/nginx/html/50x.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サーバーエラー</title>
<style>
body { text-align: center; font-family: sans-serif; padding: 50px; }
h1 { color: #f90; font-size: 48px; }
</style>
</head>
<body>
<h1>500 Internal Server Error</h1>
<p>サーバー内部でエラーが発生しました。後ほど再度お試しください。</p>
</body>
</html>
4-2. Nginx設定ファイルに反映
sudo vi /etc/nginx/conf.d/default.conf
以下を追記または修正：
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
internal;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location /error-test {
return 500;
}
🔄 設定のリロード
sudo nginx -t && sudo systemctl reload nginx
✅ 動作確認
-
404の確認
ブラウザで：http://<サーバーIP>/not-found-page -
50xの確認
ブラウザで：http://<サーバーIP>/error-test
→ 確認後 /error-test の設定は削除 or コメントアウト
📦 ステップ5：MIMEタイプの確認
Nginxはレスポンスヘッダーに Content-Type を正しく付与するために、以下のファイルを参照します：
/etc/nginx/mime.types
例：
text/html html htm shtml;
→ .html, .htm, .shtml ファイルは text/html として扱われる。
🧼 トラブルシューティング
| 症状 | 原因・対応方法 |
|---|---|
| 403 Forbidden | パーミッション（chmod, chown）の確認 |
| 404 Not Found |
root と location の整合性、パスの確認 |
| ブラウザで文字化け |
<meta charset="UTF-8"> の記載忘れ or MIMEタイプの不一致 |
nginx -tでエラー |
シンタックスミス。エラーメッセージを確認 |