Webサーバーとして圧倒的な軽さと処理速度を誇るNginx（エンジンエックス）。
「Linuxサーバーを借りたけれど、どうやってWebサイトを表示させるの？」という方向けに、インストールから自分で作った簡単なHTMLファイルを表示させるまでの手順を、どこよりも分かりやすくステップ・バイ・ステップで解説します！
今回は、最も広く使われているLinuxディストリビューションであるUbuntu / Debian系の環境をベースに進めていきます。
全体の流れ
やることは驚くほどシンプルで、わずか4ステップです。
- Nginxをインストールする
- ファイアウォール（ポート）を開放する
- 表示したいHTMLファイルを用意する
- Nginxの設定を反映してブラウザで確認する
それでは、さっそく進めていきましょう！
ステップ1：Nginxのインストール
まずはサーバーにログインし、パッケージ管理ツールを使ってNginxをシステムにインストールします。
# パッケージリストを最新に更新
sudo apt update
# Nginxをインストール
sudo apt install nginx -yこれだけでインストールは完了です。インストールが終わると、Nginxは自動的にバックグラウンドで起動します。
ステップ2：起動確認とファイアウォールの設定
正しく動いているか、ステータスを確認してみましょう。
sudo systemctl status nginx画面に active (running) と緑色の文字で表示されていれば、無事に起動しています。
💡 重要なポイント：ファイアウォールの開放
サーバーのファイアウォール（UFWなど）が有効になっている場合、外部からのアクセス（80番ポート）がブロックされてしまいます。Webサイトを見られるように通信を許可しましょう。
# HTTP（80番ポート）のアクセスを許可
sudo ufw allow 'Nginx HTTP'
# 設定を反映
sudo ufw reload注意: AWS（EC2）やGCP、ConoHa VPSなどのクラウドサービスを利用している場合は、各サービスの管理画面（セキュリティグループやパケットフィルター）でも「HTTP（80番ポート）」の通信を許可（インバウンドルールに追加）するのを忘れないでください。
ここで一度、ブラウザで http://サーバーのIPアドレス にアクセスしてみてください。
以下のようなNginxのデフォルトのウェルカム画面が表示されれば第一段階クリアです！
Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working...ステップ3：オリジナルのHTMLファイルを作成する
デフォルトの画面が確認できたら、いよいよあなた自身のオリジナルのHTMLファイルを置いてみましょう。
Nginxが初期設定で読みに行く場所（ドキュメントルート）は、通常 /var/www/html というディレクトリになっています。ここにあるデフォルトのファイルを書き換えるか、新しく作成します。
今回は新しくオリジナルの index.html を作成してみましょう。
# 既存のデフォルトファイルをバックアップ（念のため）
sudo mv /var/www/html/index.nginx-debian.html /var/www/html/index.nginx-debian.html.bak
# 新しいindex.htmlを作成して編集
sudo nano /var/www/html/index.htmlエディタが開いたら、以下の簡単なHTMLコードを貼り付けてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのNginxサイト</title>
<style>
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h1 { color: #2563eb; }
</style>
</head>
<body>
<div class="container">
<h1>Hello from Nginx!</h1>
<p>オリジナルのHTMLファイルの表示に成功しました！</p>
</div>
</body>
</html>貼り付けたら、Ctrl + O（保存）→ Enter → Ctrl + X（閉じる）でエディタを終了します。
ステップ4：設定の確認と反映
HTMLファイルを新しく配置した場合、基本的にはそのまま反映されますが、Nginxの設定を変更した場合や念のための作法として、構文チェックとサーバーのリロードを行います。
# 設定ファイルに間違いがないかチェック
sudo nginx -t画面に nginx: configuration file /etc/nginx/nginx.conf test is successful と出れば問題ありません。
# Nginxを再起動（リロード）して完全に反映
sudo systemctl reload nginxステップ5：ブラウザで最終確認！
もう一度、ブラウザを開いて http://サーバーのIPアドレス にアクセス（またはページを更新）してみてください。
先ほど作成した白いカードに青い文字で「Hello from Nginx!」と書かれたオリジナル画面が表示されましたか？表示されていれば、あなたのWebサーバーの構築は大成功です！
補足：今後Webサイトを本格運用するための豆知識
| 設定項目 | 内容・場所 | 用途 |
| 公開用ディレクトリ | /var/www/html | 画像やCSS、他のHTMLファイルを増やす場合はすべてここに配置します。 |
| メイン設定ファイル | /etc/nginx/nginx.conf | サーバー全体の挙動（同時接続数やログの形式など）を管理します。 |
| サイト別設定ファイル | /etc/nginx/sites-available/ | 1台のサーバーで複数のドメイン（Webサイト）を運営したい場合に設定を書き分けます。 |
Nginxの基本は「指定されたディレクトリにあるファイルを、リクエストに応じてブラウザに返す」というシンプルな仕組みです。これができれば、あとはドメインを設定したり、WordPressを動かしたり、以前紹介したようなPythonアプリ（API）を裏側で連動させたりと、自由自在に拡張していくことができます。
まずはこのシンプルなWebサーバーの第一歩を楽しんでください！
コメント