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

·  阅读 2005

一、前言

保持线上项目稳定运行是很重要的,为了达到服务可用性在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、运行中的服务

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

image.png

在浏览器访问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集群的部署

分类:
前端
标签:
分类:
前端
标签: