nginx配置
Nginx 配置简单教程:网页是怎么跳转的?
你可以先把 Nginx 理解成一个网站的接待员:用户在浏览器输入网址,Nginx 根据域名、端口和 URL 路径,决定把请求交给哪个网页、哪个网站,或者哪一个后端程序处理。
先区分一个非常重要的概念:
- 网页跳转:浏览器从一个网址变成另一个网址,例如从
/跳转到/login.html。 - 网页访问:浏览器请求
/login.html,Nginx 找到对应的文件并返回,网址不一定发生变化。 - 反向代理:Nginx 把请求转发给后端程序,例如 Java、Python 或 Node.js 服务。
这三种行为都可以通过 Nginx 配置实现,但原理不同。
一、先理解整个网站的访问流程
用户浏览器
输入 https://example.com/login.html
DNS 解析
将域名解析到服务器 IP
Nginx
监听端口 → 匹配域名 → 匹配路径 → 决定如何处理
静态网页
HTML / CSS / JS / 图片
后端程序
Java / Python / Node.js
处理结果再通过 HTTP/HTTPS 返回浏览器
举个例子:你访问 https://example.com/about.html,Nginx 可以在服务器上找到 about.html 并返回给你;也可以把请求转给后端;还可以告诉浏览器去访问另一个网址。
二、Nginx 配置文件在哪里?
在 Ubuntu 上,常见的安装和配置方式如下。
# 安装 Nginx
sudo apt update
sudo apt install nginx -y
# 查看运行状态
sudo systemctl status nginx
# 查看主配置文件
sudo nano /etc/nginx/nginx.conf
# 查看网站配置目录
ls /etc/nginx/sites-available/
ls /etc/nginx/sites-enabled/常见目录的作用:
| 路径 | 作用 |
|---|---|
/etc/nginx/nginx.conf | 主配置文件 |
/etc/nginx/sites-available/ | 存放网站配置 |
/etc/nginx/sites-enabled/ | 启用的网站配置,常通过软链接关联 |
/var/www/html/ | Ubuntu 默认网站文件目录 |
/var/log/nginx/access.log | 访问日志 |
/var/log/nginx/error.log | 错误日志 |
Nginx 配置有层级结构,最常见的是 http、server、location 三层。
http {
server {
listen 80;
server_name example.com;
location / {
root /var/www/html;
index index.html;
}
}
}注意:上面是结构示意。http 一般写在主配置文件中,而网站的 server 配置通常放在独立的网站配置文件里。
三、最重要的三个配置:server、location、root
我们先创建一个简单的网站,理解它们各自的作用。
1. server:决定访问哪个网站
server {
listen 80;
server_name demo.example.com;
root /var/www/demo;
index index.html;
}解释:
listen 80;:监听 HTTP 的 80 端口。server_name demo.example.com;:匹配访问请求中的域名。root /var/www/demo;:设置网站文件的根目录。index index.html;:访问目录时,优先查找index.html。
假如服务器上配置了两个网站:
server {
listen 80;
server_name a.example.com;
root /var/www/site-a;
}
server {
listen 80;
server_name b.example.com;
root /var/www/site-b;
}那么访问 a.example.com 和 b.example.com,Nginx 就可以返回不同网站的内容,即使它们使用的是同一台服务器和同一个 IP。
2. location:决定 URL 路径怎么处理
假设你有这样一个网站:
/:首页/about.html:关于页面/images/logo.png:网站 Logo/api/users:用户数据接口
可以这样配置:
server {
listen 80;
server_name demo.example.com;
root /var/www/demo;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /images/ {
# 匹配图片请求
}
location /api/ {
# 可以在这里配置后端代理
}
}这里的 location 是按照 URL 路径来匹配请求的。
| 配置 | 主要匹配目标 |
|---|---|
location / | 普通网页路径的兜底规则 |
location /images/ | 以 /images/ 开头的路径 |
location /api/ | 以 /api/ 开头的路径 |
location = /login.html | 只匹配 /login.html 这个路径 |
其中,try_files $uri $uri/ =404; 的含义是:先检查请求对应的文件,再检查对应的目录;如果都不存在,就返回 404。
关键理解:location 本身不一定会让网页跳转,它只是决定 Nginx 如何处理请求。
3. root 和 alias 有什么区别?
例如,服务器上的文件是:
/var/www/demo/
├── index.html
├── about.html
└── images/
└── logo.png当配置 root /var/www/demo; 时:
浏览器请求:/about.html
Nginx 查找:/var/www/demo/about.html
浏览器请求:/images/logo.png
Nginx 查找:/var/www/demo/images/logo.png简单来说,root 通常会把完整请求路径拼接到根目录后面。
而 alias 是把匹配到的路径前缀替换成另一个目录,例如:
location /images/ {
alias /data/pictures/;
}访问 /images/logo.png 时,Nginx 查找的是:
/data/pictures/logo.png初学阶段先掌握 root 就够了,使用 alias 时要特别注意路径前缀和末尾的 /。
四、网页之间究竟是怎么跳转的?
这是重点。常见有三种方式。
方式一:HTML 自己跳转(最常见)
在网站目录中创建两个文件。
/var/www/demo/index.html:
<!DOCTYPE html>
<html>
<body>
<h1>这是首页</h1>
<a href="/about.html">点击查看关于页面</a>
</body>
</html>/var/www/demo/about.html:
<!DOCTYPE html>
<html>
<body>
<h1>这是关于页面</h1>
<a href="/">返回首页</a>
</body>
</html>这时,用户点击“点击查看关于页面”,浏览器就会请求 /about.html。
第一步:显示首页
浏览器访问 /,Nginx 返回 index.html。
第二步:点击链接
HTML 中的 href="/about.html" 告诉浏览器请求新路径。
第三步:返回新页面
Nginx 找到 about.html 并返回,浏览器显示新页面。
注意:这种情况下,是浏览器发起了新请求,Nginx 负责返回对应的网页。Nginx 并不是主动去点击链接。
方式二:Nginx 强制跳转(301 / 302)
比如你希望访问 /old 时自动跳转到 /new.html:
server {
listen 80;
server_name demo.example.com;
root /var/www/demo;
location = /old {
return 302 /new.html;
}
}当浏览器请求 /old 时,Nginx 返回一个 HTTP 302 响应,告诉浏览器去请求 /new.html。
| 状态码 | 含义 | 常见用途 |
|---|---|---|
301 | 永久重定向 | 旧网址永久迁移 |
302 | 临时重定向 | 临时更换访问地址 |
404 | 资源不存在 | 找不到对应网页 |
区别在于:HTML 的 href 是用户点击链接后发起请求;Nginx 的 return 302 则是服务器告诉浏览器更换地址。两种情况下,浏览器地址栏都会随访问路径变化。
方式三:Nginx 把请求转给后端(反向代理)
很多网站并不只有 HTML 文件,还需要登录、查询数据库、调用业务接口。
例如,用户访问:
https://demo.example.com/api/usersNginx 可以把请求转发给运行在本机 8080 端口的后端程序:
server {
listen 80;
server_name demo.example.com;
location /api/ {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}请求流程是:
浏览器
↓ 请求 /api/users
Nginx
↓ 转发请求
127.0.0.1:8080 的后端程序
↓ 返回数据
Nginx
↓ 返回响应
浏览器这里有个容易忽略的细节:proxy_pass 的末尾是否带 /,会影响 URI 的转发方式。
例如,在 location /api/ 下:
proxy_pass http://127.0.0.1:8080;通常把/api/users原样转发为/api/users。proxy_pass http://127.0.0.1:8080/;会用/替换匹配的/api/前缀,转发为/users。
这两种写法都可能正确,具体取决于后端程序期望接收什么路径。
五、动手配置一个能访问的网站
下面我们用 Ubuntu 做一个最小的完整实验。
第一步:创建网页文件
sudo mkdir -p /var/www/demo
sudo nano /var/www/demo/index.html写入:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网站</title>
</head>
<body>
<h1>欢迎来到首页</h1>
<a href="/about.html">进入关于页面</a>
</body>
</html>再创建第二个网页:
sudo nano /var/www/demo/about.html写入:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>关于我们</title>
</head>
<body>
<h1>这是关于页面</h1>
<a href="/">返回首页</a>
</body>
</html>第二步:创建 Nginx 网站配置
sudo nano /etc/nginx/sites-available/demo写入以下配置:
server {
listen 8080;
server_name _;
root /var/www/demo;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}这里用 8080 端口做实验,避免与默认的 80 端口网站冲突。
第三步:启用网站
sudo ln -s /etc/nginx/sites-available/demo \
/etc/nginx/sites-enabled/demo检查配置语法:
sudo nginx -t如果显示 syntax is ok 和 test is successful,就可以重新加载配置:
sudo systemctl reload nginx第四步:验证访问
在服务器本机执行:
curl http://127.0.0.1:8080/
curl http://127.0.0.1:8080/about.html如果返回对应 HTML 内容,说明 Nginx 已经能够找到并返回网页文件。
如果要从自己电脑的浏览器访问服务器,需要确保服务器防火墙和云平台安全组允许访问 8080 端口。测试完成后,建议关闭不必要的公网端口。
六、最后记住这张对照表
| 你想实现的功能 | 主要使用什么 |
|---|---|
| 访问域名时打开某个网站 | server_name |
| 访问首页显示哪个文件 | index |
| 请求某个 URL 时查找对应文件 | root、location |
| 点击文字进入另一个网页 | HTML 的 <a href=""> |
| 访问旧网址自动跳到新网址 | return 301 或 return 302 |
| 把请求交给后端程序 | proxy_pass |
| 找不到网页时返回 404 | try_files 或 return 404 |
学习建议: 先把静态网页、server、location、root 和 href 学会,再学习 301/302 跳转,最后学习反向代理和 HTTPS。掌握这条路线,你就能理解大多数基础 Nginx 网站配置。