1. 本际云推荐 - 专业推荐VPS、服务器,IDC点评首页
  2. 云主机运维
  3. VPS运维

docker构建镜像

您好,这里是本际云服务器推荐网的小编小本本。今天我们将谈论如何通过自动化发布自动化部署来保持线上项目的稳定运行,提高服务可用性,减少开发人员在项目部署时的精力消耗。

docker构建镜像

一、技术栈

自动化发布自动化部署涉及到的配置比较多,每个环节需要掌握的知识也不同,下面介绍该过程中用到的技术栈:

  • Webpack:用于打包前端项目。
  • Docker:用于构建和管理容器化应用程序。
  • Nginx:用于反向代理和负载均衡。
  • Shell:用于管理和自动化Linux上的任务。

二、实践环境

在开始之前,需要准备以下环境:

  • Mac电脑
  • Node.js版本>10.11.1
  • Docker版本>20.0.0

三、提前准备

首先我们需要准备一个前端项目,这里起名为“myweb”,使用create-react-app构建。并且需要在本地安装Docker,以便构建Docker镜像。

四、构建Docker镜像

借助Docker,我们可以将整个项目打包成一个镜像,并且将其部署在一台服务器上。下面是构建Docker镜像的步骤:

  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镜像,并将builder镜像中打包出的文件复制到nginx镜像的/data/myweb路径下,覆盖nginx配置文件,最后暴露80和443端口。
  3. 执行以下命令:
    • 通过Dockerfile构建镜像:docker build -t dockerName:1.0.0 .
    • 查看当前存在的镜像:docker images
    • 删除Docker镜像:docker rmi dockerImageId
    • 删除Docker容器:docker rm dockerContainerId
    • 启动Docker容器:docker run -d -p 8000:80 –name frontend [dockerImageName]
    • 查看运行中的容器:docker ps
  4. 在浏览器中访问http://localhost:8000,即可查看通过Docker部署的服务。

五、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部署前端应用的步骤。如果您需要部署更大规模的应用程序,可以考虑使用Kubernetes。接下来,我们将探讨部署Kubernetes集群的详细步骤。

原创文章,作者:小编小本本,如若转载,请注明出处:https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7406.html