集成部署一目了然！太容易了？那我们顺便再用一个存储文件服务吧！(1)

前言最近在用vue3写后台管理项目。我发现PanJiaChen的vue-element-admin源码还是vue2的。一咬牙，硬着头皮按照源码用vue3+vite2+pinia重写。写的简单也不错，没什么技术含量，就不胡乱介绍科普了。有兴趣的可以看看之前大佬写的教程[[传送门]](https://juejin.cn/post/684490...)。Rewrite代码将作为存储文件服务的管理端。如果不想自己写代码，可以下载代码按照本文一步步测试。代码↓：Github\Frontendhttps://github.com/guangnaoke...去https://github.com/guangnaoke...Gitee\Frontendhttps://gitee.com/Xiao_Yi_Zho...去https://gitee.com/Xiao_Yi_Zho...配置错误jest解决方法：jest.config.js//可选qiyi，我是第一个解决方法transformIgnorePatterns:['!node_modules/']//transformIgnorePatterns:[`/node_modules/(?!${esModules})`]viterundev不会报错，buildtime报错。解决方法：vite.config.js//VITE_APP_PROXY_DOMAIN_REAL，这是.env文件中定义的一个属性。define:{'process.env':{APP_DOMAIN:VITE_APP_PROXY_DOMAIN_REAL}}xxx.js//import.meta报错，只是自动定义一个method.exportconstappDomain=process.env.NODE_ENV==='development'?'':process.env.APP_DOMAINvite-plugin-mock一开始以为是node的esbuild错误，一一尝试nodenode_modules/esbuild/install.js没有结果。解决方案：节点node_modules/vit只有e-plugin-mock/node_modules/esbuild/install.js让我印象深刻，还有新的要更新。也算是错误的总结。如果大家有更好的解决办法，请评论告诉我，谢谢！接下来，就从你的小手开始吧！安装以下应用如果不使用docker安装，直接安装，可以忽略docker的细节，其他部分的安装基本相同。安装docker到你的服务器（或虚拟机），网上有很多教程。docker安装Jenkinsdockerpulljenkinsci/blueoceandockerrun\-d\-uroot\-p8080:8080\--namejenkins\--restart=always\-v/www/jenkins:/var/jenkins_home\-v/var/运行/docker.sock:/var/run/docker.sock\-v/etc/localtime:/etc/localtime:ro\-eJENKINS_OPTS="--prefix=/jenkins"\-eJENKINS_ARGS="--prefix=/jenkins"\-eTZ="Asia/Shanghai"\jenkinsci/blueocean:latest-d[容器后台运行]\-p[端口]\--name[容器名称]\--restartalways[docker重启后,容器会自动重启。]\-v/www/jenkins:/var/jenkins_home[映射到本机的配置目录]\-v/var/run/docker.sock:/var/run/docker.sock[将宿主机的docker映射到容器]\-v/etc/localtime:/etc/localtime:ro【保持容器时间和宿主机时间一致】\-eJENKINS_OPTS="--prefix=/jenkins"\-eJENKINS_ARGS="--prefix=/jenkins"\【如果是http://127.0.0.1:8080/jenkis访问，需要设置上面两个-e，http://127.0.0.1:8080直接访问不需要加]\-eTZ="Asia/Shanghai"[timezone]127.0.0.1换成你的ip地址运行后，访问http://127.0.0.1:8080/jenkins。返回控制台输入dockerlogscontainerid中间的一串代码就是密码*******************************************************************************************************************************************************************************************************需要Jenkins初始设置。已创建管理员用户并生成密码。请使用以下密码继续安装：546b79bd427544699725962978dc4339这也可以在以下位置找到：/var/jenkins_home/secrets/initialAdminPassword*********************************************************************************************************************************************************************************************************************************************************************************************************很简单，创建一个账号密码，保存下一步就ok了。进入jenkins，先安装一些要用到的插件，选择optionalplugins，然后在右边的搜索框里搜索。依次安装代码仓库，看GiteeGithub后面的WebHooks示例，这里以国内的Gitee为例。安装完成后重启jenkins，安装页面会有重启的提示。如果没有，您可以点击地址栏稍后添加重启。配置工具设置全局工具。NodeJS选择你想要的版本。转到容器并设置SSH。当然你也可以设置全局工具配置。dockerexec-itcontainerid/bin/bash下一步是输入几个A命令ssh-keygen-ted25519-C"xxxxx@xxxxx.com"cat~/.ssh/id_ed25519.pub#ssh-ed25519AAAAB3NzaC1yc2EAAAADAQABAAABAQC6eNtGpNGwstc。...'#'为公钥，如果不是则添加到SSH管理中，参考：https://gitee.com/help/articl...创建任务构建测试仓库gitclone到本地,然后创建jenkinsfile文件，注意大小写。内容如下pipeline{agentanystages{stage('Build'){steps{sh'echo"Building...!"'}}stage('Test'){steps{sh'echo"Testing...!"'}}}}然后去jenkins创建任务去GiteeWebhook，勾选下拉生成密码，然后去Gitee设置WebHooks，填写上面的网址和密码，点击确定。回到上一步jenkins任务设置，填写git地址，上面我们设置了SSH，所以Credentials这里可以选择'None'，如果没有设置SSH但是设置了全局工具，可以直接选择key你创造了。最后注意你的jenkinsfile的大小写，对应你项目中的文件名。单击保存完成设置。测试将修改后的项目推送到仓库，看看jenkins任务是否正常启动。测试成功后，可以使用文章开头的链接，从仓库中拉取代码。当然，你也可以使用自己的项目进行测试。一般情况下，我的测试和部署会分开执行，不会合并成一个流水线。测试任务通常在推送代码时触发，而部署任务会使用手动设置参数，因为需要考虑发布环境、版本号、推送镜像等。当然，整个过程只是输入一些参数，容器的创建和部署都是自动化的。测试任务与前面的任务创建步骤相同。jenkinsfile文件已经在项目根目录下，这个过程不再重复。接下来，创建一个部署任务添加参数，选择字符参数，可以设置一些字符如版本号、容器名称、发布环境等。这与测试任务相同。选择NodeJS环境，版本号由你的全局工具设置选择。构建选择shell脚本代码如下#进入工作区cd$WORKSPACE#修改镜像源npmconfigsetregistryhttps://registry.npmmirror.com#安装依赖npminstall#测试npmruntest#打包npmrunbuild#docker是由Dockerfile打包的，VERSION是构建任务时需要输入的版本号dockerbuild-tminio_web_client:$VERSION.#下面的stoprm操作不需要truedockerrmminio_web_client-f||true#启动容器dockerrun-d-p8083:8083--nameminio_web_clientminio_web_client:$VERSION#有些镜像构建过程会生成:垃圾镜像，可以通过这个删除这种没有依赖的镜像命令。#当有多个任务同时运行时，慎用。如果这个task比Others早结束，会导致其他容器的依赖被删除，导致报错。dockerrmi$(dockerimages-f"dangling=true"-q)||true构建后的操作，比如成功或失败后给你发邮件类我就不介绍了，需要的话自己想想吧。将构建的镜像推送到dockerHub或Harbor并在有空时更新它..？设置完成后点击保存。回到项目文件，然后在根目录下创建Dockerfile，代码如下FROMnode:16.13.0-stretch-slim#create/app/app/distfolderRUNmkdir-p/app/dist#切换到app文件夹WORKDIR/app#下面两个ADD操作将服务器静态server和打包好的工程文件复制到对应文件夹ADD。/server/appADD./build/app/dist#创建package.json等文件RUNnpminit-y#设置镜像源RUNnpmconfigsetregistryhttps://registry.npmmirror.com#安装依赖RUNnpminstallkoa@2.13.4koa-static@5.0.0#静态服务器端口号EXPOSE8083#执行命令CMD["node","index.js"]在根目录下创建server文件夹，新建index.js文件搭建一个简单的静态服务，代码如下：使用dockerfile搭建静态服务器constKoa=require('koa')constkoaStatic=require('koa-static')constapp=newKoa()conststatic=koaStatic('./dist')app.use(static)app.listen(8083)回到jenkins，点击构建任务输入版本号开始构建，等待任务运行。.如果构建成功，在终端输入：dockerimages，会发现多了一个minio_web_client的镜像继续输入：dockerps，发现镜像已经启动运行了。这个时候去浏览器地址访问：http://127.0.0.1（替换地址）：8083应该可以访问部署好的项目了。Docker不需要逆向安装NginxProxy，本文到此结束，感谢阅读！首先在服务器的/usr文件夹下创建Nginx目录和需要的配置如果没有配置文件，运行容器的时候很有可能跑不起来。创建一个目录（以linux为例）mkdir/usr/nginx/html-pmkdir/usr/nginx/conf/conf.d-pmkdir/usr/nginx/logs-p上面创建的目录就是docker要挂载的目录以后你本地的.dockerpullnginx:1.20dockerrun-p80:80nginx:1.20dockercpcontainerid:/etc/nginx/conf.d/default.conf/usr/nginx/conf/conf.ddockercpcontainerid:/etc/nginx/nginx.conf/usr/nginx/nginx.confdockerstopcontaineriddockerrmcontainerid配置文件可以先运行一个临时的nginx容器得到，用完记得删除。选择Nginx版本自行安装。拿到配置文件后，启动容器dockerrun-d\-p80:80\--namenginx\--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\-eTZ=Asia/Shanghai\nginx:1.20-d[容器后台运行]\-p[端口]\-v[挂载目录后nginx.conf配置文件映射到本地，修改nginx配置很方便。]\--name[容器名称]\--restartalways[docker重启后，容器会自动重启。]\-eTZ=Asia/Shanghai[TimeZone]容器运行后，进入创建的挂载目录，找到conf.d下的default.conf。当然你也可以创建一个conf，这个目录下的所有conf文件都会加载到里面。修改配置文件：#127.0.0.1换成你自己的upstreamjenkins地址{服务器127.0.0.1:8080;}上游minio_web_client{服务器127.0.0.1:8083;}服务器{听80;服务器名称127.0.0.1；#允许标题中的特殊字符ignore_invalid_headersoff;#允许上传任何大小的文件。#设置为1000m等值；将文件大小限制为特定值client_max_body_size0；#禁用缓冲proxy_bufferingoff;位置^~/jenkins/{proxy_passhttp://jenkins;proxy_http_version1.1;proxy_set_header主机$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_size0；#这是最大上传尺寸client_max_body_size10m;client_body_buffer_size128k;proxy_connect_timeout90；代理发送超时90；proxy_read_timeo90;proxy_buffering关闭；}location^~/minioclient/{proxy_passhttp://minio_web_client/;}#将服务器错误页面重定向到静态页面/50x.htmlerror_page500502503504/50x.html;location=/50x.html{root/usr/share/nginx/html;}}配置完成后可以重启Nginx容器：dockerrestartcontainerid或者输入容器重启Nginx：dockerexec-itcontainerid/bin/bashcd/etc/nginxnginx-tnginx-sreload浏览器输入一个没有地址的地址端口：jenkinshttp://127.0.0.1（地址替换）/jenkinswebhttp://127.0.0.1（地址替换）/minioclient看看能不能正常访问。这里主要是反向代理，让jenkins和无需端口即可访问网络。感谢阅读，如有错误或疑问，请评论告诉我，我会及时修改，谢谢！