认识一个微服务项目（简单）

votos
97 阅读1分钟

认识一个微服务项目

一、前端（浏览器）理解

客户端在前后端项目中，可以理解为前端项目

1、前端配置的代理(webpack.config.js):

image.png

2、前端请求articleAPI

image.png

3、页面在请求articleAPI实际的请求地址：https://baidu.com/articles/${id}

注意：但是在webpack打包后，配置的webpack.config.js会失效，但是配置devServer可以方便前端直接访问后端静态资源，方便前端测试。

二、前端代理Nginx服务器

image.png 前端请求：http://127.0.0.1:8081/v1_0/articles/${id} Nginx配置：

server {
    listen 8801;  # 监听 8801 端口

    location ~/v1_0/(.*) {  # 匹配以 /v1_0/ 开头的 URL
        proxy_pass http://heima-app-gateway/$1;  # 将请求代理到 http://baidu.com/ 后面加上匹配到的路径部分
        proxy_set_header HOST $host;  # 设置代理请求头的 HOST 字段为客户端请求的 HOST 值
        proxy_pass_request_body on;  # 开启获取请求体
        proxy_pass_request_headers on;  # 开启获取请求头
        proxy_set_header X-Real-IP $remote_addr;  # 记录真实发出请求的客户端 IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 记录代理信息
    }
}

前端请求进过nginx服务代理后转发出去的地址为：

http://heima-app-gateway/v1_0/articles/${id}

三、后端接受请求

image.png

Nginx 配置文件的片段，用于配置代理服务器。让我为你解释其中的每个部分：

nginxCopy Code
upstream heima-app-gateway {
    server localhost:51601;
}

这段代码定义了一个名为 "heima-app-gateway" 的上游服务器（upstream），它指定了目标服务器的地址和端口号。在这个例子中，目标服务器的地址是本地主机（localhost）的51601端口。

nginxCopy Code
server {
    listen 8801;
    location / {
        root D:/heimacode/code/app-web/app-web;
        index index.html;
    }
    
    location ~/app/(.*) {
        proxy_pass http://heima-app-gateway/$1;
        proxy_set_header HOST $host;
        proxy_pass_request_body on;
        proxy_pass_request_headers on;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

这段代码定义了一个名为 "server" 的服务器块，它监听在8801端口上。当收到客户端请求时，根据请求的 URL 进行不同的处理。

  • location / 是一个基本的资源定位符（URL）匹配规则，指定了根路径 /。当请求的 URL 匹配到这个规则时，将返回 D:/heimacode/code/app-web/app-web 目录下的 index.html 文件。
  • location ~/app/(.*) 是一个正则表达式匹配规则，用于匹配以 /app/ 开头的 URL。当请求的 URL 匹配到这个规则时，Nginx 会将请求转发到名为 "heima-app-gateway" 的上游服务器，并附加上匹配正则表达式中括号内的内容 $1。
  • proxy_pass 指令用于将请求转发到上游服务器。在这个例子中，会将请求转发到 "http://heima-app-gateway" 上，并附加上括号内的内容。
  • proxy_set_header 指令用于设置请求头的值。这里的指令设置了一些常见的请求头，如 HOST、X-Real-IP 和 X-Forwarded-For，以便记录真实的客户端 IP 地址和代理信息。

总结起来，这个配置文件的作用是将 /app/ 开头的请求转发到名为 "heima-app-gateway" 的上游服务器，并设置一些请求头用于记录客户端的真实 IP 地址和代理信息。其他的请求将返回 D:/heimacode/code/app-web/app-web 目录下的 index.html 文件。

weiweitest

avatar
文章
阅读
粉丝