首页 前端知识 Golang和Vue前后端分离项目打包一个可执行文件

Golang和Vue前后端分离项目打包一个可执行文件

2024-09-21 21:09:27 前端知识 前端哥 432 195 我要收藏

现状

前后分离开发模式现在非常流行,前后端工程师各自开发各端,各不干扰,提高开发效率。但是部署起来特别麻烦。前后端需要各自打包部署。传统的上线部署方式:前后端各自打包好,配置好数据库、redis等中间件,通过nginx给api、前端资源做反向代理,提供给用户访问。而golang是一门非常方便的开发语言,能把代码打包成一个可执行文件,部署起来非常方便。很显然传统的上线部署方式违背了golang便捷的原则。有没有可能把前后端打包在一起?

需求

以go-admin前后端分离项目为例,打包成一个可执行文件。

项目地址:https://github.com/go-admin-team/go-admin

环境

环境语言和框架版本
后端golang、gingo 1.18
前端vue、element-uinode v14.16.0
数据库mysql、sqlite3mysql8.0、sqlite3

实践

(1)拉取go-admin代码

go-admin版本为go-admin-2.1.1

go-admin-ui版本为go-admin-2.0.9

在这里插入图片描述

重点注意:两个项目必须放在同一文件夹下;

# 获取后端代码
git clone https://github.com/go-admin-team/go-admin.git

# 获取前端代码
git clone https://github.com/go-admin-team/go-admin-ui.git

(2)打包前端项目

修改配置文件,配置后端api接口

注意,注意,注意,VUE_APP_BASE_API跨域问题。

.env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://localhost:8000'
# 进入前端项目目录
cd go-admin-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 打包
npm run build:prod

# 打包完成后,在go-admin-ui下生成dist目录,这是我们需要的前端文件。

(3)打包后端项目

安装gin-contrib/static

github地址:https://github.com/gin-contrib/static

go get github.com/gin-contrib/static

将前端打包好的dist目录移动到go-admin\app\admin\router下

在这里插入图片描述

按理说可以将dist目录放置到go-admin根目录下或其他目录下,但是我没有尝试。

修改路由文件sys_router.go

导入

import "github.com/gin-contrib/static"

修改文件

// 使用go embed嵌入dist
//go:embed  dist
var front embed.FS

func InitSysRouter(r *gin.Engine, authMiddleware *jwt.GinJWTMiddleware) *gin.RouterGroup {
    // 添加以下代码 start
	r.Use(static.Serve("/", static.EmbedFolder(front, "dist")))
	r.NoRoute(func(c *gin.Context) {
		fmt.Printf("%s doesn't exists, redirect on /\n", c.Request.URL.Path)
		c.Redirect(http.StatusMovedPermanently, "/")
	})
    // end
    
	g := r.Group("")
	sysBaseRouter(g)
	// 其他代码略
}

打包go-admin,以sqlite3数据库为例,mysql差不多

# 进入后端项目目录
cd go-admin

# 安装依赖
go mod tidy

# 打包
go build -tags sqlite3

# 打包完成后,生成go-admin.exe

(4)如何测试使用

将go-admin.exe拷贝到其他测试目录,如桌面的demo目录,并拷贝config目录。

在这里插入图片描述

# 初始化
go-admin.exe  migrate -c config/settings.sqlite.yml

# 运行
go-admin.exe  server -c config/settings.sqlite.yml

                                                              ____
                                               ,---,        ,'  , `.  ,--,
              ,---.      ,---,.              ,---.'|     ,-+-,.' _ |,--.'|         ,---,
  ,----._,.  '   ,'\   ,'  .' |              |   | :  ,-+-. ;   , |||  |,      ,-+-. /  |
 /   /  ' / /   /   |,---.'   , ,--.--.      |   | | ,--.'|'   |  ||`--'_     ,--.'|'   |
|   :     |.   ; ,. :|   |    |/       \   ,--.__| ||   |  ,', |  |,,' ,'|   |   |  ,"' |
|   | .\  .'   | |: ::   :  .'.--.  .-. | /   ,'   ||   | /  | |--' '  | |   |   | /  | |
.   ; ';  |'   | .; ::   |.'   \__\/: . ..   '  /  ||   : |  | ,    |  | :   |   | |  | |
'   .   . ||   :    |`---'     ," .--.; |'   ; |:  ||   : |  |/     '  : |__ |   | |  |/
 `---`-'| | \   \  /          /  /  ,.  ||   | '/  '|   | |`-'      |  | '.'||   | |--'
 .'__/\_: |  `----'          ;  :   .'   \   :    :||   ;/          ;  :    ;|   |/
 |   :    :                  |  ,     .-./\   \  /  '---'           |  ,   / '---'
  \   \  /                    `--`---'     `----'                    ---`-'
   `--`-'

欢迎使用 go-admin 2.1.1 可以使用 -h 查看命令

Server run at:
-  Local:   http://localhost:8000/
-  Network: 172.24.80.1://http:8000/
Swagger run at:
-  Local:   http://localhost:8000/swagger/admin/index.html
-  Network: http://172.24.80.1:8000/swagger/admin/index.html
2024-04-25 18:43:02 Enter Control + C Shutdown Server

在这里插入图片描述
在这里插入图片描述

(5)重点说明

这种方式只适用于中小型web项目,大型项目还是推荐前后端分离部署,方便解耦,更容易排查问题。

其实配置文件和sqlite3数据都可以嵌入可执行文件。但是go-admin需要config下的sql文件初始化数据库,因此需要拷贝config目录到与可执行文件同一目录。其他项目使用gorm,可以直接配置迁移命令,将结构体转化到数据库,就不用sql文件,只需配置文件,若将配置文件也embed到可执行文件更方便,但是不方便将来做迁移。

另外推荐两款静态后台模板:光年(Light Year Admin)后台管理系统模板和AdminLTE,可以用vue和axios调用后端接口,golang集成web后台管理系统很好用。

项目推荐

花落南国北亭凉的博客,我的博客,哈哈

光年(Light Year Admin)后台管理系统模板

AdminLTE后台模板

go-admin后台管理项目

nunu快速生成golang项目CLI

wails:使用 Go 和 Web 技术构建桌面应用程序:支持Vue,React,(强烈推荐,有趣)

相关文章

https://zhuanlan.zhihu.com/p/378635694

https://blog.hi917.com/detail/92.html

https://community.aidlux.com/postDetail/727

https://www.jb51.net/article/267543.htm

https://blog.csdn.net/weixin_41601114/article/details/115114577

https://blog.csdn.net/q1009020096/article/details/125267490

https://www.cnblogs.com/lxz123/p/15844156.html

https://www.jianshu.com/p/ba92441e25ba

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18454.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!