概要
vpn接続ができるようになったので、nginxをラズパイで立てた。普段はリバースプロキシ的な利用が多いためnginxの設定をほとんど行っていなかったが、せっかくなのでnginxのデフォルトページをいい感じに変えてみようと考えたところうまくいかなかった。
分からなくなりそうなので、一応書いておく。
内容
てっきりデフォルトの設定で読み込んでいると考え、設定を確認したが特にindex.htmlに関する設定は書いていなかった。
sudo cat /etc/nginx/nginx.conf
user www-data;
worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities "TOP" "USER";
# # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
# server {
# listen localhost:110;
# protocol pop3;
# proxy on;
# }
#
# server {
# listen localhost:143;
# protocol imap;
# proxy on;
# }
#}
次に/etc/nginx/conf.d/配下を確認したが、何も存在しなかった。
次に、いろいろディレクトリを漁った結果次の場所にヒントがあった。
sudo vim /etc/nginx/sites-available/default
##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##
# Default server configuration
#
server {
listen 80 default_server;
listen [::]:80 default_server;
# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
# pass PHP scripts to FastCGI server
#
#location ~ \.php$ {
# include snippets/fastcgi-php.conf;
#
# # With php-fpm (or other unix sockets):
# fastcgi_pass unix:/run/php/php7.4-fpm.sock;
# # With php-cgi (or other tcp sockets):
# fastcgi_pass 127.0.0.1:9000;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
# listen 80;
# listen [::]:80;
#
# server_name example.com;
#
# root /var/www/example.com;
# index index.html;
#
# location / {
# try_files $uri $uri/ =404;
# }
#}
実際にディレクトリを調べてみると、/var/www/html/index.nginx-debian.htmlここにデフォルトのファイルがいることが分かった。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Nginx</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-r from-blue-400 to-purple-500 min-h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded-xl shadow-md text-center">
<h1 class="text-4xl font-bold mb-4 text-gray-800">Welcome to Nginx!</h1>
<p class="text-lg text-gray-600 mb-6">
This is a stylish default page served by Nginx.
</p>
<a href="https://nginx.org/en/" target="_blank" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded">
Learn More
</a>
</div>
</body>
</html>
適当なhtmlに置き換えてみる。
変更されたことが分かる。
index index.html index.htm index.nginx-debian.html;を見ると、優先順位的にindex.htmlが先に表示されそうなので、同じ場所にindex.htmlを作成してみる
sudo vim /var/www/html/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Nginx Server</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Navigation -->
<nav class="bg-gray-800 p-4 shadow">
<div class="container mx-auto flex justify-between items-center">
<div class="text-xl font-bold">My Server</div>
<div>
<a href="#home" class="px-3 hover:text-green-300">Home</a>
<a href="#about" class="px-3 hover:text-green-300">About</a>
<a href="#contact" class="px-3 hover:text-green-300">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header id="home" class="relative flex items-center justify-center min-h-screen bg-cover bg-center" style="background-image: url('https://source.unsplash.com/random/1600x900?nature');">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="relative z-10 text-center">
<h1 class="text-5xl font-extrabold mb-4">Welcome to My Nginx Server</h1>
<p class="text-xl mb-8">A custom default page created with Tailwind CSS.</p>
<a href="https://nginx.org/en/" target="_blank" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">
Learn More
</a>
</div>
</header>
<!-- About Section -->
<section id="about" class="py-16 bg-gray-800">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-4 text-center">About This Server</h2>
<p class="max-w-2xl mx-auto text-center text-lg">
This is a sample default page for Nginx that showcases a modern design using Tailwind CSS.
Customize it to fit your needs and make your server stand out.
</p>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-4 text-center">Get in Touch</h2>
<p class="max-w-2xl mx-auto text-center text-lg mb-8">
If you have any questions or feedback, feel free to reach out.
</p>
<div class="flex justify-center">
<a href="mailto:example@example.com" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">
Contact Us
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 py-4">
<div class="container mx-auto text-center">
<p class="text-sm">© 2025 My Server. All rights reserved.</p>
</div>
</footer>
</body>
</html>
sudo systemctl restart nginx
反映されたのが分かる。
まとめ
これまで、何も考えずに配置していたがちょっと設定を深ぼって調べてみたところ面白かった。
htm拡張子については全くの初見であったので少し驚いたものの、htmlと変わらない、歴史的背景でhtm拡張子が作成されたということを知れただけでも面白かった。以上！