Nginx与Ajax 备忘录

目录

AJAX

[Nginx 是什么？](#Nginx 是什么？)

[二、Nginx 在项目中的位置](#二、Nginx 在项目中的位置)

[三、Nginx 是 Web 服务器吗？](#三、Nginx 是 Web 服务器吗？)

[四、Nginx 的"路由"是什么？](#四、Nginx 的“路由”是什么？)

[五、Ubuntu 安装 Nginx](#五、Ubuntu 安装 Nginx)

[1. 更新软件源](#1. 更新软件源)

[2. 安装 Nginx](#2. 安装 Nginx)

[六、Nginx 服务管理](#六、Nginx 服务管理)

启动

停止

重启

重新加载配置

[七、查看 Nginx 是否正常运行](#七、查看 Nginx 是否正常运行)

八、最重要的配置检查命令

[nginx -t](#nginx -t)

[九、检查 Nginx 是否监听端口](#九、检查 Nginx 是否监听端口)

[十、检查 Nginx 进程](#十、检查 Nginx 进程)

[十一 使用 curl 测试网页](#十一 使用 curl 测试网页)

[十二、Nginx 常用配置位置](#十二、Nginx 常用配置位置)

十三、推荐的网站配置方式

---

AJAX

可以理解为"异步更新数据"。更准确地说：

AJAX（Asynchronous JavaScript and XML）是一种让网页在不刷新整个页面的情况下，与服务器异步通信并更新部分页面内容的技术。

例如：

1. 用户点击"加载更多"

2. JavaScript 发 AJAX 请求给服务器

3. 服务器返回数据

4. JavaScript 拿到数据

5. 只更新页面的一部分，不需要整个页面刷新

比如：

fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    document.querySelector('#list').innerHTML = data;
  });

这里 fetch 发请求，服务器返回数据，然后 JS 更新 #list。

AJAX = 异步请求 + 局部更新页面

不过要注意：AJAX 不等于"更新数据"本身。它核心是"异步和服务器通信"，至于拿数据、改数据、删数据，都可以通过 AJAX 完成。

Nginx 是什么？

Nginx（Engine X）是一款高性能的 Web 服务器和反向代理服务器。

它最常见的作用有：

1. 提供静态文件

   • HTML

   • CSS

   • JavaScript

   • 图片

   • 视频等

2. HTTP 请求匹配

   • 根据 URL 匹配不同的 location

   • 决定这个请求由 Nginx 自己处理，还是转发给后端

3. 反向代理

   • 将浏览器请求转发给 Java、C++、Node.js、Python 等后端程序

4. 负载均衡

   • 一个 Nginx 后面可以连接多个后端服务器

5. HTTPS / SSL

   • 可以在 Nginx 层处理 HTTPS

---

二、Nginx 在项目中的位置

一个典型的前后端项目结构：

                  浏览器
                    │
                    │ HTTP / HTTPS
                    ↓
                 Nginx
                /     \
               /       \
              ↓         ↓
        静态资源       后端 API
       HTML/CSS/JS        │
                          ↓
                     C++ / Java / Go
                          │
                          ↓
                       数据库

例如：

GET /

Nginx 可以直接返回：

index.html

而：

GET /api/user

可以通过 Nginx 转发给：

C++ Server :9000

所以 Nginx 可以理解成：

接收 HTTP 请求 → 根据规则匹配 → 自己处理或者转发给后端。

---

三、Nginx 是 Web 服务器吗？

Nginx 本身就是 Web Server。

例如配置：

server {
    listen 80;

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

浏览器访问：

http://localhost

Nginx 就可以直接读取：

/var/www/html/index.html

然后返回给浏览器，不需要 C++、Java 或其他后端程序。

---

四、Nginx 的"路由"是什么？

Nginx 中最重要的概念之一是：

location

例如：

server {
    listen 80;

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

    location /api/ {
        proxy_pass http://127.0.0.1:9000;
    }
}

含义：

请求 /index.html
        ↓
location /
        ↓
Nginx 自己找文件


请求 /api/user
        ↓
location /api/
        ↓
转发给 127.0.0.1:9000

因此可以简单理解：

Nginx 的路由主要负责"这个请求交给谁"。

而后端程序中的路由负责：

"这个请求具体执行哪个业务代码"。

例如：

浏览器
  ↓
GET /api/user/100
  ↓
Nginx
  ↓
location /api/
  ↓
C++ Server
  ↓
/api/user/{id} 路由
  ↓
查询数据库

---

五、Ubuntu 安装 Nginx

1. 更新软件源

sudo apt update

备注：

更新 Ubuntu 软件包索引，不等于升级系统。

---

2. 安装 Nginx

sudo apt install nginx

如果需要自动确认：

sudo apt install -y nginx

---

六、Nginx 服务管理

启动

sudo systemctl start nginx

停止

sudo systemctl stop nginx

重启

sudo systemctl restart nginx

重新加载配置

sudo systemctl reload nginx

推荐修改配置后使用：

sudo nginx -t
sudo systemctl reload nginx

而不是每次都 restart。

原因：

nginx -t
   ↓
检查配置
   ↓
没有问题
   ↓
reload
   ↓
加载新配置

这样可以尽量避免因为配置错误导致服务中断。

---

七、查看 Nginx 是否正常运行

systemctl status nginx

如果看到：

Active: active (running)

说明 Nginx 进程正在运行。

但是要注意：

running 只说明进程在运行，不代表浏览器一定能访问。

还需要检查端口。

---

八、最重要的配置检查命令

nginx -t

sudo nginx -t

正常：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

含义：

配置文件语法正确

这是**修改 Nginx 配置后的必查命令，**推荐操作：

sudo nginx -t

确认成功以后：

sudo systemctl reload nginx

---

九、检查 Nginx 是否监听端口

使用：

sudo ss -lntp

例如：

LISTEN  0  511  0.0.0.0:80  0.0.0.0:*  users:(("nginx"...))

说明：

Nginx
 ↓
正在监听
 ↓
80 端口

有时看不到其他用户进程的信息，因此排查 Nginx 时建议：

sudo ss -lntp

---

十、检查 Nginx 进程

ps aux | grep nginx

正常情况下类似：

root      nginx: master process ...
www-data  nginx: worker process
www-data  nginx: worker process

Nginx 通常包含：

Master Process
      │
      ├── Worker Process
      ├── Worker Process
      └── Worker Process

Master 主要负责管理 Worker。Worker 负责实际处理请求。

---

十一 使用 curl 测试网页

在服务器/虚拟机内部：

curl http://127.0.0.1

或者：

curl http://localhost

如果能看到 HTML：

<!DOCTYPE html>
<html>
...

说明：

curl
 ↓
127.0.0.1:80
 ↓
Nginx
 ↓
HTML

已经正常。

---

十二、Nginx 常用配置位置

Ubuntu 使用 apt 安装后：

主配置文件：

/etc/nginx/nginx.conf

网站配置：

/etc/nginx/sites-available/

已经启用的网站：

/etc/nginx/sites-enabled/

日志：

/var/log/nginx/

其中最常用：

/etc/nginx/nginx.conf
/etc/nginx/sites-available/
/etc/nginx/sites-enabled/

十三、推荐的网站配置方式

例如创建：

sudo vim /etc/nginx/sites-available/myapp

配置：

server {
    listen 8080;

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

操作	命令	备注
更新软件源	sudo apt update	安装前常用
安装 Nginx	sudo apt install nginx	Ubuntu
启动	sudo systemctl start nginx	启动服务
停止	sudo systemctl stop nginx	停止服务
重启	sudo systemctl restart nginx	完全重启
重载配置	sudo systemctl reload nginx	修改配置后推荐
查看状态	systemctl status nginx	看是否 running
检查配置	sudo nginx -t	最重要
查看进程	`ps aux	grep nginx`
查看端口	sudo ss -lntp	检查监听
本机 HTTP 测试	curl http://127.0.0.1	测试 Web 服务
查看 IP	hostname -I	虚拟机访问常用
错误日志	sudo tail -f /var/log/nginx/error.log	排错
访问日志	sudo tail -f /var/log/nginx/access.log	查看请求
查看配置文件	sudo vim /etc/nginx/nginx.conf	主配置