Nginx 前后端动态路径访问配置

部分场景下一台测试服务器上部署多个前后端应用，需要多次更改nginx配置文件，如何配置一个即可动态访问？ 这里记录一下nginx正则表达式方式配置动态路径

目录

• ​​场景说明​​
• ​​具体配置​​
• ​​Location 官方教程​​

场景说明

针对简单业务场景， 一台服务器上部署Jenkins，发布多个前端后台程序
例如：
前端VUE Jenkins 有以下几个任务，

• ui-app1
• ui-app2
• ui-app3

编译后生成的静态文件放在路径： ​​/opt/apps/nginx/vue/​​ 下面

• /opt/apps/nginx/vue/ui-app1/dist/
• /opt/apps/nginx/vue/ui-app2/dist/
• /opt/apps/nginx/vue/ui-app3/dist/

后端Web应用 Jenkins 有以下几个任务，以Docker容器方式部署，
Docke容器对应的网关Ip是 ​​​172.17.0.1​​

• api-app1 端口8081
• api-app2 端口8082
• api-app3 端口8083

具体配置

前端Nginx Location config 配置

# 统一走代理访问vue前端页面
location ~ /([A-Za-z0-9_-]+)/dist
{
  root  /opt/apps/nginx/vue/;
  index  index.html index.htm;
}

这样 3个前端 Jenkins 部署后的URL访问路径就是：

• ​​http://服务器IP地址或域名/ui-app1/dist/​​
• ​​http://服务器IP地址或域名/ui-app2/dist/​​
• ​​http://服务器IP地址或域名/ui-app3/dist/​​

后端端Nginx Location config 配置

# ============根据端口信息动态跳转路径============
# $1 表示的是web应用的端口号
location ~ /(\d+)/microservice/(.*?)$
{ 
 proxy_redirect off;
 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;
 proxy_set_header X-Nginx-Proxy true;
 proxy_pass http://172.17.0.1:$1/$2?$args;
}

这样 3个后端 Jenkins 部署后的URL访问路径就是：

• ​​http://服务器IP地址或域名/8081/microservice/​​
• ​​http://服务器IP地址或域名/8082/microservice/​​
• ​​http://服务器IP地址或域名/8083/microservice/​​

Location 官方教程

​​https://docs.nginx.com/nginx/admin-guide/web-server/web-server/#locations​​