修改 Nginx 服务端配置

大家好,备案完成之后,我们还需要修改一下 Nginx 的配置。

主要是修改一下服务端请求相关的配置。

为什么要修改配置?

我们之前是通过 IP 来连接服务端请求的,也就是:

const API_URL = 'http://120.48.57.219:3000'

现在域名备案之后,域名可以正常使用了,我们要改为通过域名来访问:

const API_URL = 'https://xiaomiaojizhang.top/api'

主要变化:

协议:从 http 改为 https
地址:从 IP 地址改为域名
端口:端口被隐藏了(HTTPS 默认 443 端口)
前缀:后面的 /api 是所有的请求都会携带的一个前缀

这个是我们在前面做服务端的时候约定好的。

⚠️

但是光客户端改了还不行,我们还需要修改一下 Nginx!

修改 Nginx 配置

连接到服务器

打开 Xshell,然后点击 Xftp。

进入 Nginx 配置目录

进入到 Nginx 配置的目录:

/etc/nginx/

前面我们已经讲了,我们把相关的配置都放在了这个 conf.d 下面。

打开之后我们可以看到:

80.conf - HTTP 配置
443.conf - HTTPS 配置
另外两个是安全相关的(暂时不用管)

主要是这个 443.conf,它对应的就是 HTTPS 的配置。

下载配置文件

然后我们打开桌面上面的安装包这个文件夹,右键使用服务器上的配置覆盖本地的这个。

修改配置文件

接下来我们找到这个文件,右键修改。

这个配置怎么修改呢?这里我们就不去手写了,我这里粘贴一段配置过来,然后我们来解释一下:

server {
    listen 443 ssl;
    server_name xiaomiaojizhang.top www.xiaomiaojizhang.top;
    
    ssl_certificate /home/ssl/xiaomiaojizhang.top.pem;
    ssl_certificate_key /home/ssl/xiaomiaojizhang.top.key;
    
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    
    # 静态文件配置
    location / {
        root /home/web;
        index index.html;
    }
    
    # API 反向代理配置
    location /api {
        proxy_pass http://127.0.0.1:3000;
        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;
    }
}

配置说明

我们看到这个 server:

1. 监听端口

listen 443 ssl;

它监听的是 443 的端口,也就是监听 HTTPS 的请求。

2. 静态文件处理

location / {
    root /home/web;
    index index.html;
}

请求过来之后,静态文件会走到这个目录下面去寻找 index.html。

3. API 反向代理(关键配置)

location /api {
    proxy_pass http://127.0.0.1:3000;
    ...
}

如果是动态的请求,也就是匹配到 /api 的前缀,那么它就会走这个关键的配置。

它会把请求重新转发到这个 3000 端口,这个 3000 端口就是指向我们本地服务器部署的后端服务。

关于 127.0.0.1

那么这个 127.0.0.1 指的就是本机。

因为我们的 Nginx 和后端服务是部署在同一台机器上的,所以 127.0.0.1:3000 意思就是本机的 3000 端口。

当然你也可以把它改成我们具体的服务器的 IP,也是一样的,这里我们就不改了。

上传配置文件

然后保存,保存之后我们再回到 Xftp,再把它传回去。

重载 Nginx 配置

然后执行一下命令:

nginx -s reload

重新加载一下配置。

测试配置

接下来,我们来测试一下。

启动客户端

回到编辑器,然后启动客户端。

启动好之后,我们来打开客户端的网页。

重新登录

因为之前已经登录过了,我们先退出吧(网页它记住了登录状态)。

我们重新登录一下,输入之后,我们先看一下下方的控制台。

然后点击 “获取验证码”。

检查请求

我们看一下请求。

现在请求的地址已经变成了我们官网的域名地址,并且请求发送也成功了!

输入一下手机上收到的验证码,点击 “登录”。

我们再看一下其他的请求,也都是正常的。

同时我们可以看一下,所有的请求都有一个 /api,也就对应了我们刚才在 Nginx 当中的配置。

请求流程详解

我们来简单讲一下这个请求的流程:

客户端请求
    ↓
https://xiaomiaojizhang.top:443/api/auth/login
    ↓
域名解析(阿里云)
    ↓
找到服务器 IP: 120.48.57.219
    ↓
Nginx 监听 443 端口
    ↓
匹配 /api 路径
    ↓
反向代理转发到 127.0.0.1:3000
    ↓
后端服务处理请求
    ↓
返回响应

详细说明

第一步:默认端口

首先,我们的域名后面其实是有个默认的 443 端口的:

https://xiaomiaojizhang.top/api

其实等同于:

https://xiaomiaojizhang.top:443/api

我们可以刷新一下看看,刷新之后,我们发现请求也是正常的。

这里的 443 端口默认会被隐藏,也就是说域名后面其实隐藏了 443 的端口。

第二步:域名解析

我们前面的课程在阿里云中配置了域名的解析,阿里云帮我们的域名解析到了 IP。

所以我们在输入这个域名的时候,它其实是帮我们找到了我们自己的服务器。

第三步:Nginx 监听

我们在服务器上部署了一个 Nginx,这个 Nginx 监听了 443 端口。

那么我们在发起请求的时候,我们后面其实是有一个 443 端口的,所以通过解析找到 IP 之后,然后 Nginx 又监听了服务器的 443 端口,所以就相当于监听到了这个请求。

第四步:反向代理转发

那么在收到请求之后,Nginx 会将这个请求转发到 3000 的端口进行处理,也就是这个配置:

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

Nginx 监听了 443 的端口,然后把请求转发到 3000,3000 其实就是我们的后端服务。

所以整个流程就跑通了! 🎉

小程序配置

那么后续我们在发布小程序之后,我们只需要在小程序里面把这个 production 的配置:

修改前:

const API_URL = 'http://120.48.57.219:3000'

修改后:

const API_URL = 'https://xiaomiaojizhang.top/api'

把这里改成我们的域名就行了。

发布到小程序之后,小程序的请求就会访问这个域名。

Nginx 反向代理配置详解

完整配置文件

server {
    listen 443 ssl;
    server_name xiaomiaojizhang.top www.xiaomiaojizhang.top;
    
    # SSL 证书配置
    ssl_certificate /home/ssl/xiaomiaojizhang.top.pem;
    ssl_certificate_key /home/ssl/xiaomiaojizhang.top.key;
    
    # SSL 安全配置
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    
    # 静态资源配置
    location / {
        root /home/web;
        index index.html;
    }
    
    # API 反向代理配置
    location /api {
        proxy_pass http://127.0.0.1:3000;
        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;
    }
}

配置项说明

配置项	说明
`listen 443 ssl`	监听 443 端口,启用 SSL
`server_name`	域名配置
`ssl_certificate`	SSL 证书路径
`ssl_certificate_key`	SSL 证书密钥路径
`location /`	静态文件处理
`location /api`	API 请求反向代理
`proxy_pass`	转发目标地址
`proxy_set_header`	设置转发请求头

proxy_set_header 说明

proxy_set_header Host $host;

保持原始请求的 Host 头

proxy_set_header X-Real-IP $remote_addr;

传递真实客户端 IP

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

添加客户端 IP 到转发链

proxy_set_header X-Forwarded-Proto $scheme;

传递原始请求协议(http/https)

常见问题

1. 修改配置后不生效怎么办?

# 检查配置语法
nginx -t
 
# 重载配置
nginx -s reload
 
# 如果还不行,重启 Nginx
systemctl restart nginx

2. 502 Bad Gateway 错误

可能原因:

后端服务未启动
端口配置错误
防火墙阻止

解决方法:

# 检查后端服务是否运行
docker ps | grep backend
 
# 检查端口是否监听
netstat -tlnp | grep 3000

3. 静态文件和 API 都走反向代理怎么办?

确保 location /api 在 location / 之前,Nginx 会优先匹配更具体的路径。

4. 跨域问题

在反向代理配置中添加 CORS 头:

location /api {
    proxy_pass http://127.0.0.1:3000;
    
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
}

5. WebSocket 代理

如果需要支持 WebSocket:

location /ws {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

6. 如何查看 Nginx 错误日志?

tail -f /var/log/nginx/error.log

配置验证清单

配置完成后的检查清单

性能优化建议

1. 启用 Gzip 压缩

gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

2. 启用缓存

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

3. 配置连接超时

proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;

总结

修改 Nginx 配置的关键步骤:

修改客户端配置,从 IP 改为域名
下载服务器上的 Nginx 配置文件
添加 API 反向代理配置
配置 proxy_pass 转发到后端服务
上传修改后的配置文件
重载 Nginx 配置
测试静态文件和 API 请求
验证完整的请求流程

配置完成!

现在你的网站已经完全使用域名访问,并且通过 HTTPS 加密传输,更加安全可靠! 🎉

下一步

Nginx 配置完成后,就可以开始准备小程序的发布了!

💡

遇到问题？

如果配置过程中遇到任何问题,可以下方微信扫码帮您看下(免费咨询)