Nginx 入门：静态站点、反向代理、HTTPS 配置

tommy879

215人浏览 · 2026-06-18 14:11:56

tommy879 · 2026-06-18 14:11:56 发布

前言：Nginx 是什么？为什么你需要它？

你写了一个前端项目，在本地 npm run dev 跑得好好的。现在你想把它部署到服务器上，让别人通过域名访问。

你可能会问：我把打包好的文件放到服务器上，然后呢？

这时候需要一个 Web 服务器来“接待”来访的请求。Nginx 就是干这个活的。

Nginx 能做什么？

功能	说明	使用频率
托管静态网站	把 HTML、CSS、JS 文件展示给用户	⭐⭐⭐⭐⭐
反向代理	把 API 请求转发给后端服务	⭐⭐⭐⭐⭐
负载均衡	在多台服务器之间分配流量	⭐⭐⭐⭐
配置 HTTPS	给网站加上加密访问	⭐⭐⭐⭐⭐
限流	防止单个 IP 请求太频繁	⭐⭐⭐

本文会从最基础的安装开始，带你了解配置 Nginx 最常用的三个功能：静态托管、反向代理、HTTPS。

一、安装 Nginx

1.1 Linux（Ubuntu / Debian）

bash

# 更新软件包列表
sudo apt update

# 安装 Nginx
sudo apt install nginx

# 启动 Nginx 服务
sudo systemctl start nginx

# 设置开机自启
sudo systemctl enable nginx

# 检查运行状态
sudo systemctl status nginx

安装完成后，在浏览器输入服务器的 IP 地址，看到 Nginx 欢迎页面就说明安装成功了。

1.2 CentOS / RHEL

bash

sudo yum install epel-release
sudo yum install nginx
sudo systemctl start nginx
sudo systemctl enable nginx

1.3 macOS（本地开发测试用）

bash

brew install nginx
nginx

1.4 验证安装

bash

nginx -v

输出版本号说明安装成功。

二、配置文件在哪里？

Nginx 的配置文件位置因操作系统而异：

系统	配置文件位置
Ubuntu/Debian	`/etc/nginx/nginx.conf`
CentOS/RHEL	`/etc/nginx/nginx.conf`
macOS（Homebrew）	`/usr/local/etc/nginx/nginx.conf`

2.1 Ubuntu/Debian 的目录结构

Ubuntu/Debian 的 Nginx 配置是模块化的，结构如下：

text

/etc/nginx/
├── nginx.conf              # 主配置文件
├── sites-available/        # 所有站点的配置（存放处）
│   └── example.com
├── sites-enabled/          # 启用的站点配置（符号链接）
│   └── example.com -> ../sites-available/example.com
└── conf.d/                 # 其他零散配置

关键理解：sites-available 是“存放配置”的地方，sites-enabled 是“启用配置”的地方。你在 sites-available 里写配置，然后创建符号链接到 sites-enabled 来启用它。

2.2 配置文件的基本结构

nginx

# 全局块：影响 Nginx 整体的行为
user www-data;
worker_processes auto;

# events 块：影响网络连接的处理方式
events {
    worker_connections 1024;
}

# http 块：HTTP 服务的所有配置
http {
    # 这里可以放全局的 HTTP 配置

    # server 块：一个站点的配置
    server {
        listen 80;
        server_name example.com;

        location / {
            root /var/www/html;
            index index.html;
        }
    }

    # 另一个站点
    server {
        listen 80;
        server_name another.com;
        root /var/www/another;
    }
}

三、场景一：托管静态站点

这是最基础的场景：你的项目打包后是一个 dist 文件夹，里面有 index.html、CSS、JS 等文件。

3.1 最基本的配置

假设你的项目文件放在 /var/www/myapp/dist/：

nginx

server {
    listen 80;
    server_name example.com;

    root /var/www/myapp/dist;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

3.2 配置解读

指令	作用
`listen 80`	监听 80 端口（HTTP 的默认端口）
`server_name`	绑定的域名
`root`	网站文件的根目录
`index`	默认首页文件名
`try_files $uri $uri/ /index.html`	如果找不到文件，返回 index.html（用于单页应用路由）

3.3 单页应用路由支持

Vue、React 等框架的路由模式（history 模式），刷新页面时会请求一个不存在的路径，比如 /user/123。

try_files $uri $uri/ /index.html; 的作用就是：如果这个路径没有对应的文件，就把请求交给 index.html 处理。

3.4 多站点部署（一台服务器托管多个网站）

创建站点1配置 /etc/nginx/sites-available/site1.conf：

nginx

server {
    listen 80;
    server_name site1.com;

    root /var/www/site1;
    index index.html;
}

创建站点2配置 /etc/nginx/sites-available/site2.conf：

nginx

server {
    listen 80;
    server_name site2.com;

    root /var/www/site2;
    index index.html;
}

启用这两个站点：

bash

# 创建符号链接
sudo ln -s /etc/nginx/sites-available/site1.conf /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/site2.conf /etc/nginx/sites-enabled/

# 测试配置语法
sudo nginx -t

# 重载配置
sudo systemctl reload nginx

3.5 给静态资源加缓存

让浏览器缓存图片、CSS、JS 文件，减少重复下载：

nginx

location / {
    root /var/www/myapp/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
}

# 静态资源缓存 30 天
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff2)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

四、场景二：反向代理

4.1 反向代理是什么？

前后端分离的项目中，前端和后端跑在不同的端口上：

前端：http://example.com（Nginx 托管静态文件）
后端 API：http://localhost:8080（Node.js / Java / Go 等服务）

反向代理的作用：当用户请求 /api/xxx 时，Nginx 把这个请求转发给后端的 localhost:8080。

4.2 反向代理配置

nginx

server {
    listen 80;
    server_name example.com;

    # 前端静态文件
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 反向代理
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

4.3 配置解读

指令	作用
`proxy_pass`	把请求转发到哪个地址
`proxy_set_header Host $host`	把原始域名传给后端
`proxy_set_header X-Real-IP $remote_addr`	把真实客户端 IP 传给后端
`proxy_set_header X-Forwarded-For`	记录经过的代理链
`proxy_set_header X-Forwarded-Proto`	告诉后端用的是 HTTP 还是 HTTPS

4.4 proxy_pass 后面有没有斜杠的区别

nginx

# 方式1：后端收到 /api/user
proxy_pass http://localhost:8080;

# 方式2：后端收到 /user（注意最后的 /）
proxy_pass http://localhost:8080/;

有斜杠时，/api/ 前缀会被去掉。实际开发中通常用方式1，让后端保持 /api 前缀。

4.5 负载均衡（多台后端）

如果后端有多台服务器，可以用 upstream 做负载均衡：

nginx

upstream backend {
    server 192.168.1.10:8080;
    server 192.168.1.11:8080;
    server 192.168.1.12:8080;
}

server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

upstream 默认是轮询策略，请求轮流发给三台服务器。也支持权重、IP 哈希等其他策略。

五、场景三：配置 HTTPS

5.1 为什么要配 HTTPS？

数据加密传输，防止被窃听
浏览器地址栏显示小锁，用户更信任
搜索引擎对 HTTPS 网站有排名优待

5.2 申请 SSL 证书

推荐方案：Let's Encrypt（免费，自动化）

bash

# Ubuntu/Debian
sudo apt install certbot python3-certbot-nginx

# 自动申请并安装证书
sudo certbot --nginx -d example.com -d www.example.com

手动申请：云服务商（如阿里云、腾讯云）都提供免费 DV 证书。下载时选择 Nginx 格式，会得到两个文件：.pem（或 .crt）和 .key。

5.3 上传证书到服务器

bash

# 创建证书存放目录
sudo mkdir -p /etc/nginx/ssl

# 将证书文件放到该目录
# 例如：
# /etc/nginx/ssl/example.com.pem
# /etc/nginx/ssl/example.com.key

# 设置私钥权限（只有 root 可读）
sudo chmod 600 /etc/nginx/ssl/example.com.key

5.4 HTTPS 完整配置

nginx

# 80 端口：所有 HTTP 请求强制跳转到 HTTPS
server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

# 443 端口：HTTPS 服务
server {
    listen 443 ssl;
    server_name example.com www.example.com;

    # SSL 证书配置
    ssl_certificate /etc/nginx/ssl/example.com.pem;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    # 安全增强配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    # 前端静态文件
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 反向代理
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
    }
}

5.5 配置解读

指令	作用
`return 301 https://$host$request_uri`	HTTP 永久重定向到 HTTPS
`listen 443 ssl`	监听 443 端口，启用 SSL
`ssl_certificate`	证书文件路径
`ssl_certificate_key`	私钥文件路径
`ssl_protocols TLSv1.2 TLSv1.3`	只启用安全的 TLS 版本
`X-Forwarded-Proto https`	告诉后端当前用的是 HTTPS

六、新手最容易踩的 5 个坑

坑 1：配置文件写错了没检查

改完配置直接重载，结果 Nginx 起不来了。

解决方法：每次改完配置先执行 sudo nginx -t，语法没问题再重载。

坑 2：证书文件路径写错了

ssl_certificate 指向了一个不存在的文件，HTTPS 启动失败。

解决方法：用绝对路径，确认文件存在，且 Nginx 进程有读取权限。

坑 3：忘记放行 443 端口

Nginx 配置好了，但云服务商的安全组没放行 443 端口，外网访问不了。

解决方法：检查云控制台的安全组规则，确保 443 端口对公网开放。

坑 4：单页应用刷新 404

try_files 没配置好，刷新页面返回 404。

解决方法：在 location / 里加 try_files $uri $uri/ /index.html;。

坑 5：后端收不到真实客户端 IP

反向代理配置缺少 proxy_set_header X-Real-IP，后端日志里全是 127.0.0.1。

解决方法：加上 proxy_set_header X-Real-IP $remote_addr;。

七、常用命令速查

场景	命令
测试配置文件语法	`sudo nginx -t`
启动 Nginx	`sudo systemctl start nginx`
停止 Nginx	`sudo systemctl stop nginx`
重载配置（不中断服务）	`sudo systemctl reload nginx`
查看 Nginx 运行状态	`sudo systemctl status nginx`
查看错误日志（实时）	`sudo tail -f /var/log/nginx/error.log`
查看访问日志（实时）	`sudo tail -f /var/log/nginx/access.log`

最后

Nginx 的配置文件看起来有点复杂，但核心就是 server 块 + location 块 的组合：

server 定义一个站点（监听哪个端口、绑定哪个域名）
location 定义 URL 路径怎么处理（返回文件还是转发请求）

掌握了本文的三大场景——静态托管、反向代理、HTTPS，你已经能处理绝大部分部署需求了。

附录：配置速查模板

静态站点 + 反向代理 + HTTPS（完整模板）

nginx

# HTTP 跳转 HTTPS
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

# HTTPS 服务
server {
    listen 443 ssl;
    server_name example.com;

    # 证书
    ssl_certificate /etc/nginx/ssl/example.com.pem;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;
    ssl_protocols TLSv1.2 TLSv1.3;

    # 前端静态文件
    root /var/www/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 反向代理
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
    }

    # 静态资源缓存
    location ~* \.(css|js|jpg|png|gif|svg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

openEuler 社区

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐

服务器初始化

openEuler 社区

如何迅速搭建站群

openEuler 社区

别再让你的代码在服务器角落里吃灰了！AI时代，如何优雅地把代码变成真金白银？

《AI时代如何让闲置代码变现？程序员创收新思路》摘要：在AI技术快速发展的当下，程序员常将解决特定问题的代码束之高阁，造成资源浪费。本文提出：1）利用AI编程工具降低开发门槛，将创意转化为产品；2）通过新兴部署平台简化上线流程，解决技术小白部署难题；3）构建代码交易生态，让优质代码成为可持续获利的数字资产。文章为技术从业者提供了从创意到变现的完整路径，建议开发者转变思维，将技术能力转化为实际收益