微服务项目nginx部署前后端

本文档详细介绍了在一个前后端分离的项目中,如何配置后端代理和前端代理来实现请求转发。后端代理通过nginx去除前端url中的/api前缀,将请求转发到实际接口。前端代理配置了解压后的静态文件路径,并通过try_files支持history路由模式。整体nginx.conf配置文件也一并给出,便于直接使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目背景

前后端分离项目,前端采用elmadmin,后端为springcloud架构,多个微服务统一项目配置gateway网关,网关地址192.168.64.4:8000。

  • 网关将各个微服务接口统一加上/api/services前缀;
  • 前端配置代理,将网关接口统一加上/api前缀;

后端代理

  • 去除前端url中的/api;
  • 通过nginx访问网关地址;
   # 1、登录接口配置,登录前端访问接口/api/center/login,后台真实接口/center/login
    location /api/center/ {
        proxy_pass http://192.168.64.4:8000/center/;
    }
  # 2、geteway网关统一配置了/api/services/。前端访问地址(加了代理,url多一个api) /api/api/services/
    location /api/api/services/ {
        proxy_pass http://192.168.64.4:8000/api/services/;
    }

前端代理

  • 前端dist压缩包解压后放到/usr/share/nginx/html/dist路径下
  • 通过nginx访问静态文件
  # 前端页面配置 ,前端dist解压包放到/usr/share/nginx/html路径下        
     location ^~ / {
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 加这个是支持history的路由模式
        try_files $uri $uri/ /index.html;
        root /usr/share/nginx/html/dist;
        index index.html;
   }

nginx.conf文件

全文件,可直接拷贝修改使用

user  nginx;
worker_processes  2;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  2048;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
   client_max_body_size 1024M;
    client_body_buffer_size 6M;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

   server {
    listen 80; # 侦听80端口,如果强制所有的访问都必须是HTTPs的,这行需要注销掉
 server_name localhost;    
client_max_body_size 30240m;
 proxy_intercept_errors on;
 fastcgi_intercept_errors on;

   # 后端微服务接口配置:
   # 1、登录接口配置,登录前端访问接口/api/center/login,后台真实接口/center/login
    location /api/center/ {
        proxy_pass http://192.168.64.4:8000/center/;
    }
  # 2、geteway网关统一配置了/api/services/。前端访问地址(加了代理,url多一个api) /api/api/services/
    location /api/api/services/ {
        proxy_pass http://192.168.64.4:8000/api/services/;
    }
  # 前端页面配置 ,前端dist解压包放到/usr/share/nginx/html路径下        
     location ^~ / {
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 加这个是支持history的路由模式
        try_files $uri $uri/ /index.html;
        root /usr/share/nginx/html/dist;
        index index.html;
   }

}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值