前言 最近在用vue3写后台管理项目, 发现花裤衩PanJiaChen的vue-element-admin源码还停在了vue2, 一咬牙索性就自己厚着脸皮用vue3+vite2+pinia按照源码重写一下. 写起来还算简单, 没什么技术含量, 就不乱介绍科普了. 有兴趣的可以去看大佬之前写的教程 [[传送门]](https://juejin.cn/post/684490...). 重写的代码将会做为存储文件服务的管理端, 嫌麻烦不想自己写代码的可以下载代码跟着本文一步一步做测试.
代码↓:
Github \
前端 https://github.com/guangnaoke...
Go https://github.com/guangnaoke...
Gitee \
前端 https://gitee.com/Xiao_Yi_Zho...
Go https://gitee.com/Xiao_Yi_Zho...
配置报错 jest

文章图片

解决方法:

jest.config.js// 任选qiyi, 我是第一个方法解决的 transformIgnorePatterns: ['!node_modules/'] // transformIgnorePatterns: [`/node_modules/(?!${esModules})`]

vite
run dev不会报错, build时候报错.

文章图片

解决方法:

vite.config.js// VITE_APP_PROXY_DOMAIN_REAL, 是.env文件的定义的属性. define: { 'process.env': { APP_DOMAIN: VITE_APP_PROXY_DOMAIN_REAL } }

xxx.js // import.meta报错, 就自定义一个方法.export const appDomain = process.env.NODE_ENV === 'development' ? '' : process.env.APP_DOMAIN

vite-plugin-mock
开始以为是node的esbuild报错, 逐尝试 node node_modules/esbuild/install.js 无果.

文章图片

解决方法:

node node_modules/vite-plugin-mock/node_modules/esbuild/install.js

印象比较深就这几个, 有新的在来更新. 算是一个错误总结吧. 如果各位有更好的解决方法, 麻烦评论告诉我, 谢谢!
接下来, 活动活动下你的小手, 直接开整!
安装 如果你不用docker来安装下面这些应用, 而是直接安装的话, 你可以直接忽略关于docker的细节, 其他部分安装基本上是一致的.
安装docker到你的服务器(或者虚拟机), 这个网上很多教程.
docker安装Jenkins

docker pull jenkinsci/blueoceandocker run \ -d \ -u root \ -p 8080:8080 \ --name jenkins \ --restart=always \ -v /www/jenkins:/var/jenkins_home \ -v /var/run/docker.sock:/var/run/docker.sock \ -v /etc/localtime:/etc/localtime:ro \ -e JENKINS_OPTS="--prefix=/jenkins" \ -e JENKINS_ARGS="--prefix=/jenkins" \ -e TZ="Asia/Shanghai" \ jenkinsci/blueocean:latest

-d 【容器后台运行】 \
-p 【端口】 \
--name 【容器名称】\
--restart always 【docker重启后,自动重启容器.】 \
-v /www/jenkins:/var/jenkins_home 【配置目录映射到本机】\
-v /var/run/docker.sock:/var/run/docker.sock 【将主机的docker映射到容器内】\
-v /etc/localtime:/etc/localtime:ro 【保持容器时间与主机时间一致】\
-e JENKINS_OPTS="--prefix=/jenkins" \
-e JENKINS_ARGS="--prefix=/jenkins" \
【如果是 http://127.0.0.1:8080/jenkis 访问, 需要设置上面两个 -e, http://127.0.0.1:8080 直接访问则不需要加.】\
-e TZ="Asia/Shanghai" 【时区】
127.0.0.1 替换成你的ip地址
运行后访问 http://127.0.0.1:8080/jenkins.

文章图片

回到控制台输入

docker logs 容器id

中间的那串码就是密码

************************************************************* ************************************************************* *************************************************************Jenkins initial setup is required. An admin user has been created and a password generated. Please use the following password to proceed to installation:546b79bd427544699725962978dc4339This may also be found at: /var/jenkins_home/secrets/initialAdminPassword************************************************************* ************************************************************* *************************************************************

选推荐就好

文章图片

后面几步的都挺简单的, 创建账号密码, 保存完成下一步就ok.
进到jenkins首先安装一些要用的插件

文章图片

选择可选插件, 然后再右边的搜索框搜索.

文章图片

依次安装

文章图片


文章图片


文章图片

代码仓库看着选
Gitee

文章图片

Github

文章图片

后面的WebHooks例子我就以国内的Gitee为例.
安装好后重启下jenkins, 安装页面有提示重启. 如果没有, 可以地址栏后面加个restart.

文章图片

配置工具 设置下全局工具.

文章图片

NodeJS选择自己要的版本.

文章图片

去容器内设置下SSH, 当然你也可以设置全局工具配置.

docker exec -it 容器id /bin/bash

接下来就是敲几个命令

ssh-keygen -t ed25519 -C "xxxxx@xxxxx.com" cat ~/.ssh/id_ed25519.pub # ssh-ed25519 AAAAB3NzaC1yc2EAAAADAQABAAABAQC6eNtGpNGwstc....

'#' 后面的就是公钥, 添加到SSH管理

文章图片

如果不会, 参考:https://gitee.com/help/articl...
创建任务 建个测试用的仓库

文章图片

git clone 到本地, 然后创建个jenkinsfile文件,注意大小写. 内容如下

pipeline { agent any stages { stage('Build') { steps { sh 'echo "Building...!"' } } stage('Test') { steps { sh 'echo "Testing...!"' } } } }

接着去jenkins创建任务

文章图片

到Gitee Webhook这里勾选

文章图片

在拉到下面生成下密码

文章图片

然后去Gitee设置WebHooks, 将上面的URL和密码分别填入, 点击确定.

文章图片

回到jenkins的任务面设置最后一步, 将git地址填进去, 上面我们设置了SSH, 所以Credentials这里可以选'无', 没有设置SSH但是设置了全局工具的可以直接选你创建好的key.

文章图片

最后注意下你的jenkinsfile大小写, 对应你项目里的文件名.

文章图片

点击保存完成设置.
测试 将改动后的项目push到仓库, 看jenkins任务是否正常启动了.

文章图片

测试成功

文章图片

接下来可以拿文章开头的链接去仓库拉取代码, 当然你可以用你自己的项目进行测试.
一般我会将测试和部署分开执行的, 并不会合拢到一个流水线. 测试任务一般是推送代码的时候触发, 部署任务因为要考虑发布环境、版本号、推送镜像等等, 会采用手动设置参数构建. 当然整个过程也只是输入一些参数, 容器创建部署都是自动的.
测试任务跟前面的创建任务步骤一样, jenkinsfile文件已经在项目的根目录, 就不重复这个过程了.
接下来创建部署任务

文章图片

添加参数, 选择字符参数, 可以设置一些版本号、容器名字、发布的环境等字符.

文章图片

这里和测试任务一样.

文章图片

选择NodeJS环境, 版本号选择你全局工具设置的.

文章图片

构建选择shell脚本

文章图片

代码如下

# 进入工作区 cd $WORKSPACE# 修改镜像源 npm config set registry https://registry.npmmirror.com# 安装依赖 npm install# 测试 npm run test# 打包 npm run build# docker通过 Dockerfile 打包, VERSION是你构建任务时要输入的版本号 docker build -t minio_web_client:$VERSION .# 下面 stop rm 的操作不是必须 docker stop minio_web_client || truedocker rm minio_web_client -f || true# 启动容器 docker run -d -p 8083:8083 --name minio_web_client minio_web_client:$VERSION# 有些镜像构建过程会产生:的垃圾镜像, 可以通过这个命令删除掉没有依赖的这类镜像. # 有多个任务同时运行时, 慎用. 如果这个任务比其他的早结束, 会造成其他容器的依赖被删除, 导致报错. docker rmi $(docker images -f "dangling=true" -q) || true

构建后的操作, 比如成功或者失败给你发Email之类的就不介绍了, 有需求的自己琢磨下.
将构建好的镜像推到dockerHub或者Harbor有时间再更新..？

文章图片

设置完点击保存.
回到项目文件, 然后在根目录创建一个Dockerfile文件, 代码如下

FROM node:16.13.0-stretch-slim# 创建/app /app/dist 文件夹 RUN mkdir -p /app/dist# 切换到app文件夹 WORKDIR /app# 下面两个ADD操作将server静态服务器与打包好的项目文件复制到对应的文件夹 ADD ./server /appADD ./build /app/dist# 创建package.json等文件 RUN npm init -y# 设置镜像源 RUN npm config set registry https://registry.npmmirror.com# 安装依赖 RUN npm install koa@2.13.4 koa-static@5.0.0# 静态服务器端口号 EXPOSE 8083# 执行命令 CMD [ "node", "index.js" ]

在根目录创建server文件夹,新建index.js文件, 用来构建一个简单的静态服务, 代码如下:

// 使用dockerfile构建静态服务器const Koa = require('koa') const koaStatic = require('koa-static') const app = new Koa()const static = koaStatic('./dist')app.use(static)app.listen(8083)

回到jenkins, 点击构建任务

文章图片

输入版本号开始构建

文章图片

等待任务跑完...
如果构建成功的话, 在终端输入: docker images, 会发现多了一个minio_web_client的镜像

文章图片

继续输入: docker ps, 发现镜像已经启动运行了.

文章图片

这时候去浏览器地址访问: htttp://127.0.0.1(替换地址):8083 应该可以访问到部署的项目了.

文章图片

docker安装Nginx
不需要反向代理的, 到这里这篇文章就结束了, 感谢阅读！
先在服务器的/usr文件夹下建立Nginx目录和所需的配置文件, 如果没有的话, 在跑容器的时候很有可能跑不起来.
创建目录(linux为例)

mkdir /usr/nginx/html -p mkdir /usr/nginx/conf/conf.d -p mkdir /usr/nginx/logs -p

上面创建的目录是docker将来要挂载到你本地的目录.

docker pull nginx:1.20 docker run -p 80:80 nginx:1.20 docker cp 容器id:/etc/nginx/conf.d/default.conf /usr/nginx/conf/conf.d docker cp 容器id:/etc/nginx/nginx.conf /usr/nginx/nginx.conf docker stop 容器id docker rm 容器id

配置文件可以先运行一个临时的nginx容器获取, 用完记得删除. 自己选择要安装的Nginx版本.
拿完配置文件后正式启动容器

docker run -d \ -p 80:80 \ --name nginx \ --restart=always \ -v /usr/nginx/html:/usr/share/nginx/html \ -v /usr/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \ -v /usr/nginx/conf/conf.d:/etc/nginx/conf.d \ -v /usr/nginx/logs:/var/log/nginx \ -e TZ=Asia/Shanghai \ nginx:1.20

-d 【容器后台运行】 \
-p 【端口】 \
-v 【要挂载的目录,nginx.conf配置文件映射到本地后,修改nginx配置的时候就很方便.】 \
--name 【容器名称】\
--restart always 【docker重启后,自动重启容器.】 \
-e TZ=Asia/Shanghai 【时区】
容器运行起来后, 进入创建的挂载目录找到conf.d下面的default.conf, 当然你也可以创建一个conf, 这个目录下的conf文件都会被加载进去.
修改配置文件:

# 127.0.0.1 替换成你自己的地址 upstream jenkins { server 127.0.0.1:8080; } upstream minio_web_client { server 127.0.0.1:8083; }server { listen80; server_name127.0.0.1; # To allow special characters in headers ignore_invalid_headers off; # Allow any size file to be uploaded. # Set to a value such as 1000m; to restrict file size to a specific value client_max_body_size 0; # To disable buffering proxy_buffering off; location ^~ /jenkins/ { proxy_pass http://jenkins; proxy_http_version 1.1; proxy_set_headerHost$host; proxy_set_headerX-Real-IP$remote_addr; proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; proxy_set_headerX-Forwarded-Proto $scheme; proxy_max_temp_file_size 0; #this is the maximum upload size client_max_body_size10m; client_body_buffer_size128k; proxy_connect_timeout90; proxy_send_timeout90; proxy_read_timeout90; proxy_bufferingoff; }location ^~ /minioclient/ { proxy_pass http://minio_web_client/; }# redirect server error pages to the static page /50x.html error_page500 502 503 504/50x.html; location = /50x.html { root/usr/share/nginx/html; } }

配置完后, 你可以重启Nginx的容器:

docker restart 容器id

或者进到容器里面重新Nginx:

docker exec -it 容器id /bin/bash cd /etc/nginx nginx -t nginx -s reload

浏览器输入不带端口的地址:
jenkins http://127.0.0.1(地址替换)/jenkins
web http://127.0.0.1(地址替换)/minioclient
看是否能正常访问了.
这里主要是做了一个反向代理, 让jenkins和web可以通过不带端口访问.
【一看就会的集成部署！太简单了（那顺便再撸个存储文件服务吧！|一看就会的集成部署！太简单了？那顺便再撸个存储文件服务吧！ (一)）】感谢阅读, 如果哪里有错误或者疑问麻烦评论告诉我, 我会及时修改的，谢谢!

推荐阅读

• 

  汽车积碳是什么意思
• 

  redis多节点同步
• 

  27岁有稳定工作,想用20万存款当做第二职业来投资,投资什么好呢？
• 

  上海戏剧学院分数线 2019年上海戏剧学院分数线
• 

  去加拿大必买清单 去加拿大买什么最划算
• 

  室内阳台养什么花最好 室内阳台适合养什么花好
• 

  火理财什么时间可以申请债权转让？债权转让收费吗
• 

  塑料菜板发黑怎么办
• 

  癌细胞|癌细胞已经转移，为什么人的精神依旧很好，而且很能吃？是好事？
• 

  详细步骤及注意事项 g2810加墨水后如何操作
• 

  佳能相机7100 佳能7100单反
• 

  有什么好看的书推荐？
• 

  你喜欢看军事小说吗？
• 

  空气阻尼器时间继电器 空气阻尼器结构图
• 

  2023春节坐高铁需要全程戴口罩吗 2021春节能坐高铁吗
• 

  台高官被问“你有接受过性招待吗
• 

  农村籍独生子女补贴如何领取？四类人无法领取有你吗？
• 

  甲氰菊酯有效是多久 甲氰菊酯药效是几天，水里多久失效
• 

  c语言连接数据库函数 c语言数据库连接池
• 

  有宠app怎么关闭资讯推送通知？有宠app关闭资讯推送通知的方法

• C语言进阶|【C语言进阶7——数组和指针的练习（1） - 学习sizeof 和 strlen，看完这一篇就够了】
• 微信打开几秒就自动关闭
• 选游戏手机就请先认准“神U”！
• 只需2步，就能简单搞定Word中的网格线_Word专区
• 新手机开机了就属于激活了吗
• 华为手机充电到80就充不进去了
• centos7系统部署hexo博客新手入门-进阶，看这一篇就够了
• 看完你就知道win10系统怎样样制作详细说明
• 使用就地排序算法对对象进行排序
• html是什么