Docker自动化部署Vue项目
  点滴记录   0 评论   104 浏览量

Docker自动化部署Vue项目

  点滴记录   0 评论   104 浏览量

目前国内大部分的公司,都会使用Vue进行前后端分离的项目开发。因此,需要自动化部署前端Vue,就非常重要。参考掘金上写的一篇文章,进行部署springboot项目的部署流程。直接使用Docker安装Jenkins进行项目的自动化部署,nodeginspringboot项目等等。

Docker安装Jenkins

Windows下安装Docker,点击进入docker官网下载安装包,需要使用git登录。下载Docker Desktop Installer.exe下载好后,双击安装即可,默认会装在C盘。在D盘下,新建文件夹jenkins_home。安装成功后,会提示重启电脑。右击打开cmd,执行下面的命令,安装Jenkins就好了。注意,挂载的目录一定要对,不然重启电脑,之前container中数据会全部丢失。

docker run --name jenkins_node -d \
-v /jenkins_home:/var/jenkins_home -u root -p 8081:8080 -p 50000:50000 jenkins/jenkins:lts
shell

我用的是自己的目录结构,有需要的要自行调整。执行上诉脚本,即可自动安装jenkins/jenkins:lts镜像,等待下载即可

截屏20210929下午8.49.03.png

浏览器打开127.0.0.1:8081即可进入管理界面。首先会提示我们输入管理员密码,解锁Jenkins。执行docker logs jenkins_node即可查看解锁密码了。将镜像以及Docker默认的安装目录从C盘该到D盘的方法

版本太高了:导致一堆东西看不懂。

配置Jenkins

首先我们进行SSH的相关配置,我使用的是最新版的2.446.1版本。直接创建项目。点击新建item输入任务名称,选择一个freestyle project即可。添加配置,选择github。点击进入gitee的地址。选择好对应的分支,然后点击开始构建,会自动pull下来gitee上的代码。构建触发器,构建环境都不用选。直接选择执行 Windows 批处理命令即可。找到控制台->系统管理配置ssh。插件搜索SSH server安装。一定要下载这个插件SSH Agent。然后重启。添加凭据提供者配置。安装好后,在构建环境那里就会出现SSH Agent的选项了。点击此处进入官方教程

image.png

Windows环境下执行的脚本是。安装插件Publish Over SSH。找到系统管理->system->Publish over SSH。添加ssh的配置,点击可以进行测试是否连接成功。

docker run -u root  -d -p 8080:8080 -p 50000:50000 -v jenkins-data:/var/jenkins_home -v /var/run/docker.sock:/var/run/docker.sock jenkinsci/blueocean
bash

接下来就是安装NodeJS配置相关的环境了,插件搜索NodeJS。只有一个结果,直接安装即可。然后按照下方进行配置就好了。找到控制台->系统管理->全局工具配置。添加node相关的配置就好了。

image.png

接下来就是选择Build Steps了,要么是shell,要么是windows shell,都可以试试。构建。我选择的是执行以下相关的脚本版本Jenkins 2.426.1

# 因为我构建的项目在admin-gin下,所以我要cd,并且我用的是shell 不是windows shell
ls && npm -v && cd admin-gin && npm config set registry https://registry.npm.taobao.org && npm i -f && npm run build
bash

那构建成功之后呢,就是将打包生成的dist文件全部发送到远程服务器了,接下来的操作如下所示。选择构建后操作。选择Send build artifacts over SSH。因为我是二级目录,所以Source files需要配置成admin-gin/dist/**。在远程linux服务器执行mkdir dir。新建个文件夹。

image.png

最后我们将传到服务器的文件,拷贝到nginx中就可以了,执行\cp -rf new-zip-blog/admin-gin/dist/** /nginx/html/admin/即可。自此,管理端的配置已经正常,然后是用户端。后台是使用pm2管理发布的,新建item,命名为zip-blog-merchant。执行的相关的shell是

# 因为我构建的项目在admin-gin下,所以我要cd,并且我用的是shell 不是windows shell
ls && npm -v && cd merchant && npm config set registry https://registry.npm.taobao.org && npm i -f && npm run build
bash

将打包生成的.nuxt文件拷到远端服务器。然后执行pm2 list && pm2 restart nuxt-app

\cp -rf zip-blog-merchant/merchant/.nuxt/** /zip-blog-nuxt/merchant/ && cd /zip-blog-nuxt/merchant/ && pm2 restart nuxt-app
bash

自此。用户端的自动化部署已经完成了。接下来是自动化部署docker中运行的gin框架的项目了。插件管理中下载Docker 插件,然后直接安装。在 Jenkins 管理页面中的全局工具配置中,找到 Docker 的配置部分,添加远程 Docker 主机的信息,包括 IP 地址和端口。这通常是在 “Manage Jenkins” > “Global Tool Configuration” 下的 “Docker” 部分。命名Docker_43.139.104.23。新建item,插件搜索go。系统管理->全局工具配置->Go。添加go相关的配置。命名Go_v1.21.5即可。

image.png

# 编译go相关的脚本如下
ls && go version && cd jump && go env -w GO111MODULE=on && go env -w GOPROXY=https://goproxy.cn,direct  && go mod tidy && go build -o main.exe main.go
shell

最后将打包生成的文件发送到远程服务器即可,所以Source files需要配置成jump/main.exe。在远程linux服务器执行mkdir dir。新建个文件夹。目标文件设置成/zip-blog-nuxt/jump/管理端的接口。执行cd /zip-blog-nuxt/jump/ && pm2 restart gin-app即可。执行

\cp -rf jump/jump/main.exe /zip-blog-nuxt/jump/ &&  cd /zip-blog-nuxt/jump/ &&  pm2 restart gin-app
bash

image.png

Jenkins高级操作

jenkins可以重新构建docker中的镜像。一定要添加权限chmod +x main.exe

本文由 木之下 发表, 最后编辑时间为:2023-12-09 15:00:09
(完)