语雀复制过来的文章无法展示图片,这点还是人家 csdn 做得好,标题是同一个,大家可以搜一下(不知道怎么将标题改成正文,所以字会大)
背景
需要部署 springboot + vue 项目,考虑到成本原因(服务器 + 域名购买),最终选择了微信云托管
看了目前市面上的一些帖子,有很大参考意义,但无法完全跑通,瞎琢磨一周左右,最终成功部署上去了
期间很多难点的解决都来自于大脑空白的灵光一现
考虑到有很多和我一样的小白,这篇教程我会尽量写得详细一点
springboot 后端部署
mysql数据库地址
创建数据库
方法一(推荐)
直接新建数据库
方法二
选择模板部署
选择 springboot
部署成功后会自动创建数据库
导入数据库
通过公网 域名 在本地连接数据库,执行 sql 脚本
项目中配置
这里也是一样,需要通过公网域名(内网域名没有测试过,据说不行,小伙伴们可以试试看)
redis 地址
这里只能用内网 ip,微信官方是这么说的(截图找不到了,大致意思是微信云托管的 redis 不支持 tcp 协议,因此只能通过 http 形式访问)
本地打 jar 包
部署服务
新建服务
在微信云托管平台新建一个服务,并且打开公网访问和内网访问(内网后续用不到,可以考虑关闭,尝试用内网但是失败了,有大佬会的话可以教教,我会完善这篇文档)
上传 jar 包
将刚刚打好的 jar 包上传,不需要 Dockerfile 文件,它会自动生成的
这里注意端口需要改成 springboot 服务的运行端口
发布服务
最后点击发布,不出意外就可以顺利部署
说两句
部署方式有很多种,可以打成镜像部署,也可以集成 github项目一建部署,但多多少少都会有些坑,大家可以自由发挥,目前市面上的教程真的很少,也希望大家多多活跃,目前市场现状:开源 -> 闭源 -> 私有化
vue 前端部署
构建方式:通过 nginx 容器进行部署
这里采用本地打包 docker 镜像的方式,因为担心如果在服务器上 build,会出现各种各样的问题。
前置准备
获取微信云平台镜像仓库密码
-- 首次获取需要重置
随便点一个服务进去(没有就新建一个):
然后点点点:
这里首次进入需要开通
复制 docker 登录信息
刚才的地方左边一个:
点进去后复制即可,大概是:
docker login ccr.ccs.tencentyun.com --username=111111
下载 docker 应用程序,然后在 docker 中登录到微信云
登录 docker
在 docker 中登录
域名修改
后端接口的 ip 需要改成刚刚部署的 springboot 服务的公网域名
本地打包
npm run build
打完完成后会生成 dist 目录
构建镜像
新建 Dockerfile 文件
在项目根目录新建 Dockerfile 文件
输入内容:
# 使用官方 Nginx 镜像
FROM nginx:alpine
# 将构建好的文件复制到 Nginx 默认目录
COPY dist /usr/share/nginx/html
# 暴露 80 端口
EXPOSE 80
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
大致意思是将 dist 目录复制到 nginx 中
执行 Dockerfile 文件
在 vscode 中运行以下命令(什么?你还没有安装 docker?那就是你的不对了)
docker build --platform linux/amd64 -t vue-shop:v1 .
( 这里指定了平台架构,不然部署服务会提示获取镜像失败,同时这里的版本大家可以随着服务迭代不断递增)
这样 docker 镜像就有了,接下来需要上传到微信云的容器服务中
新建前端服务
上传之前需要新建个服务,老样子:
上传本地镜像
找到上传路径:
这是刚刚新建的空白服务,然后点快捷指令:
这个就是我们需要的,在 docker 中执行即可
知道你们可能不会,举个栗子:
这是我的 demo 镜像:
那么:
# 打标签 docker tag java-demo:latest ccr.ccs.tencentyun.com/tcb-111-jymx/ca-lg_vue-shop:v4 # 上传 docker push ccr.ccs.tencentyun.com/tcb-111-jymx/ca-lg_vue-shop:v4
(java-demo:latest) 是本地镜像的 name 和 tag ,也可以替换成 image id
(ca-lg_vue-shop:v4)后面的版本可以自己换,代表发上去是什么版本
检查一下:
上传成功!!!
部署服务
找到刚刚创建的空的前端服务,点进去:
前端端口一般就是 nginx 的端口,不用改,点击发布