网络日志

如何用Golang来手撸一个Blog - Milu.blog 开发总结

前段时间上线了一个小博客,今天有点空总结一下http://www.milu.blog,走过路过的小伙伴不要错过。Golang 边学边撸,这个看起来不复杂的小东西前后搞了2个多月的时间。在前期技术选型时,做为一个略懂前端的菜鸟,在前端方面做了大部分舍弃,没有选择时下流行的技术栈反而选择最原始的技术栈。这样做的目的一方面希望自己能够将主要的精力聚焦在Golang开发上,能够在完成阶段小目标的同时尽量不要沉迷于前台页面细节中,另外一方面还是希望能够在初期问题比较多的时候能够快速修复快速更新,给用户和反馈问题的小伙伴能够及时响应。就算这样的目标,最终还是在前台尝试了三套不同的风格模板来展示,也花费了不少时间,有兴趣的小伙伴可以试试。当然这些都是在Pongo2模板引擎的配合下完美实现,直接更新单个页面不用重启后台服务,如果切换模板需要重启服务。

这个项目的初衷就是通过一个基础代码的练习来巩固一下对Golang基础知识的掌握,同时也能够串联起所学的其它知识,并且以最简单的开发方式能够快速开发完成并能发布上线。由于侧重的是Golang,前台页面用简单的服务端方式渲染,没有npm,webpack,没有安装依赖、压缩,粗暴而简单。后台管理页面在 Layuimini 的基础上采用 iframe+vue 混合开发方式,原来通过 iframe 实现多标签的功能及基础布局框架没有变更,在业务页面直接引入 vueelement。优点是省去了安装依赖包、上线前打包的步骤,缺点是支撑不了复杂的业务。可选的技术栈有:

  1. 前台页面可以用Nuxt3 + ElementPlusNextjs + Antd等方式。
  2. 后台管理可以用 Vue3 + Arco, React + Antd 等等的方式。

仓库地址:

1. 相关介绍

1.1 基本介绍

  • 麋鹿博客 名字是为便于搜索引擎和Github搜索直达,同时组成整个动物系列开源项目。

1.2 技术栈

1.2.1 后台
技术说明官网
Golang - 1.18开发语言https://go.dev/
Gin - 1.8.1Gin Web Frameworkhttps://gin-gonic.com/zh-cn/docs/
Mysql - 5.7数据库https://www.mysql.com/cn/
Gorm - 1.9.16Golang ORMhttps://gorm.io/zh_CN/docs/index.html
JwtGolang jwthttps://github.com/golang-jwt/jwt
Pongo2 - 5模板引擎https://github.com/flosch/pongo2
Logrus日志https://github.com/sirupsen/logrus
Base64Captcha验证码https://github.com/mojocn/base64Captcha
Crypto密码库https://golang.org/x/crypto
Iniini文件库https://github.com/go-ini/ini
Goment时间处理工具https://github.com/nleeper/goment
Air热更新工具https://github.com/cosmtrek/air
1.2.1 前台
技术说明官网
Vue - 2.x渐进式JavaScript 框架https://cn.vuejs.org/v2/guide/
Axios基于promise 的HTTP 库https://github.com/axios/axios
Element-UI前端UI组件库https://element.eleme.io/
Tinymce可视化HTML编辑器https://www.tiny.cloud/
Fontawesome图标字体库http://www.fontawesome.com.cn/

1.3 开发工具

系统工具官网
Goland开发工具https://www.jetbrains.com/zh-cn/go/
Navicat数据库管理工具https://www.navicat.com.cn/
Atom源码阅读工具https://atom.io/
CmderCmd替代工具[windows]https://cmder.net/
Notepad2临时单文件编辑[windows]http://www.flos-freeware.ch/notepad2.html
Chrome调试工具https://www.google.com/intl/zh-CN/chrome/

1.4 文件结构

整体的结构参考世上最优美的框架 Laravel

├─app                 // 核心代码
│  ├─controller       // 控制层
│  │  ├─admin
│  │  └─home
│  ├─database        // 数据库链接
│  ├─model           // 模型层
│  └─service         // 操作数据层
├─config             // 配置文件
├─pkg                // 所有工具文件
│  ├─e               // 报错
│  ├─hash            // 验证码
│  ├─response        // 返回封装
│  └─utils           // 工具库
├─public             // 所有静态资源
│  ├─admin
│  ├─common
│  ├─data
│  ├─green
│  ├─home
│  └─uploads
├─routers             // 路由文件
└─views               // 所有静态资源
    ├─admin
    ├─green           // 绿色主题模板
    ├─default         // 默认模板
    └─home            // 普通模板

Tips:

  • Air由于go本身没有热加载技术,所以还需要一个热加载工具的支持。可选的也不多,

    1. Fresh

    Fresh满足基础的应用,每次保存文件都会生成或重新启动Web应用程序,只是这工具多年未更新所以弃用。

    2. Air

    Air的优点也比较突出:彩色日志输出,自定义构建或二进制命令,支持忽略子目录,启动后支持监听新目录等等的。

    2.1 Air 存在问题

    Air存在缓存问题,虽然在cmd里边结束Air,但刷新浏览器程序依然在运行,这时就需要手工结束进程然后重启。

    // 查找 PID,9888为端口号
    netstat -ano | findstr 9888
    // 杀死进程,14172 查到的pid
    taskkill /pid 14172 /f
    2.2 Command not found 报错

    如果输入 air 报这个错,那需要在系统的path里边配置项目路径,比如项目在D:\go-project,那么在path里边就应该有一条:

    D:\go-project\bin
  • Pongo2由于是前后端未分离的开发方式,所以模板引擎扮演着重要的角色,起初的选型也看了不少。比如goview,仿ejs的quicktemplate,还有类ejs的hero等等的。最后选定Pongo2的理由是功能强大,上手容易,能够容易实现分模板继承不同模板的需求。他大体的思路和语法是仿Jinja2和Django模板的或基本一样的。有诸如Extends、Macro、Block、Include等强大功能,如果有类 Django, Nunjucks 模板语法上手基本没有难度,Pongo2文档写的不是那么详细,有进一步了解还需要看仓库源码 Template_tests。问题,与Vue的取值边界符号有冲突。

两种解决办法:

  1. Vue的标签用v-html来代替,比如:<div v-html="user.nickname"></div>
  2. 修改Vue的边界修饰符 delimiters配置方式。Goland对Pongo2并没有提供专门的语法高亮支持,这其中推荐另外一个插件,Twig,需要2步
  3. 安装插件 File -> Settings -> Plugins -> Twig
  4. 重启开发工具

2. 如何在本地运行

以下以windows系统举例先从官网下载安装最新版Go开发包 1.18.3,然后进行相关的配置。

2.1 环境变量的配置

在系统变量中添加 Go 开发相关的变量,需添加以下变量

变量名说明
GOPATHd:\go-projectGo 语言的开发目录
GOROOTc:\Go安装 Go 安装目录
PATHc:\Go\bin;d:\go-project\bin终端可以直接运行Go命令; 运行自己编译的Go程序和Air
GO111MODULEon开启 Go.mod 功能,统一用go.mod管理开发依赖包,此功能在Go1.11版本中添加
GOPROXYhttps://goproxy.cnGo 包下载代理地址

2.2 数据库

2.2.1 Mysql的安装

Mysql是我以前玩PHP的套件Phpstudy,有安装方便、启动便捷、管理省心等特点,当然也可以选择单独的 Mysql 来安装。由于最终发布的宝塔控制面板目前默认版本是 5.7,为了避免不必要的麻烦,我目前安装这是这一版本。

2.2.2 数据导入

然后导入 elk-blg/public/data/elk-blog.sql文件。

2.2.3 运行

Cmd中cd到当前目录,然后直接输入命令 air后启动项目。

$ cd D:\go-project\src\elk-blog
$ air

2.3 Goland 的配置

2.3.1 File -> Settings -> Go 下配置
变量名说明
GOPATHd:\go-projectGo 语言的开发目录
GOROOTC:\Go会默认选择系统安装最高版本
GOPATH-Global GOPATHd:\go-project全局设置
Go ModulesGOPROXY=https://goproxy.cn,direct先从配置地址下载,若失败,转从原始地址下载 功能,统一用go.mod管理开发依赖包,此功能在Go1.11版本中添加
GOPROXYhttps://goproxy.cnGo 包下载代理地址
2.3.2 Settings -> Project Structure

排除Exclued .idea, bin, pkg 等目录,不进行索引,有效节省内存资源。

2.3.3 Settings -> Appearance

使用One Dark主题

2.4 Air 的配置

3. 如何上线发布

由于本人特别菜,对经典的linuxdocker一直没怎么学会,所以这次选择的是宝塔控制面板来辅助部署,以下的经验也是基于宝塔来介绍。

3.1 安装GO

宝塔Linux面板-安装golang环境

  • 基本的步骤就是先从go官网下载tar包,然后上传到服务器指定目录上 /usr/local,这样做的目的是,能够快速完成节省时间。
  • 然后解压添加环境变量 tar -xzvf go1.18.2.linux-amd64.tar.gz,这里边需要说明的是宝塔的终端不能修改配置文件,即没有退出保存的模式,需要ssh和直接在文本编辑模式修改。我添加的环境变量:

    export GOROOT=/usr/local/go # 设置为go安装的路径
    export GOPATH=/www/wwwroot/GO #项目路径
    export PATH=$PATH:$GOROOT/bin:$GOPATH/bin
  • 宝塔终端输入go version,显示:go version go1.18.2 linux/amd64 即确认为安装成功

3.2 新建网站

其实就是新建nginx配置文件,比如新建网站 milu.blog,然后在nginx中配置go服务端口入口。假如go的端口为4000,则增加如下配置:

server{
  location / {
    proxy_pass  http://127.0.0.1:4000;
  }
}

3.3 准备打包go

go的打包命令只打包*.go结尾的文件,换句话说非*.go的文件需要自己手动上传。如果经历过npm run build洗礼的人,那go的这个build至少到现在没有遇到大的问题,或许我代码写的少的原因。

set CGO_ENABLED=0
set GOARCH=amd64
set GOOS=linux
go build main.go

3.4 上传文件

上传的目录为在环境变量里边定义的项目路径,比如milu项目的目录就是

/www/wwwroot/GO/milu

其它的项目就是

/www/wwwroot/GO/other

为了防止其它配置文件寻找不到,那所有相关的文件都在这个目录中。那最后发布完的/www/wwwroot/GO/milu下的文件组织为:

├─config  // 配置文件
├─public  // 静态资源
├─views   // 模板文件
├─main    // 打完包二进制文件

也就是说前面那么多文件,如果部署这些文件就够了。

3.5 上传SQL文件

这块唯一说的是宝塔只支持Mysql5.7版本,暂不支持Mysql8.0,手工安装估计也可以,偷懒也没折腾。为防止版本不兼容,在本地开发时Mysql就为5.7。然后本地Navicat导出结构和数据,在Phpmyadmin里边导入。

3.6 命令行终端调试

在宝塔终端中cd到项目目录/www/wwwroot/GO/milu,然后直接 ./main,这样方便的查看日志,能够看到一些详情的报错信息。运行 ./main之后,就可以刷新域名,如果各步正常页面就能显示出来。

3.7 PM2绑定进程

我也只是试试的心态用pm2来运行一下go,没想到还真运行起来了。这样暂时不安装其它的服务,和Node服务一块运行起来。

4. 感谢的人

此项目感谢以下各界人士的支持和帮助