Nginx入門｜Ubuntuへのインストールから設定・静的サイトの表示まで

はじめに

Nginx（エンジンエックス）は、Webページを配信したり、Webアプリケーションへのリクエストを中継したりするソフトウェアです。

この記事では、UbuntuへNginxを直接インストールし、自分で作ったHTMLをブラウザに表示するまでを解説します。

作業の流れは次のとおりです。

Nginxをインストールして起動する
初期ページを確認する
自作HTMLを配置する
サイト用の設定ファイルを作成する
設定を有効にして構文を確認する
設定を再読み込みし、自作HTMLを表示する

今回は、初期ページを80番ポートに残し、自作サイトを8080番ポートで動かします。設定ファイルを作っただけでは反映されないことや、HTMLの保存先とURLの関係も確認しましょう。

1. Nginxとは

Webサーバーの役割

Webサーバーは、ブラウザなどからHTTPリクエストを受け取り、HTML・CSS・JavaScript・画像などを返します。

例えば、ブラウザでWebページを開くと、Webサーバーは指定されたURLに対応するファイルを読み込み、レスポンスとして返します。

Nginxは、このWebサーバーの役割を担うソフトウェアの一つです。

静的配信・リバースプロキシ・負荷分散

Nginxには、主に次の使い方があります。

使い方	役割
静的ファイルの配信	保存してあるHTML・CSS・画像などを返す
リバースプロキシ	リクエストをバックエンドのWebアプリへ転送し、その応答を返す
負荷分散	複数のバックエンドへリクエストを振り分ける

この記事では、最初の「静的ファイルの配信」を実習します。

masterとworkerの概要

通常のNginxは、masterプロセスとworkerプロセスで動作します。

プロセス	主な役割
master	設定の読み込み・検証と、workerの管理
worker	接続やリクエストの処理

workerはイベント駆動の仕組みを使い、多数の接続を効率よく処理します。入門段階では、細かな性能調整よりも、設定を正しく読み込ませる方法を先に覚えれば十分です。nginx.org

2. 実習環境と前提条件

この記事は、次の環境を前提にしています。

Ubuntu 24.04 LTSを使った学習用環境
systemdでサービスを管理できること
sudoを実行できるユーザーで操作すること
Ubuntu標準のAPTリポジトリからNginxを導入すること
実習用の8080番ポートが空いていること

コマンドは、NginxをインストールするUbuntu上のターミナルで実行します。MacやWindowsからSSHで接続している場合も、接続先のUbuntuで実行してください。

Dockerコンテナ内へインストールする手順ではありません。すでにサイトを運用しているサーバーではなく、学習用のUbuntuを使用してください。

アクセス先の整理

確認するもの	Ubuntu自身からのURL	別のPCからのURL
初期ページ	`http://127.0.0.1/`	`http://SERVER_IP/`
今回の自作サイト	`http://127.0.0.1:8080/`	`http://SERVER_IP:8080/`

SERVER_IPは、Ubuntuへ到達できる実際のIPアドレスに置き換えます。

127.0.0.1や`localhost`は、アクセスを実行する機器自身を指します。SSH接続元のPCのブラウザで`localhost`を開いても、接続先Ubuntuへのアクセスにはなりません。

仮想マシンやクラウドでは、PCからUbuntuへ到達するネットワーク経路も必要です。まずUbuntu自身からcurlで確認し、その後に別のPCから試すと切り分けやすくなります。

3. Nginxをインストールして起動する

パッケージ情報を更新します。

sudo apt update

Nginxと、実習で使用するcurl・nanoをインストールします。

sudo apt install nginx curl nano

インストールしたNginxのバージョンを確認します。

nginx -v

バージョン番号は、Ubuntuのバージョンや更新状況によって異なります。

続いて、Nginxを起動し、OS起動時の自動起動も有効にします。

sudo systemctl enable --now nginx

状態を確認します。

sudo systemctl status nginx --no-pager

Active: active (running)になっていれば、Nginxのサービスが動作しています。

Mainline・StableとUbuntuのパッケージは区別する

Nginx公式には、最新の機能・修正を取り込むMainlineと、重要な修正を中心に取り込むStableがあります。

Mainlineを「本番利用できない不安定版」と理解するのは適切ではありません。

また、今回の`apt install nginx`で導入するのはUbuntuが提供するパッケージです。Nginx公式の最新Stableが必ず導入されるわけではありません。今回は導入方法を混在させず、Ubuntu標準のパッケージで進めます。NGINX Documentation

4. 初期ページを確認する

Ubuntu上で、次のコマンドを実行します。

curl -I http://127.0.0.1/

初期状態の学習用環境では、次のようなステータス行が返ることを確認します。

HTTP/1.1 200 OK

これは出力形式の例です。日時やヘッダーの内容は環境によって異なります。

本文も確認できます。

curl http://127.0.0.1/

Nginxの初期ページのHTMLが返れば、HTTPリクエストに応答できています。

Ubuntuにブラウザがある場合は、`http://127.0.0.1/`を開いて確認してください。別のPCから確認する場合は、`http://SERVER_IP/`を使います。

ここでは、インストール直後の設定で配信しています。次に、自作HTMLの配信用設定を追加します。

5. 設定ファイルと公開ディレクトリの場所

今回のUbuntuパッケージ構成では、主に次の場所を使います。

パス	役割
`/etc/nginx/nginx.conf`	Nginx全体の設定
`/etc/nginx/sites-available/`	サイト用設定ファイルの保存先
`/etc/nginx/sites-enabled/`	有効にするサイト設定へのシンボリックリンクを置く場所
`/etc/nginx/conf.d/`	追加設定を置く場所。標準構成では`*.conf`を読み込む
`/var/www/html/`	初期サイトの公開ディレクトリ
`/var/log/nginx/access.log`	アクセスログ
`/var/log/nginx/error.log`	エラーログ

sites-availableと`sites-enabled`は、すべてのNginx環境に共通する必須ディレクトリではありません。DockerイメージやNginx公式パッケージでは構成が異なることがあります。

設定ファイルを読み込む仕組みは、`nginx.conf`にある`include`です。今回のUbuntu標準構成では、`http`ブロック内で次のように追加設定を読み込みます。

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

この2行を新しく追加する必要はありません。現在の構成を理解するための例です。

今回作るファイルの対応は次のとおりです。

対象	今回のパス
配信するHTML	`/var/www/nginx-demo/index.html`
サイト設定の本体	`/etc/nginx/sites-available/nginx-demo`
有効化用のリンク	`/etc/nginx/sites-enabled/nginx-demo`

Ubuntuの公式資料でも、サイト設定を作成し、`sites-enabled`へのリンクで有効化する方法が紹介されています。Ubuntu Server documentation

6. 自作HTMLを配置する

公開ディレクトリを作ります。

sudo mkdir -p /var/www/nginx-demo
sudo chmod 755 /var/www/nginx-demo

HTMLファイルをnanoで作成します。

sudo nano /var/www/nginx-demo/index.html

次の内容を入力してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nginxの動作確認</title>
</head>
<body>
  <h1>Nginxで自作HTMLを表示できました</h1>
  <p>Ubuntu上のNginxから配信しています。</p>
</body>
</html>

nanoでは、`Ctrl + O`を押し、ファイル名を確認してEnterで保存します。`Ctrl + X`で終了します。

ファイルを読み取れる権限にします。

sudo chmod 644 /var/www/nginx-demo/index.html

今回の学習用ディレクトリは、755でディレクトリをたどれるようにし、HTMLは644で読み取れるようにしています。静的HTMLを配信するために、Nginxから書き込める権限は必要ありません。

HTMLの基本構造を確認したい場合は、HTML入門も参考にしてください。

7. サイト用の設定ファイルを作成する

次のファイルを開きます。

sudo nano /etc/nginx/sites-available/nginx-demo

次の内容を保存してください。

server {
    listen 8080 default_server;
    server_name localhost;

    root /var/www/nginx-demo;
    index index.html;

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

これはサイト用の`server`ブロックです。`nginx.conf`全体をこの内容で置き換えないでください。

各設定の意味

設定	役割
`server { ... }`	Webサイトの設定をまとめる
`listen 8080 default_server;`	IPv4の8080番ポートで待ち受け、この待受先の既定サイトにする
`server_name localhost;`	Hostヘッダーの名前と照合するサイト名を指定する
`root /var/www/nginx-demo;`	配信ファイルの基準ディレクトリを指定する
`index index.html;`	ディレクトリへのアクセス時に探すインデックスファイルを指定する
`location / { ... }`	`/`から始まるパスに対する処理を指定する
`try_files $uri $uri/ =404;`	ファイル、ディレクトリの順に探し、見つからなければ404を返す

default_serverは、同じ待受先に一致するサイト名がない場合に使う設定です。そのため、今回は`127.0.0.1`やサーバーのIPアドレスで接続した場合も、このサイトで応答できます。

server_name localhost;は、接続元をlocalhostだけに制限する設定ではありません。また、ドメイン名のDNS登録を行う設定でもありません。nginx.org

URLと実際のファイルの対応

今回の設定では、次のように対応します。

リクエストするパス	配信するファイルの例
`/`	`/var/www/nginx-demo/index.html`
`/index.html`	`/var/www/nginx-demo/index.html`
`/style.css`	`/var/www/nginx-demo/style.css`
`/images/logo.png`	`/var/www/nginx-demo/images/logo.png`

style.cssや画像は、対応するファイルを配置した場合に配信できます。今回作成したのは`index.html`だけです。

rootにURLのパスが対応するため、「ファイルをどこに置くか」と「ブラウザでどのURLを開くか」を合わせる必要があります。

セミコロンと波括弧に注意する

listenや`root`などの設定は、末尾にセミコロン`;`を付けます。`server`や`location`のブロックは、波括弧`{ }`で囲みます。

これらが不足すると、構文エラーになります。

8. 設定を有効化して構文を確認する

シンボリックリンクを作成する

今回のUbuntu標準構成では、`sites-available`へ保存しただけでは設定は読み込まれません。

sites-enabledへシンボリックリンクを作成します。

sudo ln -s /etc/nginx/sites-available/nginx-demo /etc/nginx/sites-enabled/nginx-demo

シンボリックリンクは、設定ファイルの本体を参照するためのものです。設定ファイルをコピーして二重に管理する必要はありません。

確認します。

ls -l /etc/nginx/sites-enabled/nginx-demo

リンク先が`/etc/nginx/sites-available/nginx-demo`になっていることを確認してください。

今回は8080番ポートを使うため、80番ポートの初期サイトを無効にする必要はありません。

nginx -tで構文と参照ファイルを確認する

設定を反映する前に、次を実行します。

sudo nginx -t

正常な場合の出力例です。

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

nginx -tは、設定の構文を確認し、設定内で参照するファイルを開けるかも検査します。ただし、HTMLの表示やネットワーク経路まで確認するコマンドではありません。nginx.org

エラーが出た場合は、表示されたファイル名と行番号を確認し、修正してから再実行してください。エラーが残った状態では、次の再読み込みへ進みません。

9. 設定を再読み込みして自作HTMLを表示する

構文確認に成功したら、設定を反映します。

sudo systemctl reload nginx

再読み込み後に、Ubuntu上で自作サイトへアクセスします。

curl -I http://127.0.0.1:8080/

HTTP/1.1 200 OKが返ることを確認します。続いて、本文も確認してください。

curl http://127.0.0.1:8080/

返ってきたHTMLに、次の内容が含まれていれば、自作HTMLを配信できています。

<h1>Nginxで自作HTMLを表示できました</h1>

ブラウザでも、次のURLを開きます。

http://127.0.0.1:8080/

これはUbuntu自身のブラウザを使う場合のURLです。別のPCからアクセスする場合は、`http://SERVER_IP:8080/`へ置き換えてください。

80番と8080番では表示するサイトが違う

URL	今回表示するもの
`http://127.0.0.1/`	80番ポートの初期ページ
`http://127.0.0.1:8080/`	自作HTMLのページ

自作HTMLを配置したのに初期ページが出る場合は、まずURLに`:8080`があるか確認してください。

HTMLの更新と設定の更新の違い

index.htmlの文章を変更した場合、この実習の構成では通常、Nginxの再読み込みは不要です。ブラウザを再読み込みして確認します。

一方、`listen`や`root`などのNginx設定を変更した場合は、次の順で反映します。

sudo nginx -t
sudo systemctl reload nginx

2つ目のコマンドは、1つ目が成功したことを確認してから実行してください。

10. 別のPCから接続する場合のファイアウォール

Ubuntu自身から接続できても、別のPCから接続できない場合があります。

UFWを使用している場合は、状態を確認します。

sudo ufw status

UFWが有効で、8080番ポートを許可していない場合は、今回のHTTP用ポートを許可します。

sudo ufw allow 8080/tcp

UFWが無効なら、この許可ルールだけではファイアウォールは有効になりません。有効化する場合は、先に必要な通信の許可を設定します。

例えば、SSHが22番ポートの場合は次の順序です。

sudo ufw allow 22/tcp
sudo ufw allow 8080/tcp
sudo ufw enable
sudo ufw status

SSHのポートを変更している場合は、22ではなく実際の番号を許可してください。SSH接続中に、許可設定より先にUFWを有効化すると、接続できなくなる可能性があります。program for managing a netfilter firewall

初期ページも別PCから確認する場合は、必要に応じて80番のTCPも許可します。

クラウドではセキュリティグループ、仮想マシンではネットワーク方式やポート転送など、Ubuntuの外側の設定も確認してください。ポートを許可するだけで、PCからサーバーまでの経路が作られるわけではありません。

今回の通信はHTTPです。公開サイトとして運用する段階では、HTTPSの設定も行います。

11. ログを確認する

アクセスが届いているかを確認するには、アクセスログを使います。

sudo tail -f /var/log/nginx/access.log

この状態でブラウザからページを開いたり、別のターミナルからcurlを実行したりして、ログが追加されるか確認します。

tail -fは、ファイルに追加される内容を表示し続けます。終了するときは`Ctrl + C`を押してください。Nginx自体は停止しません。

問題がある場合は、エラーログも確認します。

sudo tail -n 50 /var/log/nginx/error.log

サービスの起動・再読み込みに失敗した場合は、systemd側のログも確認できます。

sudo journalctl -u nginx -n 50 --no-pager

今回の設定では、サイト別のログ保存先は追加していません。標準構成のログには、初期サイトなどへのアクセスも記録されることがあります。

12. よくあるエラーと確認方法

接続を拒否される・接続できない

最初に、Nginxの起動状態を確認します。

sudo systemctl status nginx --no-pager

8080番ポートの待受状態も確認します。

sudo ss -ltnp 'sport = :8080'

Nginxが起動していても8080番で待ち受けていない場合は、設定の有効化・構文確認・再読み込みを確認してください。

別のサービスが8080番を使用している場合は、Nginxのログに`Address already in use`などが出ることがあります。使用中のサービスを確認し、学習用サイトのポートを変更する場合は、`listen`、アクセス先URL、ファイアウォールの許可をそろえて変更します。

Ubuntu自身では接続でき、別のPCからだけ失敗する場合は、サーバーIP、ファイアウォール、クラウドや仮想マシン側のネットワーク設定を確認します。

自作ページではなく初期ページが表示される

最初に、8080番ポートへアクセスしているか確認します。

設定ファイルとリンクも確認してください。

cat /etc/nginx/sites-available/nginx-demo
ls -l /etc/nginx/sites-enabled/nginx-demo

読み込み対象の設定全体を確認したい場合は、次のコマンドが使えます。

sudo nginx -T

出力の中に、今回の設定ファイルと`listen 8080 default_server;`が含まれるか確認します。

nginx -Tは、ディスク上の設定を検査して表示するコマンドです。現在動作中のプロセスへ反映済みかどうかは、再読み込みの結果と実際のHTTP応答でも確認してください。

403 Forbiddenになる

配信ディレクトリに`index.html`がない場合や、Nginxがファイルを読み取れない場合などに発生します。

ls -ld /var/www/nginx-demo
ls -l /var/www/nginx-demo/index.html
sudo tail -n 50 /var/log/nginx/error.log

今回の実習では、ファイルの配置と権限が次になっているか確認してください。

ディレクトリ：`/var/www/nginx-demo`、755
HTMLファイル：`/var/www/nginx-demo/index.html`、644
設定：`root /var/www/nginx-demo;`と`index index.html;`

親ディレクトリをたどる権限も必要です。原因を確認せず、`chmod 777`で一括して解決しようとするのは避けてください。

404 Not Foundになる

URLに対応するファイルが存在するか確認します。

例えば、`/about.html`へアクセスする場合は、今回の設定では次のファイルが必要です。

/var/www/nginx-demo/about.html

Ubuntuでは、ファイル名の大文字・小文字も区別されます。URL、ファイル名、`root`の指定を照合してください。

nginx -tでエラーになる

よくある原因は次のとおりです。

セミコロン`;`の不足
波括弧`{ }`の対応漏れ
設定名の入力間違い
シンボリックリンク先のファイルが存在しない
同じ待受先で`default_server`を重複させている

エラーに表示されたファイル名と行番号を確認し、修正後に再び`sudo nginx -t`を実行してください。

13. 起動・停止・再読み込みの使い分け

Ubuntuのサービスとして管理する場合は、主に次のコマンドを使います。

操作	コマンド
起動	`sudo systemctl start nginx`
停止	`sudo systemctl stop nginx`
再起動	`sudo systemctl restart nginx`
設定の再読み込み	`sudo systemctl reload nginx`
状態の確認	`sudo systemctl status nginx --no-pager`
OS起動時の自動起動を有効化	`sudo systemctl enable nginx`

通常の設定変更では、構文確認後に`reload`を使います。再読み込みでは、新しい設定でworkerを起動し、古いworkerは処理中のリクエストを終えてから終了します。nginx.org

Nginx自身にも、次のようなコマンドがあります。

操作	コマンド
設定の検査	`sudo nginx -t`
設定の検査と内容の表示	`sudo nginx -T`
バージョン確認	`nginx -v`
設定の再読み込みを通知	`sudo nginx -s reload`
処理中の接続を待って終了	`sudo nginx -s quit`
速やかに停止	`sudo nginx -s stop`
ログファイルを再オープン	`sudo nginx -s reopen`

今回のようにsystemdで管理する場合は、起動・停止・再読み込みを`systemctl`でそろえ、設定検査には`nginx -t`を使うと整理しやすくなります。

14. 実習用サイトを無効にする

実習用サイトを無効にする場合は、今回作成したリンクを削除します。

sudo unlink /etc/nginx/sites-enabled/nginx-demo

設定を検査します。

sudo nginx -t

成功したら再読み込みします。

sudo systemctl reload nginx

これで今回追加した8080番ポートのサイト設定が読み込まれなくなります。設定ファイルの本体とHTMLファイルは残ります。

この実習のためにUFWの8080番許可を追加し、ほかの用途で使わなくなった場合は、状態を確認したうえでそのルールも削除できます。

sudo ufw delete allow 8080/tcp

15. まとめ

この記事では、UbuntuへNginxを直接インストールし、自作HTMLを8080番ポートで配信する設定を作成しました。

rootで配信ファイルの基準ディレクトリを指定する
indexでディレクトリへのアクセス時に探すファイルを指定する
sites-availableに設定を作り、`sites-enabled`のリンクで有効化する
設定変更後は`nginx -t`で検査してから`reload`する
HTTPステータスだけでなく、自作HTMLの本文が返ることも確認する
接続できない場合は、サービス、待受ポート、ログ、ネットワークの順に確認する

まずは「HTMLを置く場所」「設定を保存する場所」「ブラウザから開くURL」の3つを対応させて覚えましょう。

コンテナでNginxを動かす方法はDocker入門、Composeで自作HTMLを配信する方法はDocker Compose入門で紹介しています。実行環境による設定やファイル配置の違いを比べると、理解を深められます。