前端框架UMI构建nginx镜像和开发环境的前端效果不一样

前言

前端使用UMI框架开发，基于jenkins+gitlab+docker自动化构建出来的nginx镜像，在服务器上的展示的前端页面效果总和前端同事的本地开发环境不一致，但是yarn是没有报错的。

解决方式

之所以jenkins构建出来的前端镜像在服务器上运行的页面效果跟前端同事开发环境不一致，是因为在执行yarn之前，自动化构建的工作区里面的前端文件不是完整的UMI的代码。

为啥？因为对linux的cp命令的细节点的认知不够。

通常拷贝某个目录下的文件到另外一个目录，想到的命令一般是递归复制，cp -R

但是这个命令，会忽略隐藏文件（linux下，以"."号开头的文件就是隐藏文件），最终替换为cp -a解决问题！！！

修改后的jenkins build脚本：其实和你最本地使用Dockerfile构建镜像的唯一区别是，自动化构建通过创建工作目录，把用于Dockerfile构建依赖的文件拷贝进工作目录，再使用Dockerfile构建即可；jenkins的默认工作目录是/var/lib/jenkins/workspace

# 私有镜像仓库地址

docker_registry="172.16.29.91:5000"

# jenkins工作目录

workspace="/var/lib/jenkins/workspace/"

# 来到jenkins工作目录

cd ${workspace}

# 创建临时目录

tempdir=`date +%s%N`

mkdir ${tempdir}


## ---------------- 全局 config 相关 ----------------

# 配置中心目录名称，本质上也是配置中心从gitlab拉取配置信息后的暂存目录

configdir="qa-sample-config"


#---------------- 前端构建(nginx镜像) ----------------


#前端目录名，本质上也就是前端从gitlab拉取代码的暂存目录

frontdir="qa-sample-frontend"


# 配置文件准备

cp -R ${configdir}/* ${tempdir}/ # 拷贝配置中心的配置文件到临时目录


# 前端未build的代码准备

mkdir ${tempdir}/front-code

# 细节点：那个.号的意思是，复制frontdir目录下的文件以及子文件到目标目录，但不包含frontdir本身

#-a 是所有文件夹及目录，包含隐藏文件

#cp -R ${frontdir}/* ${tempdir}/front-code/ #旧版,会忽略掉frontdir下的隐藏文件

cp -a ${frontdir}/. ${tempdir}/front-code/ # 拷贝前端代码到临时目录
#这一步不是多此一举！针对开发维护周期较长的前端项目.git的文件通常很大，把这个文件build进镜像，会让镜像的体积变大
rm -rf ${tempdir}/front-code/.git # 删除前端代码中的.git目录

前端的dockerfile文件：使用多阶段构建，第一阶段主要是使用node基于前端源码构建出用于部署的js,css,html文件；第二阶段是把第一阶段的产出前端文件放到nginx的解析目录下，以及nginx的一些配置工作；多阶段构建的意义是减小最终产出的镜像大小！！！

前端dockerfile：
FROM node:12 as builder

COPY ./front-code/ /tmp/docker-build/frontend/code/

RUN cd /tmp/docker-build/frontend/code \
	&& yarn \
	&& yarn build

FROM nginx:1.14

#配置debian9的apt的源为阿里源
COPY ./docker-dir/nginx/sources.list /etc/apt/sources.list

#主要是安装nodejs，里面包含了npm
RUN apt-get update \
	&& apt-get install curl -y \
	&& apt-get install vim -y \
	&& rm -rf /usr/share/nginx/html/index.html \
	&& rm -rf /usr/share/nginx/html/50x.html \
	&& rm -rf /etc/nginx/conf.d/default.conf

#构建源码(关键：tmp/docker-build/frontend/code/dist/mapt-fe 这个是前端打包完毕的里层代码)
COPY --from=builder /tmp/docker-build/frontend/code/dist/ /usr/share/nginx/html/

RUN  chmod -R 777 /usr/share/nginx/html 

#添加ngixn的配置文件
COPY ./docker-dir/nginx/config/nginx.conf /etc/nginx/nginx.conf

COPY ./docker-dir/nginx/config/conf.d/ /etc/nginx/conf.d