Gitlab CI/CD 自动化打包部署前端(vue)项目

一、虚拟机安装
1.vmware下载
在这里插入图片描述
2.镜像下载
3.Ubuntu
4.新建虚拟机
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
一直点下一步,直到点击完成。
5.分配镜像
在这里插入图片描述
在这里插入图片描述
二、Gitlab CI/CD 自动化部署项目
1.配置GitLab CI/CD:

		A.在你的Vue.js项目中,创建一个名为`.gitlab-ci.yml`的文件,放在项目根目录下。B.在该文件中定义CI/CD的阶段、作业和脚本。
stages:- build- deploybuild:stage: buildimage: node:14  # 使用Node.js 14.x版本镜像script:- npm install- npm run buildartifacts:paths:- dist/deploy:stage: deployscript:- 'which ssh-agent || ( apk add --update openssh )'  # 安装SSH代理(如果没有的话)- eval $(ssh-agent -s)  # 启动SSH代理- echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -  # 添加SSH私钥- ssh -o StrictHostKeyChecking=no user@server 'mkdir -p /path/to/deploy'- scp -r dist/* user@server:/path/to/deployonly:- master #当代码合并到master分支时,该作业才会被执行
#注意:/path/to/deploy这个路径需要给写入文件的权限,否则部署会失败sudo chmod o+w /path/to/deploy

2.生成SSH密钥对:
如果尚未生成,请在本地机器上生成一个SSH密钥对:

ssh-keygen -t rsa -b 4096 -f \~/.ssh/id_rsa_vue_deploy
将公钥(\~/.ssh/id_rsa_vue_deploy.pub)添加到服务器的授权密钥中。

3.将SSH私钥添加到GitLab:

进入GitLab中的项目页面。
转到 "设置" > "CI / CD",展开 "变量" 部分。
添加一个名为 SSH_PRIVATE_KEY 的变量,并将 \~/.ssh/id_rsa_vue_deploy 文件的内容粘贴到值中。

4.更新GitLab CI/CD配置:

更新 .gitlab-ci.yml 文件,引用正确的私钥变量:
deploy:stage: deployscript:- 'which ssh-agent || ( apk add --update openssh )'- eval $(ssh-agent -s)- echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -- ssh -o StrictHostKeyChecking=no -i \~/.ssh/id_rsa_vue_deploy user@server 'mkdir -p /path/to/deploy'- scp -r dist/* -i \~/.ssh/id_rsa_vue_deploy user@server:/path/to/deployonly:- master

5.提交和推送更改:

将更改提交到你的项目并推送到GitLab。
现在,每当你将更改推送到 master 分支时,GitLab CI/CD将自动触发构建和部署阶段,将Vue.js项目部署到指定的服务器上。确保根据你的具体服务器详情和要求调整配置。

三、给虚拟机配置ssh服务端
1.虚拟机的网络适配器选择 桥接模式
在这里插入图片描述

2.在虚拟机上安装SSH服务器

sudo apt update
sudo apt install openssh-server

3.本地生成SSH密钥对

ssh-keygen

在这里插入图片描述

4.本地将公钥(~/.ssh/id_rsa_vue_deploy.pub)添加到服务器的授权密钥中

ssh-copy-id user@server_ip

在这里插入图片描述

5.本地测试SSH连接:

ssh user@server_ip

在这里插入图片描述
6.设置CI/CD变量–值为私钥
在这里插入图片描述
四、GitLab Runner安装与注册
1.添加GitLab官方存储库:

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh | sudo bash

2.安装GitLab Runner

sudo apt update
sudo apt install gitlab-runner

3.注册Runner

sudo gitlab-runner register

4.输入您的GitLab实例URL

 Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )https://gitlab.com

5.输入您获得的令牌以注册Runner

Please enter the gitlab-ci token for this runner:xxx

在这里插入图片描述
6.输入对这个Runner的描述

Please enter the gitlab-ci description for this runner
test

7.输入Runner的tag

Please enter the gitlab-ci tags for this runner (comma separated):
test 

8.输入Runner执行程序

Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:
shell

在这里插入图片描述
9.服务端安装nodejs

//使用NodeSource存储库安装Node.j
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
//安装Node.js
sudo apt update
sudo apt install -y nodejs
//验证安装
node -v
npm -v

10.在gitlab上查看runner和流水线
在这里插入图片描述
在这里插入图片描述
五、配置nginx
1.安装nginx

sudo apt install nginx
//验证安装:在浏览器中输入 http://localhost 或 http://127.0.0.1

2.在/etc/nginx/conf.d目录下,新增nginx配置文件

server {listen       80;# 域名,多个以空格分开server_name  172.18.18.87;location / {root   /path/to/deploy/dist;index  index.html index.htm;}
}

六、视频可参考

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

System Verilog的接口、程序块与断言解析

接口、程序块与断言 1 接口 1.1 使用接口简化连接 // 接口 interface arb_if(input bit clk);logic [1:0] grant,request;logic rst; endinterface// 使用了简单接口的仲裁器 module arb (arb_if arbif);...always(posedge arbif.clk or posedge arbif.rst)beginif(arbif.rs…

【图像分割】使用Otsu 算法及迭代计算最佳全局阈值估计并实现图像分割(代码实现与分析)

本实验要求理解全局阈值分割的概念,并实现文本图像分割。需要大家深入理解Ostu 算法的实现过程及其迭代原理,同时通过学习使用Otsu 算法及其迭代,实践图像分割技术在文本图像处理中的应用。 以下将从实验原理、实验实现、实验结果分析三部分对…

springboot项目读取excel表格内容到数据库,excel表格字段为整数的读取方法

在我昨天的项目中,我需要把excel表格中字段为整数的字段读取到数据库中进行保存,但是在内置方法中并没有读取整数的方法(也有可能是我没发现,太菜了~~),那接下来我就提供给大家一个简单地方法来读取excel表…

力扣977. 有序数组的平方

思路:暴力法:全部平方,然后调用排序API,排序算法最快是N*log(N)时间复制度。 双指针法:要利用好原本的数组本就是有序的数组这个条件, 只是有负数 导致平方后变大了,那么平方后的最大值就是在两…

PTAL1-006 连续因子

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话: 知不足而奋进,望远山而前行&am…

数据可视化-ECharts Html项目实战(2)

在之前的文章中,我们学习了如何创建简单的折线图,条形图,柱形图并实现动态触发,最大最小平均值。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下…

【Windows Defender 排除指定 文件夹、文件夹以提升性能】

使用webStorm时候提醒排出程序和目录提升性能, 于是我就把我的代码目录和常用程序全部排出, 不过不知道能不能提升多少性能, 先加上再说 一.使用UI配置排出项 隐私与安全性安全中心 病毒与威胁防护 添加或删除排出项 配置 二.使用命令配置 使用 PowerShell开启自动排除列表…

Android 开发 地图 polygon 显示信息

问题 Android 开发 地图 polygon 显示信息 详细问题 笔者进行Android项目开发,接入高德地图绘制区域后,需要在指定区域(位置)内显示文本信息,如何实现 实现效果 解决方案 代码 import com.amap.api.maps.model.T…

J.砍树【蓝桥杯】树上差分+LCA

树上差分 多次对树上的一些路径做加法操作,然后询问某个点或某条边经过操作后的值,就要考虑树上差分了。 点差分 模拟这个过程 对x到y路径上的点权值均1,可以等价成对x和y的权值加1,对lca的权值-1,对fa[lca]的权值-…

MySQL-----事务

一 事务简介 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一 个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败。 例如:银行转账 张三 ---(转账1000元)---> 李四 在进行…

亚马逊云科技Glue

Glue 最重要的部分, ETL:用于从 A 点(我们的源数据)提取、转换和加载数据到 B 点(目标文件或数据存储库)。 AWS Glue 会为您执行大量此类工作。 转换通常是更繁重的工作,需要从各种来源进行组合…

linuxOPS基础_linux命令合集

uname查看操作系统信息 命令:uname [参数] 作用:获取计算机操作系统相关信息 参数:-a,选项-a代表all,表示获取全部的系统信息(类型、全部主机名、内核版本、发布时间、开源计划) 用法一&…