【教程】Apache HertzBeat 前后端分离部署

开源
HertzBeat
50 4~6 分钟

前言

实际生产环境中，会遇到运维那边只给放开一个端口，有很多应用需要同一个端口来访问的情况。Apache HertzBeat 默认采用前后端一体化部署，即前端打包成 dist 文件夹后，跟随后端一起打包在 tar.gz 包里，Web 服务端口（1157）统一响应页面和接口。这样单独部署很简单，但是默认占用一个端口，本教程旨在使用 Nginx 静态托管前端，代理后端来实现复用已有端口访问Apache HertzBeat。本文目前的情况针对的是二进制安装包部署，docker 等其他情况请自行探索。

实现

修改前端 baseHref

有三种方式可以实现修改baseHref，我们这里直接用最简单的，修改打包后的文件。

解压 server 的 tar.gz 包，找到 dist 文件夹里面的 index.html，修改其中的<base href="/"> 为<base href="/hertzbeat/"> （两个/都不要丢了）。

配置 Nginx

下面是一个配置示例，按你的实际情况修改

    server {
    listen 80; # 修改为你的端口
    server_name localhost; # 按实际情况修改

    # 前端静态文件
    location /hertzbeat/ {
        alias /opt/homebrew/var/www/hertzbeat/; # 这里改成你的前端 dist 目录，此文件夹下应该直接有 index.html
        index index.html;
        try_files $uri $uri/ /hertzbeat/index.html;
    }

    # API 反向代理
    location /api/ {
        proxy_pass http://127.0.0.1:1157/api/; #修改为后端的 api 地址，不要省略 /
        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;
    }
}

修改好配之后nginx -t && nginx -s reload 重载一下配置，打开网站就可以了。比如我这里配置的就是http://localhost/hertzbeat

image.png