docker打包前端镜像总结

mhfe123 commented 3 years ago

背景

因为项目需要，现在需要前端单独打包构建上线，因为本身产品是一个k8s管理平台，有自研的一套CI/CD系统，所以为了配合自己的产品使用，总结有以下几个需求点：

准备一个基础的镜像作为构建前端的环境，需要包含node包，一些基础的node_modules包，防止重新下载浪费时间
编写代码构建的脚本
构建完成以后以nginx为基础打包成一个镜像放到容器中

制作镜像

环境准备

首先准备一个可以使用docker的Linux系统环境，自己接触Linux系统比较少，所以这里费了一点功夫，稍微总结一下吧，初步想法是在一台虚机上通过git的方式把基础配置文件拉过来，然后通过docker打包成一个基础镜像。

遇到的问题：

直接yum install git的版本太低，不能拉取代码，需要升级git版本，解决方案

git问题搞定以后就是安装docker

#查看你当前的内核版本
uname -r

#安装 Docker
yum -y install docker

#查看Docker版本
docker version

#启动 Docker 后台服务
service docker start

制作镜像

环境问题搞定以后就开始正式制作镜像了

首先是在本地配置好package.json，package-lock.json文件，里边包含我们需要的基础包的信息，譬如：react,vue,webpack等

编写Dockerfile文件

# FROM设置基础镜像，我们这里以node为基础镜像，版本为12.X
FROM node:12
# ADD是将当前文件夹下的那些文件添加到镜像中，我们这里是把当前的package.json，package-lock.json，Dockerfile添加到/app/的目录下
ADD . /app/
# WORKDIR是设置工作目录，我们把文件都加到/app下，所以配置工作目录为/app，后边指令就不需要再加/app了
WORKDIR /app
# RUN是要执行的脚本命令，因为我们要根据package.json把我们需要的基础包装到镜像里，所以需要运行下install
RUN npm install

以上是我们配置基础镜像的Dockerfile，当然还有一些其他的指令：

# EXPOSE是对外暴露的端口
EXPOSE 90
# CMD是要执行的cmd指令
CMD ["node", "./index.js"]
# COPY是复制文件到什么位置
COPY dist /usr/share/nginx/html
# 更多的关于dockerfile的指令可以从网上看教程

基础文件配置好以后，把代码提交到git，在通过git clone把我们的基础文件下载到我们的虚拟机中，当然有其他的更好方式也可以

打包在当前文件下运行docker build,等待打包完成以后运行docker images就可以看到我们当前打包的镜像了可以通过docker run -it [name] bash的指令来查看当前镜像打包的内容

tips: 当我第二次打包的时候遇到一个问题，就是再执行docker build的时候会报错，不晓得第一次咋成功的，尴尬，错误内容如下：这时候自然就要Google一下，然后发现是最后缺少了一个.导致的-.- 最后再补充几个指令：
```
# 使用当前目录的 Dockerfile 创建镜像，标签为 runoob/ubuntu:v1。
docker build -t runoob/ubuntu:v1 . 
# 使用URL github.com/creack/docker-firefox 的 Dockerfile 创建镜像。
docker build github.com/creack/docker-firefox
# 通过 -f Dockerfile 文件的位置
docker build -f /path/to/a/Dockerfile .
```
推送镜像

当然现在这个镜像是还不能用的，这个只能作为我们自研的CI/CD构建环境的基础镜像，现在我们已经打包好了镜像，需要把它推到自己的镜像仓库去

# 标记本地镜像，将其归入某一仓库。docker tag webimage www.xx.com/xx/webimage:v1
docker tag [OPTIONS] IMAGE[:TAG] [REGISTRYHOST/][USERNAME/]NAME[:TAG]
# 推送镜像到仓库 docker push webimage www.xx.com/xx/webimage:v1
docker push [OPTIONS] NAME[:TAG]

CI/CD配置

现在我们基础的构建环境有了，下一步是构建代码的脚本，因为我们的CI/CD有配置拉取代码的地方，所以脚本是不包含拉取代码的过程的，只有构建的过程

# 首先进入到代码所在目录
cd /data/build
echo "---------------------------- /build/public npm install--------------------"
# 从基础镜像中将我们已经下载好的包复制到目录下
cp -r  /app/node_modules ./node_modules
# 整理一下复制之后的包目录
npm ddp
# 设置npm的地址为私有库
npm config set register http://192.168.206.231:4873
# 删除.npmrc文件防止影响
rm -rf .npmrc
npm install --unsafe-perm
echo "-------------------------build--------------------------------"
npm run build
echo "----------------------------build done-------------------"
rm -rf /data/build/public/node_modules
rm -rf /data/build/.git
rm -rf /data/build/public/src
rm -rf /data/build/public/server
rm -rf /data/build/public/build
chmod -R  777  /data/build
cd /data/build

完成我们代码的构建以后也需要通过docker将我们的项目打包成一个镜像可以用来独立部署，这里采用了nginx来提供服务能力

编写Dockerfile文件:

FROM nginx
ADD dist /usr/share/nginx/html
# 端口可以不设置，使用nginx默认的
EXPOSE 80

以上脚本与镜像的构建是通过我们CI/CD系统自动执行的，所以省去了人工的过程，如果是自己去制作镜像的话还要重复之前制作基础镜像的过程来打包成一个可用的镜像。

暂时先记录这么多，后续有问题再补充。

Luin-Li commented 2 years ago

mark! 推送镜像 那里的一条命令写错了？应该是docker push www.xx.com/xx/webimage:v1

Luin-Li commented 2 years ago

在有一个基础镜像的前提下，拉合适的node包然后解压到本地,再设置环境变量:

FROM www.xx.com/xx/webimage:v1
ADD node-v12.13.0-linux-x64 /usr/local/lib/node-v12.13.0-linux-x64
ENV NODE_HOME=/usr/local/lib/node-v12.13.0-linux-x64
ENV PATH=$PATH:$NODE_HOME/bin
ENV NODE_PATH=$NODE_HOME/lib/node_modules

kd-cloud-web / Blog