使用docker，jenkins自动化部署前端和nodejs项目

环境准备

CentOS 7(64位)
Docker安装

yum -y install docker-ce
systemctl start docker
systemctl enable docker

Jenkins安装

1、搜索拉取jenkins镜像
docker search jenkins
docker pull jenkins/jenkins
首先需要新建文件夹，用来挂载docker目录
mkdir -pv /var/jenkins_home
修改目录权限
 chown -R 1000 /var/jenkins_home
2、运行镜像
docker run --name jenkins -p 8088:8080 -p 50000:50000 \
--restart=always -u root \
-v /var/run/docker.sock:/var/run/docker.sock  \
-v $(which docker):/bin/docker \
-v /usr/lib64/libltdl.so.7:/usr/lib/x86_64-linux-gnu/libltdl.so.7 \
-v /var/lib/docker/tmp:/var/lib/docker/tmp \
-v /var/jenkins_home:/var/jenkins_home \
-d jenkins/jenkins

参数说明：
  --restart=always #Docker重启后该容器也为随之重启
  -u root          
#以root的身份去运行镜像(避免在容器中调用Docker命令没有权限)
#最好使用docker用户去运行
-v $(which docker):/bin/docker
#将宿主机的docker命令挂载到容器中
#可以使用which docker命令查看具体位置
-v /var/run/docker.sock:/var/run/docker.sock
#容器中的进程可以通过它与Docker守护进程进行通信
-v /usr/lib64/libltdl.so.7:/usr/lib/x86_64-linux-gnu/libltdl.so.7
#libltdl.so.7是Docker命令执行所依赖的函数库
#容器中library的默认目录是 /usr/lib/x86_64-linux-gnu/
#把宿主机的libltdl.so.7 函数库挂载到该目录即可
#可以通过whereis libltdl.so.7命令查看具体位置
#centos7位置/usr/lib64/libltdl.so.7
#ubuntu位置/usr/lib/x86_64-linux-gnu/libltdl.so.7

配置Jenkins

打开浏览器访问：http://[你的ip地址]:[你的Docker容器映射的端口号]
等待jenkins初始化加载完成
在下面路径在获取初始化密码

/var/jenkins_home/secrets/initialAdminPassword

插件可以选择推荐安装，也可以不安装，进入dashboard页面去安装

jenkins

在下图的可选插件中去搜索安装，安装好的可以在已安装中查看
目前jenkins版本为Jenkins 2.272

插件安装

对于前端来讲，主要安装的插件就是nodejs、git，ssh等具体按需安装

nodejs

ssh

安装完插件之后要去配置一下，需要什么就配置什么，按需配置

配置

环境准备好了，开始进行部署，

首先要有一个git仓库，可以是github，gitee，gitea，gitlab等中的一个
准备好之后，我们来自动部署一个前端项目例如vue项目和一个后端项目例如nodejs项目，可以将两者放在一起，也可以单独作为一个仓库
现在我们新建两个仓库：

安装好express和vue脚手架

  > npm install -g @vue/cli
  > npm install -g express
 
1、使用express初始化一个项目
   express node-demo
2、使用vue脚手架初始化一个项目
   vue create vue-demo

将项目存放在我们本地的gitea中如图：

git仓库

打开jenkins软件，新建一个任务
设置好git地址，选择构建写入启动的shell命令

vue-demo

构建环境

构建

# 执行的shell
CONTAINER_ID=$(docker ps -a -q -f name=vue-demo)
IMAGE_ID=$(docker images | grep "vue-demo" | awk '{print $3}')
echo $CONTAINER_ID
echo "停止vue-demo"
npm config set registry https://registry.npm.taobao.org
npm install
npm run build
if [ -n "$CONTAINER_ID" ]; then
  docker stop $CONTAINER_ID
  echo "删除vue-demo容器"
  docker rm $CONTAINER_ID
fi
if [ -n "$IMAGE_ID" ]; then
  echo "删除vue-demo镜像"
  docker rmi $IMAGE_ID
fi
echo "开始vue-demo镜像打包"
docker build -t vue-demo .
echo "运行vue-demo镜像在8008"
docker run --name vue-demo -p 8008:80 -d vue-demo


# Dockerfile文件

FROM nginx
COPY ./dist /usr/share/nginx/html
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

jenkins保存配置文件后，点击构建

立即构建

可查看构建日志

日志

日志

成功后访问，能访问到代表前端构建成功了

页面

现在进行nodejs项目的构建
同样
1、先新建一个任务，进行配置，选择如下

node-demo

2、添加git仓库

node-demo

3、添加构建shell

node-demo

4、点击保存进行

node-demo

5、点击立即构建

node-demo

构建成功后访问：ip:8010端口，能正常访问代表部署成功了

image.png

node-demo中的shell

# 先停止容器，再删除容器，再删除镜像
CONTAINER_ID=$(docker ps -a -q -f name=node-demo)
IMAGE_ID=$(docker images | grep "node-demo" | awk '{print $3}')
if [ -n "$CONTAINER_ID" ]; then
  docker stop $CONTAINER_ID
  echo "删除vue-demo容器"
  docker rm $CONTAINER_ID
fi
if [ -n "$IMAGE_ID" ]; then
  echo "删除vue-demo镜像"
  docker rmi $IMAGE_ID
fi
# 根据dockefile构建镜像
docker build -t node-demo .
# 启动镜像，容器端口是3000
docker run --name node-demo -itd -p 8010:3000 node-demo
# 访问8010端口
echo "服务运行在8010端口上"

dockerfile

FROM node:10-alpine

COPY . /app

WORKDIR /app
RUN rm -rf node_modules

RUN npm config set registry https://registry.npm.taobao.org

# install pm2
RUN npm install pm2 -g

# install logrotate
RUN pm2 install pm2-logrotate

RUN npm install

EXPOSE 3000
# RUN sed -i 's/dl-cdn.alpinelinux.org/mirror.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
# ENV TZ=Asia/Taipei
# RUN apk --no-cache add tzdata zeromq \
#     && ln -snf /usr/share/zoneinfo/$TZ /etc/localtime \
#     && echo '$TZ' > /etc/timezone

CMD [ "npm", "run", "prd"]

补充：

如果需要git提交代码就进行构建，只需要在构建触发器中配置token，勾上触发远程构建，然后在管理web钩子中添加，当提交的时候就会触发构建

构建

gitea webhook

以上就是关于docker，jenkins自动部署nodejs项目和前端项目的全部内容。