在服务器上部署了自己的项目，用域名解析公网IP后，发现还需要在域名后输入端口号才能打开项目。为了不暴露端口号，我学习并采用了Nginx反向代理技术。

Nginx重定向

在Ubuntu上安装Nginx并将 /blog 路径解析到 指定 端口（4000），可以按照以下步骤进行：

步骤 1: 安装 Nginx

首先，确保您的系统是最新的，然后安装 Nginx：

1
2
3
sudo apt update
sudo apt upgrade
sudo apt install nginx

步骤 2: 配置 Nginx

在 Nginx 中创建一个新的配置文件，或者修改现有的配置文件。假设您想添加新的配置文件，可以在 /etc/nginx/sites-available/ 目录下创建一个文件，例如 myConfig：

1
sudo nano /etc/nginx/sites-available/myConfig

在文件中添加以下配置（以本网站lonelymeko.top为例）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
# --- HTTP (端口 80) 自动重定向到 HTTPS ---
server {
    listen 80;
    # listen [::]:80; # 可选：如果你需要同时监听 IPv6 的 80 端口

    # 重要：将这里的域名为你的实际域名
    # 最好与你 443 块中的 server_name 保持一致
    server_name lonelymeko.top ; # 或者如果你坚持用 _, 就写 _

    # 对于所有访问此端口和域名的请求
    location / {
        # 返回 301 永久重定向状态码
        # $host 会自动获取用户访问时使用的域名 (例如 lonelymeko.top)
        # $request_uri 会自动获取用户请求的路径和查询参数 (例如 /blog?page=2)
        # 最终效果就是将 http://yourdomain.com/some/path?query=1 重定向到 https://yourdomain.com/some/path?query=1
        return 301 https://$host$request_uri;
    }
}

# --- HTTPS (端口 443) 配置 ---
server {
    listen 443 ssl http2; # 监听 443 端口，启用 SSL 和 HTTP/2
    # 重要：将这里的域名替换为你的实际域名，与上面 80 端口块保持一致
    server_name lonelymeko.top www.lonelymeko.top; 

    # --- SSL 证书配置 ---
    # !!! 关键：确认这些路径是你的证书文件的正确路径 !!!
    ssl_certificate /etc/letsencrypt/live/lonelymeko.top/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/lonelymeko.top/privkey.pem;

    # --- 推荐的最低安全设置 ---
    ssl_protocols TLSv1.2 TLSv1.3; # 使用现代安全协议
    ssl_prefer_server_ciphers off; # 允许客户端选择最佳加密套件
    # 强加密套件 - 如果需要特定兼容性可以调整
    ssl_ciphers （略）

    # --- 原有的 Location 块 (现在位于 HTTPS 上下文中) ---
    location /blog {
        proxy_pass http://localhost:4000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # $scheme 在通过 HTTPS 访问时会自动变为 'https'
        proxy_set_header X-Forwarded-Proto $scheme;

        # 路径替换可能需要仔细测试 HTTPS 内容
        sub_filter 'href="/' 'href="/blog/';
        sub_filter 'src="/' 'src="/blog/';
        sub_filter 'url("/' 'url("/blog/';
        sub_filter_once off; # 允许多次替换
        proxy_redirect / /blog/; # 修正重定向路径
    }

    location / {
        # 重要：确认 '/~' 是你构建好的 前端 应用的正确根目录
        root /~;
        try_files $uri $uri/ /index.html; # 处理单页应用路由
    }

    # 处理搜狐 API 代理
    location /sohu-api/ {
        proxy_pass http://pv.sohu.com/; # 转发请求到搜狐
        proxy_set_header Host pv.sohu.com; # 重要：设置正确的主机头
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # $scheme 在通过 HTTPS 访问时会自动变为 'https'
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # --- 高德 API 代理 (基于之前的 Vite 配置示例) ---
    # 高德逆地理编码 API 代理
    location /proxy-regeo/ {
        # 注意：路径 /v3/geocode/regeo 在这里被添加到 proxy_pass
        proxy_pass https://restapi.amap.com/v3/geocode/regeo;
        proxy_set_header Host restapi.amap.com; # 目标主机头
        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; # 协议头 ('https')
        # 注意：如果 API Key 通过 URL 传递，需要考虑安全性
    }

    # 高德天气 API 代理
    location /proxy-weather/ {
        # 注意：路径 /v3/weather/weatherInfo 在这里被添加到 proxy_pass
        proxy_pass https://restapi.amap.com/v3/weather/weatherInfo;
        proxy_set_header Host restapi.amap.com; # 目标主机头
        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; # 协议头 ('https')
    }
    # --- 高德 API 代理结束 ---

    # 图片资源处理
    location /love/img/ {
        # !!! 关键：将此路径替换为这些图片的实际服务器路径 !!!
        alias /~/img/; # <--- 已根据你的配置猜测，请务必确认或修改！
        expires 30d; # 设置浏览器缓存有效期为 30 天
        add_header Cache-Control "public"; # 允许公共缓存（如 CDN）
    }

    # 可选：为 HTTPS 添加特定的访问和错误日志
    # access_log /var/log/nginx/lonelymeko.top_https_access.log;
    # error_log /var/log/nginx/lonelymeko.top_https_error.log;
}

在 Vue 3 应用中使用 History 路由模式时，需要在 Nginx 中配置 try_files $uri $uri/ /index.html; 的原因与前端路由的工作原理有关。以下是详细解释：

1. History 路由模式 vs Hash 模式

  • Hash 模式：URL 形如 http://example.com/#/path，# 后的变化不会触发页面刷新，服务器始终收到 /#/path 前的部分（如 /），因此无需特殊配置。
  • History 模式：URL 形如 http://example.com/path，更简洁。但用户直接访问或刷新时，浏览器会向服务器请求 /path，如果服务器未配置处理逻辑，会返回 404（因为 /path 不是真实存在的文件或目录）。

2. 为什么需要 try_files？

  • 核心问题：Vue 应用是单页应用 (SPA)，所有路由均由前端 JavaScript 处理。服务器需要确保无论请求哪个路径（如 /path, /about），都返回 index.html，然后由前端路由接管。
  • try_files 的作用：
    1. 先尝试查找 $uri（如请求 /js/app.js，则返回真实的 JS 文件）。
    2. 若找不到，尝试查找 $uri/（目录）。
    3. 若仍找不到，则回退到 /index.html，交给前端路由处理。

3. Nginx 配置详解

1
2
3
4
location / {
    root /path/to/your/vue/app/dist;  # 替换为实际打包目录
    try_files $uri $uri/ /index.html; # 关键配置
}
  • root：指定 Vue 打包后的静态文件目录（如 dist）。
  • try_files：
    • $uri：尝试直接匹配请求的文件（如 CSS、JS 等静态资源）。
    • $uri/：尝试匹配目录（较少用到，但保留以兼容某些情况）。
    • /index.html：最终回退选项，确保所有路由返回入口文件。

4. 不配置的后果

  • 用户直接访问 /about 或刷新页面时，Nginx 找不到对应的文件或目录，返回 404。
  • 只有从首页（/）导航时，前端路由才能正常工作（因为此时已加载 index.html 和 JS）。

5. 其他注意事项

  • 后端协作：如果应用有独立的后端 API，需确保 Nginx 不会将 API 路径（如 /api/xxx）也指向 index.html。可以通过额外的 location 块排除：

    1
    2
    3
    location /api {
        proxy_pass http://backend;  # 转发到后端
    }

  • Base URL：若应用部署在子路径（如 /app/），需同步配置 Vue Router 的 base 选项和 Nginx 的 root。

Nginx 的 try_files $uri $uri/ /index.html; 是 History 模式的必要配置，它确保了服务器在找不到真实文件时，能正确回退到前端路由的入口文件（index.html），从而避免 404 错误。这是 SPA 部署的常见实践，适用于 Vue、React 等现代前端框架。

步骤 3: 启用配置

将您刚创建的配置文件链接到 sites-enabled 目录：

1
sudo ln -s /etc/nginx/sites-available/myblog /etc/nginx/sites-enabled/

步骤 4: 测试 Nginx 配置

在重新加载 Nginx 之前，检查配置是否正确：

1
sudo nginx -t

如果没有错误，你会看到一个提示说配置成功。

步骤 5: 重新加载 Nginx

重新加载 Nginx 以应用更改：

1
sudo systemctl reload nginx

步骤 6: 确保服务在4000端口上运行

确保你的应用程序（例如一个 Node.js 或其他服务）正在监听 4000 端口。你可以使用以下命令检查：

1
sudo lsof -i :4000

如果服务没有运行，请启动它，确保它可以接收来自 Nginx 的请求。

其他注意事项

  • 如果您的服务器使用防火墙，确保打开80端口（HTTP）和4000端口。
  • 如果您使用的是HTTPS，记得设置适当的SSL配置。

完成这些步骤后，访问 http://your_domain_or_IP/blog 应该会成功将请求代理到4000端口的应用程序。如果还有其他问题或需要进一步的帮助，欢迎随时询问！

查看 Nginx 访问和错误日志

查看 Nginx 的访问日志和错误日志，以获取关于请求失败的更多信息：

1
2
3
4
5
bash# 查看访问日志  
sudo tail -f /var/log/nginx/access.log  

# 查看错误日志  
sudo tail -f /var/log/nginx/error.log

暂停 Nginx 服务：

运行以下命令来停止 Nginx 服务：

1
sudo systemctl stop nginx

这会将 Nginx 完全停止，不再处理任何请求。

补充.Nginx 定义、背景

代理服务器 接受用户请求 代理到其他服务器 三大特点：反向代理 负载均衡 动静分离 Nginx (是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAPPOP3SMTP服务。
Nginx是由伊戈尔:赛索耶夫为俄罗斯访河量第二的Rambler.u站点(俄文:PaM6nep)开发的，第一个公开版本0.1.0发布于2004年10月4日。2011年6月1日，nginx 1.0.4发布。
其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝
等。在全球活跃的网站中有12.18%的使用比率，大约为2220万个网站:
Nginx是一个安装非常的简单、配置文件非常简洁(还能够支持per语法)、Bug非常少的服务。Nginx启动特别容易，并且几乎可以做到7*24不间断运行，即使运行数个月也不需要重新启动。你还能够不间断服务的情况下进行软件版本的升级，
Nginx代码完全用C语言从头写成。官方数据测试表明能够支持高达 50,000 个并发连接数的响应。

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~


新ICP备2025018290号-1
本站总访问量次