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

[zhanshi]

最近有个新项目，想用 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 就可以了，不知道是不是我看漏了什么步骤？或者大家有更好的集成方案文档推荐吗？

[Leviathann]

开发时后端随便设置一个，前端监听 8080 ，转发到后端

[Nazz]

前端项目在开发时一般会用到 nodejs express 框架启动一个 web server, 所以需要监听新的端口, 而部署的时候是打包好的静态文件.

[Trim21]

一般是在 3000 端口启动 react 的开发进程，然后转发 API 请求到另一个端口的后端。你这个例子里的 assets 是项目的根目录。

[hejinliangsb]

前后端分离不集成

[zhanshi]

@Leviathann @Trim21 @Nazz 谢谢，已经发送感谢

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

所以目录架构应该是类似


即 index.html：

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

然后前端开发把 ReactJS 打包到 app.jsx 里面，后台开发专注写 restful API ？

[Nazz]

@zhanshi 开发的时候通过配置代理发送跨域请求, 部署的时候在同一个域下就不需要代理了.

[zhanshi]

@Nazz 好的，谢谢，我搜索一下配置代理的方法。

一般来说，请问这类项目是分 2 个 repo 吗？就是一个后台 go gin ，一个前台 react ，然后 react 项目做 CI 的时候自动把编译的最新文件拷贝到 go gin 项目？

[Jammar]

把前端打包成静态文件,用 go 部署,embed

[darkengine]

npm start 只是开发环境，正确的实践是 npm build 之后，把 build 目录传到服务器，用 nginx 来 serve 就好了。

[Nazz]

@zhanshi 一个人开发的话一个 repo 也行, 分目录就可以了. 生产环境一般是前端把代码打包上传到 CDN, 后端构建镜像部署到 k8s. 资源文件很少的情况下可以用 go embed 一把梭.

[zhanshi]

@Nazz 我们是前台后台不同开发的，看来还是分开 repo :)

但是开发环境联调的时候，还是 CI 过程拷贝打包好的 js 到 gin 项目？

[Nazz]

@zhanshi 开发环境一般把静态文件放 NGINX.

[28Sv0ngQfIE7Yloe]

为啥放一个 repo 里？

[feelinglucky]

可以看看我们的开源项目，用的是和楼主说的一样的方案 https://github.com/answerdev/answer

[NakeSnail]

他两有啥好集成的

[zhanshi]

@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]

前后端分离，gin 和 react 没有半毛钱关系。两个完全独立的系统。

[liuxu]

前后端独立，发布用 embed 集成为 1 个二进制发布

https://github.com/liuquanhao/moyu

[Trim21]

@zhanshi #7 vite 或者 webpack 这些开发服务器都有代理功能。开发的时候就直接在开发服务器启动的页面上。

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

index.html 一般是在打包器里设置 public path 之类的配置项。