一看就会的集成部署！太简单了？那顺便再撸个存储文件服务吧！ (一)

Xiao_Yi_Zhou
1,014 阅读2分钟

前言

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

代码↓:

Github
前端 github.com/guangnaoke/…
Go github.com/guangnaoke/…

Gitee
前端 gitee.com/Xiao_Yi_Zho…
Go gitee.com/Xiao_Yi_Zho…

第二部分链接:一看就会的集成部署！太简单了？那顺便再撸个存储文件服务吧！(二)

配置报错

jest

WX20220415-155606.png

解决方法:

jest.config.js

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

vite

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

WX20220415-190021.png

解决方法:

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 无果.

WX20220417-104527.png

解决方法:

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

印象比较深就这几个, 有新的在来更新. 算是一个错误总结吧. 如果各位有更好的解决方法, 麻烦评论告诉我, 谢谢!

接下来, 活动活动下你的小手, 直接开整!

安装

如果你不用docker来安装下面这些应用, 而是直接安装的话, 你可以直接忽略关于docker的细节, 其他部分安装基本上是一致的.

安装docker到你的服务器(或者虚拟机), 这个网上很多教程.

docker安装Jenkins

docker pull jenkinsci/blueocean

docker 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.

1649836842833.jpg

回到控制台输入

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:

546b79bd427544699725962978dc4339

This may also be found at: /var/jenkins_home/secrets/initialAdminPassword

*************************************************************
*************************************************************
*************************************************************

选推荐就好

WX20220413-160645.png

后面几步的都挺简单的, 创建账号密码, 保存完成下一步就ok.

进到jenkins首先安装一些要用的插件

WX20220413-161555.png

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

WX20220413-210623.png

依次安装

WX20220415-114513.png

WX20220415-114214.png

WX20220413-162019.png

代码仓库看着选

Gitee

WX20220413-162037.png

Github

WX20220413-190510.png

后面的WebHooks例子我就以国内的Gitee为例.

安装好后重启下jenkins, 安装页面有提示重启. 如果没有, 可以地址栏后面加个restart.

WX20220413-223423.png

配置工具

设置下全局工具.

WX20220413-161616.png

NodeJS选择自己要的版本.

WX20220413-211956.png

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

docker exec -it 容器id /bin/bash

接下来就是敲几个命令

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

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

WX20220413-221141.png

如果不会, 参考:gitee.com/help/articl…

创建任务

建个测试用的仓库

1649857585093.jpg

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

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

接着去jenkins创建任务

1649858108548.jpg

到Gitee Webhook这里勾选

WX20220413-162848.png

在拉到下面生成下密码

WX20220413-162511.png

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

WX20220413-212736.png

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

WX20220413-222314.png

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

WX20220413-162617.png

点击保存完成设置.

测试

将改动后的项目push到仓库, 看jenkins任务是否正常启动了.

WX20220413-223052.png

测试成功

WX20220413-223119.png

接下来可以拿文章开头的链接去仓库拉取代码, 当然你可以用你自己的项目进行测试.

一般我会将测试和部署分开执行的, 并不会合拢到一个流水线. 测试任务一般是推送代码的时候触发, 部署任务因为要考虑发布环境、版本号、推送镜像等等, 会采用手动设置参数构建. 当然整个过程也只是输入一些参数, 容器创建部署都是自动的.

测试任务跟前面的创建任务步骤一样, jenkinsfile文件已经在项目的根目录, 就不重复这个过程了.

接下来创建部署任务

WX20220413-164026.png

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

WX20220413-163155.png

这里和测试任务一样.

WX20220413-163241.png

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

WX20220413-163318.png

构建选择shell脚本

WX20220413-230923.png

代码如下

# 进入工作区
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 || true

docker rm minio_web_client -f || true

# 启动容器
docker run -d -p 8083:8083 --name minio_web_client minio_web_client:$VERSION

# 有些镜像构建过程会产生<none>:<none>的垃圾镜像, 可以通过这个命令删除掉没有依赖的这类镜像.
# 有多个任务同时运行时, 慎用. 如果这个任务比其他的早结束, 会造成其他容器的依赖被删除, 导致报错.
docker rmi $(docker images -f "dangling=true" -q) || true

构建后的操作, 比如成功或者失败给你发Email之类的就不介绍了, 有需求的自己琢磨下.

设置完点击保存.

回到项目文件, 然后在根目录创建一个Dockerfile文件, 代码如下

FROM node:16.13.0-stretch-slim

# 创建/app /app/dist 文件夹
RUN mkdir -p /app/dist

# 切换到app文件夹
WORKDIR /app

# 下面两个ADD操作将server静态服务器与打包好的项目文件复制到对应的文件夹
ADD ./server /app

ADD ./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, 点击构建任务

WX20220413-232419.png

输入版本号开始构建

WX20220413-232449.png

等待任务跑完...

如果构建成功的话, 在终端输入: docker images, 会发现多了一个minio_web_client的镜像

WX20220413-235219.png

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

WX20220413-235245.png

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

WX20220413-235810.png

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 {
    listen       80;
    server_name  127.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_header   Host              $host;
      proxy_set_header   X-Real-IP         $remote_addr;
      proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_max_temp_file_size 0;

      #this is the maximum upload size
      client_max_body_size       10m;
      client_body_buffer_size    128k;

      proxy_connect_timeout      90;
      proxy_send_timeout         90;
      proxy_read_timeout         90;
      proxy_buffering            off;
    }
    
    location ^~ /minioclient/ {
      proxy_pass http://minio_web_client/;
    }

    # redirect server error pages to the static page /50x.html
    error_page   500 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可以通过不带端口访问.

感谢阅读, 如果哪里有错误或者疑问麻烦评论告诉我, 我会及时修改的，谢谢!

avatar
文章
阅读
粉丝