はじめに
Nginxを使用した静的コンテンツの配信をローカル環境で手軽に体感することを目的としておりますので、Nginxに初めて触れる方向けの内容となっております。
環境
- nginx-1.26.3
- Ubuntu 24.04
静的コンテンツの配信方法
-
index.htmlの作成 - 設定ファイルの作成
- 設定を有効化
-
/etc/nginx/nginx.confの修正 -
/etc/nginx/conf.d/default.confを/etc/nginx/sites-availableに移動 - 設定テスト
- 設定の反映&Nginxの再起動
index.htmlの作成
すでに作成されている場合は飛ばしていただいて結構です。
index.htmlの中身は何でも大丈夫です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Nginx Site</title>
</head>
<body>
<h1>Welcome to my Nginx site!</h1>
<p>This is a sample page served by Nginx.</p>
</body>
</html>
設定ファイルの作成
sudo mkdir -p /etc/nginx/sites-available
sudo vim /etc/nginx/sites-available/default
設定ファイル内に記述すること
server {
listen 80;
server_name localhost;
# リクエストされた際にドキュメントがある場所
root /path/to/static/files;
# リクエストを受けた際に提供するファイル名
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
注意点
rootのディレクトリ名にスペースや特殊文字などを含む場合、パス全体をダブルクォート" "で囲みます。
設定を有効化
sudo mkdir -p /etc/nginx/sites-enabled
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default
sites-available/にある設定をsites-enabled/にシンボリックリンクで適用
/etc/nginx/nginx.confの修正
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
最後の行にinclude /etc/nginx/sites-enabled/*;を追加します。
/etc/nginx/sites-enabled/内にあるすべての設定ファイルをNginxの設定に組み込むことができるようになります。
/etc/nginx/conf.d/default.confを/etc/nginx/sites-availableに移動
sudo mv /etc/nginx/conf.d/default.conf /etc/nginx/sites-available/
/etc/nginx/sites-availableに移動する理由
/etc/nginx/conf.d/default.confにserver_name localhost;が含まれており、それが原因で他の設定が適用されなくなることがあるからです。
設定テスト
sudo nginx -t
syntax is okと表示されれば問題ないです。
設定の反映&Nginxの再起動
sudo systemctl reload nginx
sudo systemctl restart nginx
補足:sites-availableとsites-enabledで分ける理由
/etc/nginx/sites-availableはすべての設定ファイルを保存し、/etc/nginx/sites-enabledは実際に有効化された設定のリンクを保存することで、サイトの有効化・無効化を簡単に管理するためです。
まとめ
以上で、静的コンテンツを表示できました。