前言

记录公司中一次将前端项目打包成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打包

Logo

前往低代码交流专区

更多推荐