前端html项目（非vue项目）通过jenkins打包成docker镜像，实现自动化部署

前言

记录公司中一次将前端项目打包成docker镜像的经历
先看下效果图：
镜像：
访问如下：

• 本次打包方式分两种：

• 1.将项目代码直接打包到镜像中
• 2.将项目代码挂载出来

一、docker基础

docker默认大家都会，只说几个细节

1. 挂载目录的时候，前面的地址为宿主机也就是本机的路径，后面为容器路径。端口同理
2. 挂载的时候是挂载不了文件的，只能挂载文件夹
3. nginx.conf和default.conf文件是包含的关系。

另外说明：这里建议大家在使用docker命令的时候，每次都自己手动去敲，不要直接去复制。

二、开始打包

我们先创建一个jenkins项目

第一步、jenkins上创建rf-web的项目

第二步、使用参数化构建

这里选用参数化构建，点击复选框【参数化构建过程】

第三步、配置git或者svn地址

填写地址，增加用户名和密码，注意勾选就行。

第四步、点击增加构建步骤上的【执行shell】

打包方式一：映射文件路径的方式

#先校验是否有这个镜像，有则删除，
if  [ ! -n "$(docker ps -a| grep "rf-web")" ] ;then
   	  echo "not images not start"
else   
      docker stop  $(docker ps -a | grep "rf-web" | awk '{print $1}')
      docker rm -v  $(docker ps -a | grep "rf-web" | awk '{print $1}')
fi
echo 'package images'
docker build -t ${project}:${version} .
docker run -d --name=rf-web -p 8083:80 -v /usr/local/rf-web-resource/nginx:/etc/nginx/nginx -v  /root/.jenkins/workspace/rf-admin-web:/usr/share/nginx/html  ${project}:${version}                                                

这里主要说下docker run后面的命令

--name:指定镜像名称
--p端口映射，将容器内的80端口映射到8003，供外部访问。
-v路径映射（这里映射了配置文件和html文件的）
${project}:${version} :这两个是获取参数化构建的时候输入的值

用到的Dockerfile文件
呃呃，就两行

FROM nginx
EXPOSE 80

打包方式二：将文件打包进去

跟上面的区别主要是Dockerfile文件不同

FROM nginx
COPY  ./*.html  /usr/share/nginx/html/
COPY  ./admin  /usr/share/nginx/html/admin
COPY  ./cms  /usr/share/nginx/html/cms
COPY  ./common  /usr/share/nginx/html/common
COPY  ./datamgr  /usr/share/nginx/html/datamgr
COPY  ./duty  /usr/share/nginx/html/duty
COPY  ./erms  /usr/share/nginx/html/erms

EXPOSE 80

对比

方式一：
优点：打包后镜像文件比较小，可扩展性较高，每次修改文件则不用去容器里面修改
缺点: 移植性不高
方式二：
优点：移植性较高
缺点: 打包时间长，镜像太大
这里说的移植性，主要是从后期推送到本地镜像仓库，生产环境拉取的时候，或者环境切换的时候；

三、其它相关

1、前端项目如何设计环境切换
第一种、登录的时候添加参数来区分env环境或者是test环境，然后分别找不同的地址，存进缓存中。后面再请求的时候从缓存中找ip,如果缓存清除，则默认推出登录
但是这里的这个地址需要通过nginx代理，方便用户查看

  location  /index/   {
         rewrite (.+)  http://192.168.1.195:8083/admin/login.html?env=test permanent;

       }

第二种、配置文件写两份，提前存好，git上代码下载后，在jenkins上手动配置，将文件拷贝进去覆盖
第三种、利用webpackage打包