前端配置CICD自动化发布docker构建镜像

一、前言

保持线上项目稳定运行是很重要的，为了达到服务可用性在99.9%，也为了减少开发人员在项目部署时耗费大量精力，可以尝试自动化发布

自动化部署涉及到的配置比较多，每个环节需要掌握的知识也不同，所以分开写

该过程中用到的技术栈webpack docker nginx shell

二、实践环境

• mac
• node > 10.11.1
• docker > 20.0.0

三、提前准备的内容

• 通过create-react-app构建的一个前端项，这里起名项目myweb
• 本地安装docker

四、构建docker镜像

首先通过镜像打包前端部署包，在项目根目录下，新建Dockerfile文件

1、Dockerfile

FROM node:10-alpine as builder

WORKDIR /data/myweb

COPY . .

RUN npm install --registry=https://registry.npm.taobao.org --no-package-lock --no-save

RUN yarn build



FROM nginx:alpine as myweb

RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && echo "Asia/Shanghai" > /etc/timezone 

WORKDIR /data/myweb

COPY ./nginx /etc/nginx/conf.d

COPY  --from=builder /data/myweb/build /data/myweb

EXPOSE 80,443

2、配置文件说明：

该Dockerfile干了两件事，

第一是将前端项目打包到node镜像中，这里起名builder

第二是拉取nginx镜像，将文件的nginx配置镜像覆盖，将builder镜像中打包的文件复制到nginx镜像的/data/myweb文件中，执行docker build -t myweb .

此时我们执行打包命令,得到的两个镜像，一个打包后的node镜像，一个nginx镜像，我们只需要nginx镜像来拉起服务

3、执行命令

// 1、docker通过Dockerfile构建镜像
`docker build -t dockerName:1.0.0 .`

// 2、查看当前存在镜像
docker images

// 3、删除docker镜像
docker rmi dockerImageId

// 4、删除docker容器
docker rm dockerContainerId

// 5、启动一个docker容器
docker run -d -p 8000:80 --name frontend [dockerImageName]

// 6、查看运行中的容器
docker ps

4、运行中的服务

我们可以看到当前运行中的容器

在浏览器访问http://localhost:8000即可看到当前通过docker部署的服务

五、nginx配置文件

和我们正常部署是一样的，用来转发静态资源 在根目录下新建nginx文件夹，/nginx/default.conf

server {
    listen 80;
    server_name localhost;

    location / {
        root /data/myweb;
        index index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

这样我们完成了第一步，通过docker部署我们的服务。

如果我们直接通过docker部署前端也是可以的。

接着，有了docker部署的基础，

接着继续通过k8s集群的部署