前置内容

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

找到对应项目的 Nginx 配置

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

修改对应项目的配置

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

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;
    }
}