nginx域名如何同时映射前端页面和后端接口

5 篇文章 0 订阅

有时我们希望nginx/ 既能映射前端页面,又能同时映射后端项目

  • 假设前端项目名为 page, 在nginx中的路径为 html/work/page
  • 后端java项目发布在tomcat,端口为8080

nginx配置代码为

location @routerback {
	proxy_set_header host $host;
	proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_pass http://127.0.0.1:8080/$request_uri;
}

location / {
	root html/work/page/;
	try_files $uri $uri/ @routerback;
}
  1. /拦截所有请求,首先定位到前端页面,如果前端页面不存在,则跳转至@routerback路由
  2. @routerback 路由反向代理至tomcat
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Docker 中部署前后端分离的应用,可以使用 Nginx 作为反向代理服务器,将前端后端应用部署在不同的容器中,然后通过 Nginx 配置将后端的端口映射前端的端口。 下面是一些简单的步骤: 1. 编写 Dockerfile。 编写前端后端的 Dockerfile,将前端后端应用打包到 Docker 镜像中。 2. 编写 docker-compose.yml。 在 docker-compose.yml 中指定前端后端的容器,以及 Nginx 的容器,然后通过 links 或 networks 等方式将容器连接起来。 例如: ``` version: '3' services: frontend: build: context: ./frontend ports: - 80:80 backend: build: context: ./backend ports: - 8000:8000 nginx: build: context: ./nginx ports: - 80:80 links: - frontend - backend ``` 3. 编写 Nginx 配置文件。 在 Nginx 的配置文件中,配置反向代理服务器,将后端的端口映射前端的端口。 例如: ``` server { listen 80; server_name example.com; # 前端域名 root /usr/share/nginx/html; # 前端目录 location / { try_files $uri $uri/ /index.html; } } server { listen 80; server_name api.example.com; # 后端域名 location / { proxy_pass http://backend:8000; # 后端实际地址 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 X-Forwarded-Proto $scheme; } } ``` 这里假设前端文件在 `/usr/share/nginx/html` 目录下,后端监听的端口号是 8000。 4. 启动 Docker。 使用 docker-compose 启动 Docker 容器。 ``` docker-compose up -d ``` 这样就完成了前后端分离应用的部署。在浏览器中访问前端页面,可以输入 `http://example.com`,在浏览器中访问后端 API 接口,可以输入 `http://api.example.com/api/xxx`。 需要注意的是,如果前端后端使用的是不同的域名,需要在 DNS 解析中添加相应的解析记录,使域名能够正确解析到服务器的 IP 地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值