V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chaleaochexist
V2EX  ›  程序员

微服务架构中, 前端是如何部署的

  •  2
     
  •   chaleaochexist · 2023-02-15 17:54:22 +08:00 · 3052 次点击
    这是一个创建于 658 天前的主题,其中的信息可能已经有所发展或是发生改变。

    上图是我自己拍脑袋瞎想的.

    静态文件从 80 端口下载. 端口 80 也是 web 端入口. 然后 ajax 从 8000 端口获取数据.

    至于前端如何从 8000 端口获取数据, 是通过环境变量在用 webpack 打包的时候将 url 前缀加进去, 变成绝对地址.

    1. 假设是内网环境,没有 DNS/CDN 这些.
    1.5 假设没有移动端 /小程序. 就是一个网页, 一个后端.
    2. 跨域如何处理? 前端处理还是后端处理?
    3. 实际情况是走红线还是绿线还是都不是?
    

    谢谢大佬们.

    17 条回复    2023-02-17 01:39:18 +08:00
    dilu
        1
    dilu  
       2023-02-15 18:00:12 +08:00   ❤️ 1
    1. 跨域后端处理
    2. 实际情况就是静态资源走绿线,api 资源走红线
    mwjz
        2
    mwjz  
       2023-02-15 18:02:28 +08:00   ❤️ 1
    两种方式 1.代码加上域名前缀,webpack 加还是写死都可以,然后后端设置 cors 允
    2. 服务器做反代,这也是目前主流方案,可以参考我这个

    https://github.com/yanzhangshuai/spa-vue-template/blob/vite-3.X/deploy/nginx.conf
    thinkershare
        3
    thinkershare  
       2023-02-15 18:14:33 +08:00   ❤️ 1
    将 API 和静态资源放置到一个服务器上,然后走反向代理,用不同的域名: api.example.com 处理动态 API, example.com 走静态资源,api.example.com 内部可以有网关,然后代理后面的微服务,或者将这个代理移动到对外的反向代理也行。
    libook
        4
    libook  
       2023-02-15 18:15:41 +08:00   ❤️ 1
    跨域后端加个 header 就行了。
    上规模的项目通常是前端走 CDN ,顶多有一个隐藏服务器专门用来让 CDN 首次取文件;后端就是走 WAF 、负载均衡。网站域名配置给 CDN ,API 域名配置给 WAF ,然后均衡(一般是基于 Nginx 改的)加个跨域头,允许前端域名。

    环境分开发环境、测试环境、正式环境等,可以准备三套配置文件,用环境变量让打包工具选择特定的配置信息注入到代码里。
    chenPiMeiHaoChi
        5
    chenPiMeiHaoChi  
       2023-02-15 18:16:02 +08:00
    我这是扔在 OSS 上
    waising
        7
    waising  
       2023-02-15 19:22:46 +08:00
    我们目前是前端和后端都打包成容器放到 K8S 集群里跑
    itbeihe
        8
    itbeihe  
       2023-02-15 20:33:52 +08:00   ❤️ 1
    @chaleaochexist 理解对的
    1. “双域名方案” - 对应你的方式 1
    前端应用域名 www.xxx.com ,后端应用域名 api.xxx.com 。后端接口通过设置 CORS 允许 ajax 跨域就行。
    前后端不同端口可以认为是两个域名,如果对网站性能有要求,对 cookie 设置有规范,建议双域名。
    2.“ nginx 反向代理方案” - 对应你的方式 2
    后端接口统一加前缀“/api/"(或其余的),把"/api/" 所有请求转发到后端。
    配置关键词 “前端 nginx 反向代理配置”
    itbeihe
        9
    itbeihe  
       2023-02-15 20:38:24 +08:00   ❤️ 1
    还有一种前端需要 cdn 加速的场景。
    html 会部署在 "www.xxxaaa.com" 域名下,除 html 之外的 css 、js 等静态资源会部署到专门的 cdn 域名上 “cdn.xxxaaa.com” ,后端 api 额外通过 “www.xxxaaa.com/api/" 或 "api.xxxaaa.com" 访问。
    qqlyatt
        10
    qqlyatt  
       2023-02-15 22:41:15 +08:00
    你应该这么想:1.只有页面和后端,那就后端和前端都部署在同一个 tomcat 服务器里,也就不存在跨域请求了。你要想部署在不同的容器服务器里,那就开启跨域。2.后端是后端,包括网关以及后面的授权 server ,业务 server 等等一大摞。前端是前端,包括 nodejs server ,nodejs 里放置你的页面,页面无论是 vue 做的还是 react 做的还是其他什么的都可以放置到前端 nodejs 服务器里。然后页面 axios 请求前端 nodejs 服务器,例如 /ac/fun ,那么你前端服务器假如是 https://43.22.22.11:443/,这个请求就会直接达到 https://43.22.22.11:443/ac/fun 。然后你前端服务器向后端服务器请求 API 。|||服务器与服务器之间请求不存在跨域|||。网关过滤 /ac 指向你的业务 server ,业务 server 响应,传回前端服务器,前端服务器响应页面 axios 。
    xiangyuecn
        11
    xiangyuecn  
       2023-02-15 22:50:13 +08:00   ❤️ 1
    加个端口有多难,你知道吗,情愿用 path ,接口 url 长点都无所谓

    对于非 80/443 端口:
    - 微信全家桶打死不认
    - 浏览器同域名坚决不认
    - 服务器防火墙倒了也不认
    - 安全组就问你配不配吧
    chaleaochexist
        12
    chaleaochexist  
    OP
       2023-02-15 22:54:28 +08:00
    @qqlyatt 老哥的思路和 nginx 代理前端静态文件的思路差不多. 只不过 nginx 变成 nodejs 了..
    chaleaochexist
        13
    chaleaochexist  
    OP
       2023-02-15 22:55:53 +08:00
    @xiangyuecn 明白 所以 方案是
    一个 nginx 代理全部.
    或者 干脆把静态文件放在 kong 的后面.
    kong 做为 api 网关兼职前端静态文件的代理服务器, 然后通过 url 或者 header 做区分. 是这个意思吗?
    gausszhou
        14
    gausszhou  
       2023-02-15 23:29:02 +08:00
    kong 或者 nginx 拦在最前面,路径转发到另一个,完事
    DingJZ
        15
    DingJZ  
       2023-02-16 09:48:45 +08:00
    1. 跨域直接在 kong 上处理,前端和后端都不需要考虑
    2. 前端直接扔到 nginx 后面,后端流量走 kong ,前后端流量分开,将来哪边要扩展都方便
    AyaseEri
        16
    AyaseEri  
       2023-02-16 09:58:06 +08:00
    前端 nginx 做 host 与反代,反代目标地址是后端的 gateway ,后端 gateway 后面才是一个个微服务
    azusematsuri
        17
    azusematsuri  
       2023-02-17 01:39:18 +08:00 via Android
    前后端各自打包成镜像,用 ingress 反代
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4995 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 03:55 · PVG 11:55 · LAX 19:55 · JFK 22:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.