vue3项目--让我们更快开发vue（四）（服务器怎么搭）

BEON
465 阅读4分钟

前言

搁置了几个月了，经历了离职、旅游、找工作、入职，现在渐渐开始继续上路了

本文为一个连续的文章，分为以下几个阶段，每个阶段都会出一篇文章(本篇为最后一节)：
本篇只是本人搭建的一些自动化工具而已，只是给大家分享一下我服务器的整体有哪些东西

关于我的服务器

现阶段我购买的是天翼云的5M宽带的服务器（相对而言搞活动的时候200多点一年很便宜了），然后系统装的centos7+版本，连接服务器用的xshell + xftp

这里想专门说一下我之前拿到服务器一开始就会直接装宝塔linux系统，但是后面出问题导致了全部重装了整个系统（也刚好将大部分应该迁移使用了docker进行服务部署）

然后还有一台服务器，就是借用的朋友的了，一个1M宽带的小服务器，用来专门构成集群

代码管理

本人现在代码基本上都是在gitee进行管理的（最近也在同步更新github了），之前考虑过搭建gitlab，但是自己的小服务器经不起折腾就放弃了。

所以后面的自动化就是采用的gitee的webhook来进行触发实现的。

jenkins

为了跟上时代的脚步，所有构建都是采用的jenkins进行的，但是从这一步开始我就渐渐的不知道如何才是最好的方式了。最后我采取的方案是前后端进行打包到一个docker image中，然后进行包的发布。下面就放上我执行的shell：

vue前端的脚本

#!/bin/bash
echo $PATH
cnpm install
cnpm run build

rm -rf ../vue-assemble-ui-node/public/assemble/
cp -r assemble ../vue-assemble-ui-node/public

node后台的脚本

#!/bin/bash
echo $PATH

IMAGE_NAME='registry.cn-hangzhou.aliyuncs.com/bymycode/vue-assemble-ui'

IMAGE_VERSION=$(date "+%Y%m%d%H%M%S")

echo IMAGE_NAME=$IMAGE_NAME
 
echo '================开始创建镜像================'

docker build -t $IMAGE_NAME:$IMAGE_VERSION .

docker tag $IMAGE_NAME:$IMAGE_VERSION $IMAGE_NAME:latest

 
echo '================开始推送镜像================'

docker login --username=******* --password=***** registry.cn-hangzhou.aliyuncs.com

docker push $IMAGE_NAME:$IMAGE_VERSION

docker push $IMAGE_NAME:latest

echo '====================OK!================'

其实前端就是单纯的构建了dist文件夹后对后端的内容进行替换，然后触发后端构建生成docker包进行推送发布

镜像管理

对于镜像管理我使用的是阿里云的容积镜像服务，然后创建了一个触发器，能够在进行镜像推送完成之后进行自动化的部署的触发。

然后关于阿里云的这个东西网上也有很多说明，就不一一介绍了。

Portainer

这是一个可以可视化的查看自己的容积、镜像、服务、栈的平台，引入方式也很简单，只需要执行docker pull下来就可以了，感谢的可以去搜索一下名称就可以找到详细的说明。

然后就是利用这个可视化就可以将阿里云的触发链接填写上，就会自动的触发我们服务的pull和部署了

有一点需要注意，由于我们的包属于私有库所以需要创建到指向私有库的服务，所以推荐大家使用命令行来创建服务，要不然很可能会出现pull不下来的问题。我的构建语句如下

docker service create -p 9988:9988 --network vue-assemble-net --replicas 2 --name vue-assemble-ui --no-resolve-image --with-registry-auth registry.cn-hangzhou.aliyuncs.com/bymycode/vue-assemble-ui:latest

额外

基本上以上就是我使用的内容了来一张图介绍一下，然后就是利用nginx做了一个简单的负载均衡，就像这样的：

upstream vueAssemble{
    server 127.0.0.1:9988 weight=5;
    server 127.0.0.1:6090 weight=1;
}

最后再给大家提个醒：

在安装了宝塔linux的情况下，两个服务器都出现了无法将端口正常的代理出去，最后发现是宝塔在正常环境外层加了一个nginx拦截，所以你需要在宝塔nginx里面把本地的端口代理出去（具体详情可以联系本人）

结尾

这就是本文全部内容了，耽搁了几个月后终于更新完了（虽然不一定有人看😅），在这还是预告接下来的内容吧：会将之前文章的git自动化提交工具重新开发成一个开源库发布出来📢，待我下篇文章更新希望可以方便大家开发中git提交的问题。

最后希望大家能给项目一个小星星哦

github: github.com/wyx11223344…

gitee: gitee.com/beon/vue-as…

在线访问: http://36.111.183.168:9527/

如果有任何问题或者想让我帮忙进行开发欢迎进行评论的私聊我，下面贴上本人微信二维码。

avatar
文章
阅读
粉丝