Jenkins+GitLab+Docker搭建前端自动化构建镜像容器部署

news2024/9/22 13:31:44

前言

🚀 需提前安装环境及知识点：
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 镜像名称:版本

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

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

相关文章

6-《网络面试》

6-《网络面试》

6-《网络面试》 1.http是什么？http的工作机制？http报文？1.1 http工作机制：1.2 URL和http报文 2. HTTP请求方法和状态码3.Get和Post的区别4.HTTP的Header解析1.text/html2.x-www-form-urlencoded3.multipart/form-data4.applicatio…
阅读更多...
中断相关概念并利用中断实现按键点亮LED灯

中断相关概念并利用中断实现按键点亮LED灯

一.中断相关概念 什么是中断？ 中断是指计算机运行过程中，出现某些意外情况需主机干预时，机器能自动停止正在运行的 程序并转入处理新情况的程序，处理完毕后又返回原被暂停的程序继续运行。 什么是EXTI？ 外部…
阅读更多...
【vue上传文件——hash】

【vue上传文件——hash】

vue上传文件 要求：只能上传视频，先计算文件的hash值，hash值一样则不需要上传，不一样在执行上传 分析：因为el-upload没有找到合适的属性，本次用的是原生的input的type属性为file上传 代码： html： 通过点击选取文件按钮调用input上传 js 第一步：点击上传文件先效验是否…
阅读更多...
windows下免U盘安装manjaro

windows下免U盘安装manjaro

建议 建议先看这个https://www.bilibili.com/read/cv23161386/ 背景 新到了一块硬盘，想把这台主机做成双系统的，windowsmanjaro系统。 为什么选择manjaro？ win中的虚拟机已经有了日常使用的ubuntu。体验一下manjaro。ubuntu用来开发办公要…
阅读更多...
python 之 logging的使用

python 之 logging的使用

一、日志模块 import logginglogging.debug("调试日志") logging.info(消息日志) logging.warning("告警日志") logging.error(错误日志) logging.critical(严重错误日志)debug（调试）级别用于输出调试信息，这些信息主…
阅读更多...
JDK源码阅读环境搭建

JDK源码阅读环境搭建

本次针对jdk8u版本的搭建 1.新建项目 新建java项目JavaSourceLearn ，这里我创建的是maven 2.获取JDK源码 打开Project Structure 找到本地JDK安装位置将src.zip解压到项目java包中 整理下项目结构，删除用不到的目录 提示: 添加源码到项目之后首次运行…
阅读更多...
【BBQ: A Hand-Built Bias Benchmark for Question Answering 论文精读】

【BBQ: A Hand-Built Bias Benchmark for Question Answering 论文精读】

BBQ: A Hand-Built Bias Benchmark for Question Answering 论文精读 InformationAbstract1 Introduction2 Related Work3 The Dataset3.1 Coverage3.2 Template Construction3.3 Vocabulary4 Validation5 Evaluation6 Results7 Discussion8 Conclusion9 Ethical Consideration…
阅读更多...
keepalived+nginx搭建高可用kubeadm1.25

keepalived+nginx搭建高可用kubeadm1.25

实验环境 系统都是centos 7 IP地址主机名称192.168.0.1k8s-master01192.168.0.2k8s-master02192.168.0.3k8s-master03192.168.0.230k8s-vip192.168.0.4k8s-node01192.168.0.5k8s-node02 所有节点修改主机名称 cat <<EOF >> /etc/hosts 192.168.0.1 k8s-master0…
阅读更多...
python 容器

python 容器

容器 Python中&#xff0c;可包含其他对象的对象&#xff0c;称之为“容器”。容器是一种数据结构。 常用的容器主要划分为两种&#xff1a;序列&#xff08;如&#xff1a;列表、元祖等&#xff09;和映射&#xff08;如&#xff1a;字典&#xff09;。序列中&#xff0c;每个…
阅读更多...
国考省考行测：百分点和百分数，相对量和绝对量的比较

国考省考行测：百分点和百分数，相对量和绝对量的比较

国考省考行测&#xff1a;百分点和百分数 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能&#xff0c;附带行测和申论&#xff0c;而常规国考省考最重要的还是申论和行测&#xff0c;所以大家认真准备吧&#xff0c;我讲一起屡屡申论和行测的重要知识…
阅读更多...
MyBatis扩展

MyBatis扩展

目录 单元测试 spring boot的单元测试 spring boot的单元测试的使用 1.在要测试的类里,右键点击生成 2.点击test 3.配置测试的信息,点击ok 4.在生成的测试类里,加注解,写测试代码 5.运行单元测试 6.查看测试结果 追加测试方法 断言 MyBatis 单表传参查询 MyBatis获取…
阅读更多...
YOLO V3 SPP ultralytics 第二节：根据yolo的数据集，生成准备文件和yolo的配置文件

YOLO V3 SPP ultralytics 第二节：根据yolo的数据集，生成准备文件和yolo的配置文件

目录 1. 介绍 2. 完整代码 3. 代码讲解 3.1 生成 my_train_data.txt和my_val_data.txt 3.2 生成 my_data.data 文件 3.3 生成 my_yolov3.cfg 3.4 关于my_data_label.names文件 1. 介绍 根据 第一节 的操作&#xff0c;已经生成了下图中圆圈中的部分&#xff0c;而本…
阅读更多...
又一个2W+的答题抽奖活动，复盘复盘总结总结

又一个2W+的答题抽奖活动，复盘复盘总结总结

又一个2W的答题抽奖活动&#xff0c;复盘复盘总结总结 前段时间太忙了&#xff0c;现在才有时间对一些活动进行复盘总结&#xff0c;这里先对其中一个答题抽奖活动进行复盘总结一下。遇到的一些问题、分析以及其解决方案。 答题抽奖 参与者每答对一道题既可获得相对应的分数&…
阅读更多...
什么是 Schnorr 签名？

什么是 Schnorr 签名？

在密码学中&#xff0c;Schnorr 签名是由 Schnorr 签名算法生成的数字签名。 与大多数区块链不同&#xff0c;BTC自其早期以来基本保持不变&#xff0c;大多数升级都是有限的&#xff0c;并旨在增强网络的效率而不是功能。BTC协议的更新是非常罕见的&#xff0c;并且通常用于技…
阅读更多...
华为云赋能云：聚焦产数融合，深化数字赋能

华为云赋能云：聚焦产数融合，深化数字赋能

编辑&#xff1a;阿冒 设计&#xff1a;沐由 假如你是一家制造企业的老板&#xff0c;一定会觉得近期的日子不太好过&#xff1a;国家统计局最新公布的数据显示&#xff0c;4月份制造业采购经理指数&#xff08;PMI&#xff09;为49.2%&#xff0c;较上月下降了2.7个百分点。 市…
阅读更多...
I/O控制方式

I/O控制方式

目录 一、程序查询方式 1.程序查询流程 2.程序查询接口结构 3.案例习题 四、优缺点 二、程序中断方式 1.中断的概念 2.流程图 3.案例习题 三、DMA方式 1.DMA传送过程 2.DMA与主存交换数据的三种方式 3. 与中断程序处理的区别 4.案例习题 一、程序查询方式 1.程序…
阅读更多...
C++中pair用法

C++中pair用法

博主简介&#xff1a;Hello大家好呀&#xff0c;我是陈童学&#xff0c;一个与你一样正在慢慢前行的人。 博主主页&#xff1a;陈童学哦 所属专栏&#xff1a;CSTL 前言&#xff1a;Hello各位小伙伴们好&#xff01;欢迎来到本专栏CSTL的学习&#xff0c;本专栏旨在帮助大家了解…
阅读更多...
使用FFMPEG进行音频重采样

使用FFMPEG进行音频重采样

准备 1. ffmpeg 4.4 2. sdl2 3.一段原始的音频PCM数据 重采样流程 1.设置输入音频参数和输出音频参数 2.根据设置的参数初始化SwrContent上下文 3.创建一个输入buffer, 根据输入的音频参数&#xff08;采样率&#xff0c;通道数&#xff0c;样本位深度&#xff09;申请空间…
阅读更多...
机器学习项目实战-能源利用率 Part-3（特征工程与特征筛选）

机器学习项目实战-能源利用率 Part-3（特征工程与特征筛选）

博主前期相关的博客可见下&#xff1a; 机器学习项目实战-能源利用率 Part-1&#xff08;数据清洗&#xff09; 机器学习项目实战-能源利用率 Part-2&#xff08;探索性数据分析&#xff09; 这部分进行的特征工程与特征筛选。 三 特征工程与特征筛选 一般情况下我们分两步走…
阅读更多...
李彦宏一句“车水马龙”，中国AI的一幕天地宽广

李彦宏一句“车水马龙”，中国AI的一幕天地宽广

“什么叫生成式&#xff1f;比如说&#xff0c;给我画一幅车水马龙的图片。这种东西&#xff0c;过去人们不觉得是人工智能应该做的事&#xff0c;现在可以做了。”5月18日&#xff0c;百度CEO李彦宏在天津举办的第七届世界智能大会上演讲时&#xff0c;说了这么一句话。 不了解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023