Nginx 默认端口配置多个项目映射

Nginx 默认的 80 端口如果想要同时配置多个项目,让项目实现不需要指定端口号即可访问,按照如下配置即可

更多精彩

前置内容

  1. 使用 Nginx 部署 Vue 项目 这片笔记里面介绍了如何使用 Nginx 部署项目

找到对应项目的 Nginx 配置

  1. 一般比较规范的配置方式是为每个单独的项目创建 .conf 文件,如下图

修改对应项目的配置

  1. 第一个 server 就是用于转发请求的配置
    • listen 80 指默认的端口号,具体配置在上图中国的 default.conf
    • server_name asing1elife.club 是关键项,表示会触发代理的具体请求链接,当通过该链接访问服务器时,因为默认就是访问 80 端口,所以会直接触发该配置
      • 需要注意的是,域名的 DNS 解析需要配置该服务器的公共 IP
    • proxy_pass http://172.16.195.116:8000/ 指当触发转发请求后会跳转的真实地址
      • 真实地址指向的就是第二个 server 的具体配置
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
server {
    listen 80;
    server_name asing1elife.club;
    autoindex on;
    location / {
        proxy_pass http://172.16.195.116:8000/;
    }
}

server {
    listen       8000;
    server_name  localhost;

    root /opt/teamnote/teamnote;
    index index.html;

    client_max_body_size 20m;
    client_body_buffer_size 128k;

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

    location @router {
      rewrite ^.*$ /index.html last;
    }

    location /teamnote/api/ {
          proxy_pass http://172.16.195.116:8001/teamnote/api/;
          proxy_redirect off;
          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   Cookie $http_cookie;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
}