如何通过Nginx配置实现同一域名下部署Vue前端与Django后端

问题根源 #

你当前配置存在两个监听443端口、server_name完全相同的Nginx server块，Nginx匹配时只会优先加载第一个生效的块，因此同时启用时只有Vue前端配置生效，后端配置被覆盖。同时你原有的Django配置中80端口跳转规则存在语法错误，缺少https协议头。

正确合并配置方案 #

将前后端配置合并到同一个server块中，通过路径前缀区分前后端请求，所有带/api前缀的请求转发到Django后端，其余请求走Vue前端：

# 保留Django上游服务配置
upstream todo_app_server {
  server unix:/webapps/todo/enviroment_3_8_2/run/gunicorn.sock fail_timeout=0;
}

# 80端口统一跳转https，仅保留一份
server {
  listen 80;
  server_name www.todoapi.xyz;
  return 301 https://www.todoapi.xyz$request_uri;
}

server {
  listen 443 ssl;
  server_name www.todoapi.xyz;

  client_max_body_size 4G;

  # 日志可以合并也可以分开，这里保留分开的配置也可自行调整
  error_log  /webapps/todo/enviroment_3_8_2/logs/nginx-error.log;
  access_log /webapps/todo/enviroment_3_8_2/logs/nginx-access.log;

  ssl_certificate /etc/letsencrypt/live/www.todoapi.xyz/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/www.todoapi.xyz/privkey.pem;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;
  ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

  charset utf-8;
  root /webapps/todo/todo_vue/dist;
  index index.html index.htm;

  # Django静态资源请求，优先级高于根路径，直接返回
  location /static/ {
    # 修正原配置多余的双斜杠
    alias /webapps/todo/environment_3_8_2/todo/static/;
  }
  location /media/ {
    alias /webapps/todo/todo_vue_api/media/;
  }

  # 后端接口请求，统一用/api前缀区分，转发到Django
  location /api/ {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    # 如果不想修改Django路由前缀，加下面这行把/api前缀去掉再转发
    # rewrite ^/api/(.*)$ /$1 break;
    proxy_pass http://todo_app_server;
  }

  # 其余所有请求走Vue前端路由
  location / {
    try_files $uri $uri/ /index.html;
  }
}

后续操作步骤 #

1. 删除原有的两份分开的Nginx配置文件，将上述合并后的配置保存为单个站点配置，放到Nginx的站点配置目录下
2. 调整前端Vue项目里的所有后端接口请求地址，统一添加/api前缀，比如原请求/todo/list改为/api/todo/list
3. 如果没有在配置里加rewrite规则，需要同步给Django所有接口路由添加/api前缀
4. 执行nginx -t校验配置无语法错误后，执行systemctl reload nginx重载配置即可生效

内容的提问来源于stack exchange，提问作者user655941