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

Go gin 集成 React 最佳实践是什么?

  •  
  •   zhanshi · 2023-02-08 09:48:21 +08:00 · 2197 次点击
    这是一个创建于 415 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近有个新项目,想用 Go gin + React JS ,参考了一下

    https://letscode.blog/2021/06/25/react-gin-blog-3-19-add-react-frontend/ https://letscode.blog/2021/06/25/react-gin-blog-2-19-starting-gin-server/

    • assets 目录运行 npm start 启动一个 React ,监听端口 http://localhost:3000/
    • 在跟目录运行 go run main.go 启动 web server ,监听 localhost:8080

    感觉这个方法有点怪,根据经验,应该只需要一个 8080 就可以了,不知道是不是我看漏了什么步骤?或者大家有更好的集成方案文档推荐吗?

    19 条回复    2023-02-08 22:19:58 +08:00
    Leviathann
        1
    Leviathann  
       2023-02-08 09:50:32 +08:00   ❤️ 1
    开发时后端随便设置一个,前端监听 8080 ,转发到后端
    Nazz
        2
    Nazz  
       2023-02-08 09:51:21 +08:00   ❤️ 1
    前端项目在开发时一般会用到 nodejs express 框架启动一个 web server, 所以需要监听新的端口, 而部署的时候是打包好的静态文件.
    Trim21
        3
    Trim21  
       2023-02-08 09:56:30 +08:00 via Android   ❤️ 1
    一般是在 3000 端口启动 react 的开发进程,然后转发 API 请求到另一个端口的后端。你这个例子里的 assets 是项目的根目录。
    hejinliangsb
        4
    hejinliangsb  
       2023-02-08 10:03:00 +08:00 via Android
    前后端分离不集成
    zhanshi
        5
    zhanshi  
    OP
       2023-02-08 10:13:29 +08:00
    @Leviathann @Trim21 @Nazz 谢谢,已经发送感谢

    找到一篇文章 https://hakaselogs.me/2018-04-20/building-a-web-app-with-go-gin-and-react/

    所以目录架构应该是类似

    ![img]( https://p.ipic.vip/a3bnf9.png)

    即 index.html:

    ```
    <script type="text/babel" src="js/app.jsx"></script>
    ```

    然后前端开发把 ReactJS 打包到 app.jsx 里面,后台开发专注写 restful API ?
    Nazz
        6
    Nazz  
       2023-02-08 10:18:13 +08:00   ❤️ 1
    @zhanshi 开发的时候通过配置代理发送跨域请求, 部署的时候在同一个域下就不需要代理了.
    zhanshi
        7
    zhanshi  
    OP
       2023-02-08 10:21:10 +08:00
    @Nazz 好的,谢谢,我搜索一下配置代理的方法。

    一般来说,请问这类项目是分 2 个 repo 吗?就是一个后台 go gin ,一个前台 react ,然后 react 项目做 CI 的时候自动把编译的最新文件拷贝到 go gin 项目?
    Jammar
        8
    Jammar  
       2023-02-08 10:21:35 +08:00
    把前端打包成静态文件,用 go 部署,embed
    darkengine
        9
    darkengine  
       2023-02-08 10:21:36 +08:00
    npm start 只是开发环境,正确的实践是 npm build 之后,把 build 目录传到服务器,用 nginx 来 serve 就好了。
    Nazz
        10
    Nazz  
       2023-02-08 10:26:24 +08:00
    @zhanshi 一个人开发的话一个 repo 也行, 分目录就可以了. 生产环境一般是前端把代码打包上传到 CDN, 后端构建镜像部署到 k8s. 资源文件很少的情况下可以用 go embed 一把梭.
    zhanshi
        11
    zhanshi  
    OP
       2023-02-08 10:30:53 +08:00
    @Nazz 我们是前台后台不同开发的,看来还是分开 repo :)

    但是开发环境联调的时候,还是 CI 过程拷贝打包好的 js 到 gin 项目?
    Nazz
        12
    Nazz  
       2023-02-08 10:33:53 +08:00
    @zhanshi 开发环境一般把静态文件放 NGINX.
    Morii
        13
    Morii  
       2023-02-08 10:34:38 +08:00
    为啥放一个 repo 里?
    feelinglucky
        14
    feelinglucky  
       2023-02-08 10:44:22 +08:00
    可以看看我们的开源项目,用的是和楼主说的一样的方案 https://github.com/answerdev/answer
    NakeSnail
        15
    NakeSnail  
       2023-02-08 10:45:22 +08:00
    他两有啥好集成的
    zhanshi
        16
    zhanshi  
    OP
       2023-02-08 10:50:20 +08:00
    @Nazz 所以应该参照 https://hakaselogs.人工断开 me/2018-04-20/building-a-web-app-with-go-gin-and-react/

    然后 index.html 的内容是如下吗?

    <script type="text/babel" src="INTERNAL-NGINX-URL/app.jsx"></script>
    dobelee
        17
    dobelee  
       2023-02-08 10:54:30 +08:00
    前后端分离,gin 和 react 没有半毛钱关系。两个完全独立的系统。
    liuxu
        18
    liuxu  
       2023-02-08 12:06:51 +08:00
    前后端独立,发布用 embed 集成为 1 个二进制发布

    https://github.com/liuquanhao/moyu
    Trim21
        19
    Trim21  
       2023-02-08 22:19:58 +08:00
    @zhanshi #7 vite 或者 webpack 这些开发服务器都有代理功能。开发的时候就直接在开发服务器启动的页面上。

    部属的时候要看情况,如果你用 nginx 可以直接用 nginx 处理静态文件。

    index.html 一般是在打包器里设置 public path 之类的配置项。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2907 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 14:15 · PVG 22:15 · LAX 07:15 · JFK 10:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.