问题：
1. 创建 HTML 页面文件
首先，创建一个简单的 HTML 文件，作为您的前端页面。
文件路径： /var/www/html/index.html (这是 Nginx 默认的根目录，您可以根据需要修改)
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎访问我的网站</title>
<style>
body {
font-family: 'Arial', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.18);
max-width: 80%;
}
h1 {
font-size: 3.5em;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
p {
font-size: 1.5em;
margin-bottom: 30px;
line-height: 1.6;
}
.btn {
display: inline-block;
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="container">
<h1>🎉 欢迎访问！</h1>
<p>这是一个由 Nginx 提供服务的简单前端页面。</p>
<p>服务器当前时间: <span id="serverTime"></span></p>
<a href="#" class="btn">了解更多</a>
</div>
<script>
// 简单的脚本，显示当前时间（客户端时间）
function updateClock() {
const now = new Date();
document.getElementById('serverTime').textContent = now.toLocaleString();
}
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>2. 配置 Nginx
接下来，配置 Nginx 来服务这个页面。
文件路径： /etc/nginx/sites-available/default (Ubuntu/Debian) 或 /etc/nginx/conf.d/default.conf (CentOS/RHEL)， 或者直接修改 /etc/nginx/nginx.conf 中的 http 块内的 server 块。
# /etc/nginx/sites-available/default 或 /etc/nginx/conf.d/default.conf
html
server {
# 监听 80 端口 (HTTP)
listen 80;
# 如果需要监听 443 端口 (HTTPS)，需要 SSL 证书
# listen 443 ssl;
# server_name your-domain.com; # 如果有域名
# 设置网站根目录
root /var/www/html;
# 指定默认索引文件
index index.html index.htm;
# server_name 指令可以指定域名或 IP 地址
# 如果没有域名，可以注释掉或使用 IP/localhost
# server_name example.com www.example.com;
# 处理根路径的请求
location / {
# try_files 指令尝试按顺序查找文件
# $uri 指请求的路径
# $uri/ 指请求路径作为目录
# /index.html 作为最后的备选
try_files $uri $uri/ =404;
}
# 可选：配置静态资源缓存 (如 CSS, JS, 图片)
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y; # 设置浏览器缓存一年
add_header Cache-Control "public, immutable";
# 开启 gzip 压缩可以进一步优化
# gzip_static on; # 如果文件已压缩 (如 .gz)
}
# 错误页面配置
error_page 404 /404.html;
location = /404.html {
internal;
}
# 安全设置 (可选但推荐)
# 禁止访问 .htaccess 文件
location ~ /\.ht {
deny all;
}
}
# 如果您配置了 HTTPS，可以添加如下 server 块 (需要 SSL 证书)
# server {
# listen 443 ssl;
# server_name your-domain.com;
#
# ssl_certificate /path/to/your/certificate.crt;
# ssl_certificate_key /path/to/your/private.key;
#
# ssl_protocols TLSv1.2 TLSv1.3;
# ssl_ciphers HIGH:!aNULL:!MD5;
#
# root /var/www/html;
# index index.html;
#
# location / {
# try_files $uri $uri/ =404;
# }
# }3. 部署步骤
-
创建目录和文件：
sudo mkdir -p /var/www/html sudo nano /var/www/html/index.html # 将上面的 HTML 内容粘贴进去 -
配置 Nginx：
-
编辑对应的 Nginx 配置文件（如
/etc/nginx/sites-available/default）。 -
将上面的 Nginx 配置粘贴进去，根据您的实际情况修改
root路径和server_name。 -
如果使用的是
sites-available，确保创建符号链接：sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/ # 并移除默认的符号链接（如果存在且不需要） # sudo rm /etc/nginx/sites-enabled/default
-
-
测试配置并重启 Nginx：
html# 测试 Nginx 配置语法是否正确 sudo nginx -t # 如果测试通过，重启 Nginx 服务 sudo systemctl restart nginx # 或者 reload (更轻量) # sudo systemctl reload nginx -
设置文件权限 (如果需要)：
htmlsudo chown -R www-data:www-data /var/www/html/ # Ubuntu/Debian # 或 # sudo chown -R nginx:nginx /var/www/html/ # CentOS/RHEL sudo chmod -R 755 /var/www/html/ -
访问页面：
-
在浏览器中输入您的服务器 IP 地址或域名（例如
http://your-server-ip）。 -
您应该能看到一个带有渐变背景、欢迎文字和动态时间的页面。
-
配置了还是访问默认nginx欢迎页面
✅ 方案一：直接在 nginx.conf 中添加 server 块
将您提供的配置文件修改如下，在 http { ... } 的末尾 include /etc/nginx/conf.d/*.conf; 之前 添加 server 块：
html
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;
# --- 开始添加 server 块 ---
server {
listen 80;
# server_name your-domain.com; # 如果有域名，替换并取消注释
# 设置网站根目录（存放 index.html 的文件夹）
root /var/www/html;
index index.html;
# 处理所有请求
location / {
# 尝试匹配文件 -> 目录 -> 最后返回 index.html (适合单页应用)
try_files $uri $uri/ =404;
# 如果是单页应用（如 Vue/React），使用下面这行代替上一行：
# try_files $uri $uri/ /index.html;
}
# 可选：设置静态资源缓存
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 禁止访问隐藏文件，如 .htaccess
location ~ /\. {
deny all;
}
}
# --- server 块结束 ---
include /etc/nginx/conf.d/*.conf;
}✅ 方案二：使用 conf.d 目录（推荐）
📂 确保文件和权限正确
-
创建目录并放置页面：
-
设置权限：
🔁 重新加载 Nginx
html
sudo nginx -t
#这一步会显示nginx配置的哪个文件
# 重新加载配置（不中断服务）
sudo systemctl reload nginx❓ 为什么设置了还是访问其他网页？
-
配置未生效： 您修改的
nginx.conf可能没有被正确加载，或者您修改的是备份文件。确保您编辑的是实际被 Nginx 加载的配置文件（通常是/etc/nginx/nginx.conf）。 -
存在其他
server块： 检查/etc/nginx/conf.d/或/etc/nginx/sites-enabled/目录下是否有其他.conf文件也在监听80端口。Nginx 会根据server_name和请求匹配最合适的server块。如果多个server块监听同一端口且没有server_name，Nginx 会使用第一个 定义的server块。 -
浏览器缓存： 浏览器可能缓存了旧的页面。尝试清除缓存或使用
Ctrl+F5强制刷新。 -
未重启/重载 Nginx： 修改配置后必须重新加载 Nginx 才能生效。
-
文件路径错误： 确保
root指令指向的目录中确实存在index.html文件。
✅ 验证
在浏览器中访问 http://<你的服务器IP>，应该看到您 /var/www/html/index.html 中的内容。
通过以上修改，您的 Nginx 就会专门服务于您指定的前端页面了。
4注意事项
-
防火墙： 确保服务器的防火墙允许
80(HTTP) 和443(HTTPS) 端口的流量。 -
SELinux (CentOS/RHEL): 如果启用了 SELinux，可能需要调整安全上下文 (
chcon) 或设置布尔值。 -
路径：
root指令指定的路径必须与您存放index.html的实际路径一致。 -
Nginx 用户： Nginx 进程（通常是
www-data或nginx用户）需要有权限读取root目录下的文件。 -
可以看下日志文件error.log
