Jenkins+GitLab+Docker搭建前端自动化构建镜像容器部署(无本地证书，映射版本)

news2024/11/24 22:49:58

前言

🚀 需提前安装环境及知识点：
1、Docker搭建及基础操作
2、DockerFile文件描述
3、Jenkins搭建及基础点

🚀 目的：
将我们的前端项目打包成一个镜像容器并自动发布部署，可供随时pull访问

一、手动部署镜像及容器

1、在当前项目的根目录创建Dockerfile文件并写入如下代码：

# 第一阶段：构建前端产出物
FROM node:14.19.0 AS builder

WORKDIR /visualization
COPY . .
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install && npm run build


# 第二阶段：生成最终容器映像
FROM nginx

COPY docker/certbook.key /etc/nginx/cert/certbook.key
COPY docker/certbook_bundle.pem /etc/nginx/cert/certbook_bundle.pem
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY docker/docker-entrypoint.sh /docker-entrypoint.sh


WORKDIR /home/visualization
COPY --from=builder /visualization/dist .

RUN chmod +x /docker-entrypoint.sh

代码片段详细描述：
注意：如果项目不需要https访问，则可忽略certbook.key、certbook_bundle.pem的操作
/visualization为工作区名称，可更换

片段描述
FROM node:14.19.0 AS builder选择使用 Node.js 14.19.0 作为基础镜像，并命名该步骤为 “builder”
WORKDIR /visualization. COPY . .将工作目录设置为 “/visualization”，并将当前目录（代码仓库根目录）中的所有文件和目录复制到 “/visualization” 目录中
1、RUN npm install -g cnpm --registry=https://registry.npm.taobao.org. 2、RUN cnpm install && npm run build安装 cnpm 包管理器并使用其安装项目依赖项，接着在执行 npm run build 命令进行构建操作，构建后的前端产出物保存至 “/visualization/dist” 目录中
FROM nginx选择使用 Nginx 作为基础镜像，并命名该步骤为默认名称 “builder”
1、COPY docker/certbook.key /etc/nginx/cert/certbook.key。 2、COPY docker/certbook_bundle.pem /etc/nginx/cert/certbook_bundle.pem 3、COPY docker/nginx.conf /etc/nginx/conf.d/default.conf 4、COPY docker/docker-entrypoint.sh /docker-entrypoint.sh将docker文件夹下的 Nginx 配置文件和证书密钥文件都复制到对应的位置中
1、WORKDIR /home/visualization 2、COPY --from=builder /visualization/dist .将工作目录设置为 “/home/visualization”，并将来自 “builder” 阶段的前端产出物复制到当前目录中。
RUN chmod +x /docker-entrypoint.sh对 “/docker-entrypoint.sh” 执行 chmod +x 命令，添加可执行权限。

2、项目根目录新建.dockerignore文件，忽略文件

# Dependency directory  
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git  
node_modules  
.DS_Store  
dist  
  
# node-waf configuration  
.lock-wscript  
  
# Compiled binary addons (http://nodejs.org/api/addons.html)  
build/Release  
.dockerignore  
Dockerfile  
*docker-compose*  
  
# Logs  
logs  
*.log  
  
# Runtime data  
.idea  
.vscode  
*.suo  
*.ntvs*  
*.njsproj  
*.sln  
*.sw*  
pids  
*.pid  
*.seed  
.git  
.hg  
.svn

3、当前项目根目录下创建docker文件夹

1、新建nginx.conf文件，用于配置前端项目访问nginx配置文件
2、新建docker-entrypoint.sh文件，执行脚本动态修改nginx.conf中的代理请求地址
3、如果项目需要https，则把证书xxx.key、xxx.pem放入docker文件夹中，需要与上面DockerFile中COPY的证书名称保持一致

nginx.conf内容
~根据项目情况做出修改，gzip配置前端无则可删除
~ /dev是前端代理跨域的基准地址，要保持统一，代理到后端的地址，做代理的目的是后面可以根据容器run动态改变proxy_pass地址
~如果项目无https则可删除443监听

server {
    listen 80;
    listen [::]:80;
    server_name  localhost;
    
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    #
    
    location / {
        root   /home/visualization;
        index  index.html index.htm;
    }
     
    location /dev {
        # 前端/dev请求代理到后端https://xxx.xxx/
        proxy_pass https://xxx.xxx/;
        
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout   1;
        proxy_buffering off;
        chunked_transfer_encoding off;
        proxy_cache off;
        proxy_send_timeout      30m;
        proxy_read_timeout      30m;
        client_max_body_size    500m;

        access_log /var/log/nginx/dev_access.log;
        error_log /var/log/nginx/dev_error.log;
    }
}

server {
    listen 443 ssl;
    listen [::]:443;
    # 配置域名访问项目
    server_name  xx.xx.xx.com;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    #
    
    # ssl证书配置开始
    ssl_certificate   /etc/nginx/cert/certbook_bundle.pem;
    ssl_certificate_key  /etc/nginx/cert/certbook.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    # ssl证书配置结束 

    location / {
        root   /home/visualization;
        index  index.html index.htm;
    }

    location /dev {
        # 前端/dev请求代理到后端https://xxx.xxx/
        proxy_pass https://xxx.xxx/;
        
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout   1;
        proxy_buffering off;
        chunked_transfer_encoding off;
        proxy_cache off;
        proxy_send_timeout      30m;
        proxy_read_timeout      30m;
        client_max_body_size    500m;

        access_log /var/log/nginx/dev_access.log;
        error_log /var/log/nginx/dev_error.log;
    }
}

docker-entrypoint.sh内容
文件目的：动态改变nginx配置文件的代理地址，具体到改某一行
1、https://xxx.xxx/为后端接口地址，默认地址
2、sed -i ‘21c ‘“$apiUrl”’’ /etc/nginx/conf.d/default.conf
例如：将nginx.conf配置文件中的21行替换成某个值

#!/usr/bin/env bash

API_BASE_PATH=$API_BASE_PATH;
if [ -z "$API_BASE_PATH" ]; then
    API_BASE_PATH="https://xxx.xxx/";
fi

apiUrl="proxy_pass  $API_BASE_PATH;"
sed -i '21c '"$apiUrl"'' /etc/nginx/conf.d/default.conf
sed -i '73c '"$apiUrl"'' /etc/nginx/conf.d/default.conf

nginx -g "daemon off;"

整体文件目录如下：

在这里插入图片描述

4、打包镜像、运行容器

如果本地没有Docker环境，以下操作则在服务器执行：
1、将项目上传至云服务器，并建立项目文件夹（项目的dist以及node_modules文件夹不需要上传）
2、在远程服务器端cd到项目根目录中
3、构建 Docker 镜像

// hello是指的镜像名称
// 1.0.0是镜像的版本
docker build . -t hello:1.0.0

4、运行容器

//方式一：
// contanier_hello为容器名称
// -p 9090:80  将容器里面的80端口映射到宿主机的8080端口，80端口就是nginx里面配置，多个端口多个配置，必须确保服务器已经开了此端口
docker run -d --name contanier_hello -p 8080:80 hello:1.0.0

//方式二：
// 运行容器的时候改变nginx代理地址
// -e API_BASE_PATH就是上面sh文件中定义的变量 把nginx的后端接口地址改为http://www.baidu.com
docker run -d --name contanier_hello -p 8080:80 -e "API_BASE_PATH=http://www.baidu.com" hello:1.0.0

5、这样我们就已经可以运行访问啦

在这里插入图片描述

6、[扩展] 发布本地镜像到私服镜像库
*** 前提需要去搭建阿里云或者腾讯云的registry
1、输入网址https://cr.console.aliyun.com/cn-hangzhou/repositories
2、注册账号
3、创建命名空间
4、创建镜像仓库
5、选择刚创建的命名空间，输入仓库信息

在这里插入图片描述

docker login --username=xxxxx registry.cn-hangzhou.aliyuncs.com
docker push 镜像名称:版本

二、通过Jenkins自动构建

此步骤是基于第一步中的(1、2、3)，再进行如下操作
前提：服务器已经搭建好了Jenkins
特别注意：在运行Jenkins容器的时候一定要把宿主机的Docker进行映射，因为会在Jenkins容器里面使用dokcer命令，不然会找不到，怎么查看自己有没有进行映射？进入jenkins容器里面输入docker -v看是否有版本信息，如果没有则需要删除容器重新run，例如：

docker run -d -uroot -p 10000:8080 -p 50000:50000 --name jenkins \
-v /home/jenkins_home:/var/jenkins_home \
-v /home:/home \
-v /etc/localtime:/etc/localtime \
-v /var/run/docker.sock:/var/run/docker.sock \
-v /usr/bin/docker:/usr/bin/docker \
jenkins/jenkins:lts

-v /var/run/docker.sock:/var/run/docker.sock
-v /usr/bin/docker:/usr/bin/docker
以上2句就是把Dcoker映射进容器里面

1、创建Jenkins任务

在这里插入图片描述
2、配置General
在这里插入图片描述
3、配置Shell变量
在这里插入图片描述
4、配置git源码（项目地址的git）
在这里插入图片描述
5、配置构建环境
在这里插入图片描述
6、配置Shell执行脚本

#!/bin/bash  
docker -v

CONTAINER=${container_name}  
PORT=${port}  

# 检查同名容器是否存在并删除
if docker ps -a --filter "name=$CONTAINER" --format '{{.ID}}' | xargs docker inspect --format='{{json .State.Running}}' | grep -qEe true; then
  docker stop $CONTAINER && docker rm -f $CONTAINER
fi

# 删除之前构建的镜像
docker images | grep "${image_name}" | awk '{print $3}' | xargs docker rmi -f

# 构建镜像并添加标签
docker build --no-cache -t ${image_name}:${tag} .

# 移除「依赖 none 镜像」
if docker images --filter 'dangling=true' -q --no-trunc; then
  docker rmi $(docker images --filter 'dangling=true' -q --no-trunc)
fi

# run docker image  
docker run -d --name $CONTAINER -p $PORT:80 -p 9091:443 --restart always  ${image_name}:${tag}

echo '================开始推送镜像================'
# 具体登录到哪个私服，看你们创建是哪个平台阿里云、腾讯云等
docker login --username=账号 --password=密码 registry.cn-hangzhou.aliyuncs.com
docker push ${image_name}:${tag} 
echo '================结束推送镜像================'

7、注意：在运行容器时，端口一定不要与其他容器映射出来的端口一样，会被占用

如上面的-p 9091:443是将容器的443端口映射到宿主机的9091，那么宿主机中的容器一定不能有9091端口，唯一的，再映射端口时也要注意服务器要开通此端口

8、以上都配置完成之后便可以点击构建啦，会自动执行拉取代码、项目打包、构建镜像、运行容器、发布镜像

9、别人若想使用你的镜像，则可以拉取运行：

docker pull 远程镜像名称:[镜像版本号]

运行容器：
//方式一：
// contanier_hello为容器名称
// -p 9090:80  将容器里面的80端口映射到宿主机的8080端口，80端口就是nginx里面配置，多个端口多个配置，必须确保服务器已经开了此端口
docker run -d --name contanier_hello -p 8080:80 hello:1.0.0

//方式二：
// 运行容器的时候改变nginx代理地址，后端想使用前端代码本地运行请求自己的本地ip时可以采用这种方式
// -e API_BASE_PATH就是上面sh文件中定义的变量 把nginx的后端接口地址改为http://www.baidu.com
docker run -d --name contanier_hello -p 8080:80 -e "API_BASE_PATH=http://www.baidu.com" hello:1.0.0

🚀 🚀 🚀 🚀 ----- 大功告成----- 🚀 🚀 🚀 🚀

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/564805.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Linux】线程分离 | 线程库 | C++调用线程 | 线程局部存储

【Linux】线程分离 | 线程库 | C++调用线程 | 线程局部存储

文章目录 1. 线程分离1. 为什么要线程分离？2. 具体使用3. 为什么有时候分离在调用join 会正常运行？ 2. 如何理解线程库？如何理解 先描述 在组织？ 3. C中使用多线程4. 线程局部存储局部变量全局变量 1. 线程分离 1. 为什么要线程分…
阅读更多...
服务器虚拟化部署

服务器虚拟化部署

服务器虚拟化部署 1、背景2、目的3、环境4、部署4.1、部署VMware ESXi4.1.1、准备工作4.1.2、部署ESXi4.1.3、配置ESXi4.1.4 、部署虚拟机 1、背景 项目上利旧9台服务器，项目需要使用15台服务器，外购已经没有项目硬件采购预算，只能从目前的…
阅读更多...
自定义HikariCP连接池

自定义HikariCP连接池

文章目录 一、简介1、概述2、地址 二、配置参数1、Hikari原生参数2、Springboot中参数 三、springboot中使用四、自定义数据源1、各模块2、完整代码3、多数据源 五、多数据源dynamic中使用1、简介2、引入依赖3、参数配置 六、XMind整理 一、简介 1、概述 官方解释&#xff1a…
阅读更多...
zabbix 自动发现与自动注册、部署 zabbix 代理服务器及部署 Zabbix 高可用集群

zabbix 自动发现与自动注册、部署 zabbix 代理服务器及部署 Zabbix 高可用集群

目录 一、zabbix 自动发现二、zabbix 自动注册（对于 agent2 是主动模式）三、部署 zabbix 代理服务器四、部署 Zabbix 高可用集群五、Zabbix 监控 Windows 系统六、Zabbix 监控 java 应用七、Zabbix 监控 SNMP 一、zabbix 自动发现 zabbix 自动发现&…
阅读更多...
Nautilus Chain开启全球行，普及Layer3概念加速其采用

Nautilus Chain开启全球行，普及Layer3概念加速其采用

在去年，在 2022 年，Vitalik 进一步提出了 Layer3 的概念与早期形态，期盼弥补目前链体系存在的不足，并为 Layer3 提出了三大目标，即Layer2 用于扩展，Layer3 用于定制功能，如隐私；Laye…
阅读更多...
【C++】哈希表特性总结及unordered_map和unordered_set的模拟实现

【C++】哈希表特性总结及unordered_map和unordered_set的模拟实现

✍作者：阿润菜菜 📖专栏：C 文章目录 前言一、哈希表的特性 - 哈希函数和哈希冲突1 哈希函数2. 哈希冲突 二、闭散列的实现 -- 开放地址法1. 定义数据结构2.insert()3.Find()4. Erase()5.仿函数处理key值不能取模无法映射 --- BKDRHash 三、开…
阅读更多...
【Linux系列P4】Linux需要什么？编辑器？软件包？一文帮你了解掌握 [yum][vim]———基础开发工具篇

【Linux系列P4】Linux需要什么？编辑器？软件包？一文帮你了解掌握 [yum][vim]———基础开发工具篇

前言 大家好，这里是YY的Linux系列part4；本章主要内容面向接触过Linux的老铁，主要内容含【学习yum工具，进行软件安装】【拓展yum源安装】【掌握vim编辑器使用，基本命令】【命令集】【懒人配置文件安装教程】 在下一章节…
阅读更多...
Java高并发编程—可见性与有序性原理

Java高并发编程—可见性与有序性原理

原子性、可见性和有序性是并发编程所面临的三大问题。 Java通过CAS操作已解决了并发编程中的原子性问题，本章为大家介绍Java如何解决剩余的另外两个问题——可见性和有序性。 CPU物理缓存结构 由于CPU的运算速度比主存（物理内存）的存取速度…
阅读更多...
Android系统原理性问题分析 - 多路并发情况下的C/S模型

Android系统原理性问题分析 - 多路并发情况下的C/S模型

声明 在Android系统中经常会遇到一些系统原理性的问题，在此专栏中集中来讨论下。Android系统中很多地方都采用了I/O多路复用的机制，为了引出I/O多路复用机制，先来分析多路并发情况下的C/S模型。此篇参考一些博客和书籍，代码基于A…
阅读更多...
C++条件变量condition_variable

C++条件变量condition_variable

一、问题 假设没有条件变量，对于一个生产者消费者问题，消费线程在得知队列中没有产品时，将阻塞自己。生产者线程可以给队列中放入产品，但是没有办法激活消费者线程，而消费者线程处于阻塞状态也没有办法自己激活自己。…
阅读更多...
RocketMQ 领域模型概述

RocketMQ 领域模型概述

本文为您介绍 Apache RocketMQ 的领域模型。 Apache RocketMQ 是一款典型的分布式架构下的中间件产品，使用异步通信方式和发布订阅的消息传输模型。通信方式和传输模型的具体说明，请参见下文通信方式介绍和消息传输模型介绍。 Apache RocketMQ 产品具备…
阅读更多...
IOS开发指南之自定义TableViewCell使用

IOS开发指南之自定义TableViewCell使用

演示效果: 1.自定义TableViewCell创建 File->new->File... 在iOS模板中选择Empty来创建一个空的XIB文件,然后点击下一步 输入XIB文件名Cell,然后点击Create创建 创建XIB文件成功后如下: 同时按钮Shift+command+L弹出库,然后输入 table筛选,选择Table View Cell 拖到下…
阅读更多...
一文通透spring的初始化

一文通透spring的初始化

简述 今天重点分析ApplicationContext初始化时做的事情，我们都只到spring是个IOC和AOP容器，那再我们new一个ApplicationContext，spring内部都做了什么？怎么实现的IOC和AOP？ 比如说下面这段代码 Configuration Compon…
阅读更多...
计组 第二章 数据的表示与运算 2.1 数制与编码 知识点整理

计组 第二章 数据的表示与运算 2.1 数制与编码 知识点整理

2.1 数制与编码 二进制转八进制：3位一组，高位补0 二进制转十六进制：4位一组，高位补0 任意进制转十进制（按权展开法）：数码与权值相乘，再相加 十进制转化为任意进制数（基…
阅读更多...
全面接入：ChatGPT杀进10个商业应用，让AI替你打工

全面接入：ChatGPT杀进10个商业应用，让AI替你打工

ChatGPT狂飙160天，世界已经不是两个月前的样子。 新建了一个网站 https://ai.weoknow.com/ 每天给大家更新可用的国内可用chatGPT资源 ChatGPT API已开放60多天。世界已经不是两个月前的样子了。 微软联合创始人比尔盖茨（BillGates）将GPT称…
阅读更多...
一、预约挂号详情

一、预约挂号详情

文章目录 一、预约挂号详情1、需求分析 2、api接口2.1 添加service接口2.2 添加service接口实现2.2.1 在ScheduleServiceImpl类实现接口2.2.2 在获取科室信息 2.3 添加controller方法 3、前端3.1封装api请求3.2 页面展示 二、预约确认1、api接口1.1 添加service接口1.2 添加con…
阅读更多...
FastRcnn理论合集

FastRcnn理论合集

FastRcnn理论合集 Rcnn 论文原著 Rich feature hierarchies for accurate object detection and semantic segmentation R-CNN可以说是利用深度学习进行目标检测的开山之作。作者Ross Girshick多次在PASCAL VOC的目标检测竞赛中折桂，曾在2010年带领团队获得终身成就…
阅读更多...
【P29】JMeter IF 控制器（If Controller）

【P29】JMeter IF 控制器（If Controller）

文章目录 一、IF 控制器（If Controller）参数说明二、测试计划设计2.1、groovy 写法2.2、javaScript 写法2.3、jexl3 写法 一、IF 控制器（If Controller）参数说明 可以控制其下面的子/后代元素是否执行；如果为 true 则…
阅读更多...
CSDN问答机器人

CSDN问答机器人

文章目录 前言一、背景二、总体流程三、构建知识库四、粗排五、精排六、Prompt总结相关博客 前言 先看结果: 已经连续很多周获得了第二名(万年老二), 上周终于拿了一回第一, 希望继续保持. 😁 这是今天的榜单, 采纳的数量相对较少, 之前基本上维持在100 重点说明…
阅读更多...
数字韧性助力金融科技行稳致远 同创永益亮相2023双态IT武汉樱花论坛

数字韧性助力金融科技行稳致远 同创永益亮相2023双态IT武汉樱花论坛

2023年4月7日，由ITSS数据中心运营管理组DCMG指导，双态IT论坛主办的以“分布式架构和云原生时代的运维软件进化”为主题的“双态IT武汉樱花论坛”在武汉成功举办，共有来自银行、保险、证券等行业用户及企业代表近百人参会。 云原生时代下&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023