jenkins + gitlab + docker 完成前端部署

目前前端代码部署方式登陆jenkins系统,点击对应项目可以完成对应前端项目的部署

构建代码过程

构建代码过程(前端项目构建及镜像的生成和推送到docker镜像阿里云私服)

1 配置对应源码管理

        # 构建对应项目的镜像 envType为对应的环境参数 后期需要告知dockerfile 当前的环境
	docker build --build-arg envType=dev -t projectName .
 	# 当前登陆docker镜像阿里云私服
	docker login --username=username --password=password registry-vpc.cn-hangzhou.aliyuncs.com
	# 备份当前tag镜像	
	docker tag 项目名称 registry-vpc.cn-hangzhou.aliyuncs.com/仓库名称/项目名称
   	# 将打包好的镜像推送到阿里云私服
	docker push registry-vpc.cn-hangzhou.aliyuncs.com/仓库名称/项目名称

部署代码过程

部署代码过程(从阿里云私服pull对应环境的镜像及启动)

	# 当前登陆docker镜像阿里云私服
	docker login -u username -p password registry-vpc.cn-hangzhou.aliyuncs.com
	# 停止当前容器
	docker stop projectName
	# 删除对应容器
	docker rm -f projectName
	# 删除对应机器前端项目镜像
	docker rmi registry-vpc.cn-hangzhou.aliyuncs.com/仓库名称/项目名称
	# 拉取对应docker阿里云私服仓库的前端项目镜像
	docker pull registry-vpc.cn-hangzhou.aliyuncs.com/仓库名称/项目名称
	# 启动容器
	docker run -d -p 外部端口:内部端口 --name 容器名称 registry-vpc.cn-hangzhou.aliyuncs.com/hc-ad/adop

构建镜像过程 docker build --build-arg envType=dev -t projectName

	# 基于最新版的NODE容器创建
	FROM node:alpine
	# 定义环境变量
	ARG envType=default_value
	# 获取shell命令传入的环境变量
	ENV envType ${envType}
	# 切换国内docker镜像源
	RUN sed -I ’s/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
	# 将对应的代码copy到容器对应目录
	COPY ./package.json /app/
	WORKDIR /app
	# 执行npm的指向淘宝镜像源
	RUN npm config set registry https://registry.npm.taobao.org
	# 下载生产依赖
	RUN npm install —production
	# 并copy到对应工作目录
	COPY . /app
	# 执行前端代码的构建
	RUN npm run build:${envType}
	# node 启动前端项目
	/# 容器启动时候的执行命令/
	CMD $environment npm run prd
	/# 表明容器对外暴露的端口
	EXPOSE port
`