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

这篇具有很好参考价值的文章主要介绍了Gitlab CI/CD 自动化打包部署前端(vue)项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、虚拟机安装
1.vmware下载
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
2.镜像下载
3.Ubuntu
4.新建虚拟机
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
一直点下一步,直到点击完成。
5.分配镜像
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
二、Gitlab CI/CD 自动化部署项目
1.配置GitLab CI/CD:

		A.在你的Vue.js项目中,创建一个名为`.gitlab-ci.yml`的文件,放在项目根目录下。

		B.在该文件中定义CI/CD的阶段、作业和脚本。
stages:
  - build
  - deploy

build:
  stage: build
  image: node:14  # 使用Node.js 14.x版本镜像
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  script:
    - '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/deploy
  only:
    - master

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: deploy
  script:
    - '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/deploy
  only:
    - master

5.提交和推送更改:

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

三、给虚拟机配置ssh服务端
1.虚拟机的网络适配器选择 桥接模式
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd

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

sudo apt update
sudo apt install openssh-server

3.本地生成SSH密钥对

ssh-keygen

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

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

ssh-copy-id user@server_ip

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

5.本地测试SSH连接:

ssh user@server_ip

Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
6.设置CI/CD变量–值为私钥
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,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

Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
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

Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
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和流水线
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
Gitlab CI/CD 自动化打包部署前端(vue)项目,前端,gitlab,ci/cd
五、配置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;
    }
}

六、视频可参考文章来源地址https://www.toymoban.com/news/detail-839231.html

到了这里,关于Gitlab CI/CD 自动化打包部署前端(vue)项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • DevOps:自动化部署和持续集成/持续交付(CI/CD)

    在现代软件开发领域,DevOps(Development和Operations的组合)已经成为一个不可或缺的概念。它代表了一种将软件开发和运维(Operations)紧密结合的方法,旨在提高软件交付速度、质量和可靠性。本文将深入探讨DevOps中的关键概念,特别是自动化部署和持续集成/持续交付(CI/C

    2024年02月07日
    浏览(67)
  • 通过 Github workflows CI/CD 自动化部署 Github Pages hugo 免费博客

    文章博客地址:https://blog.taoluyuan.com/posts/github-workflows/ GitHub Actions 介绍 GitHub 文档:https://docs.github.com/zh/actions/learn-github-actions/understanding-github-actions 官方介绍: GitHub Actions 是一种持续集成和持续交付 (CI/CD) 平台,可用于自动执行生成、测试和部署管道。 您可以创建工作流程来

    2024年02月07日
    浏览(57)
  • 《DevOps企业级CI/CD实战》:一站式掌握DevOps核心方法论,实现高效自动化部署

    DevOps是一组实践,由人、工具和文化理念组成。DevOps的核心是实现软件开发团队和IT运维团队之间的流程自动化。自2018年起,笔者参与了大型企业中多个项目的DevOps项目实施和改进,从中积累了丰富的实践经验。于是将实践思考与开发经验整理成一本书分享给同路人共同学习

    2024年04月14日
    浏览(72)
  • Jenkins+Maven+Gitlab+Tomcat 自动化构建打包,部署

    1、安装服务 Jenkins工具、环境、插件配置 全局变量配置 Manage JenkinstoolsJDK 安装 安装插件 Deploy to container 安装此插件,才能将打好的包部署到tomcat上     配置国内mvn源 创建maven项目 1  2   3    4    5    6    7    8     9 10  

    2024年02月05日
    浏览(58)
  • 微服务 & 云原生:基于 Gogs + Drone 实现 CI/CD 自动化

    以一个简单的前后端项目来说,分别编写前后端的 Dockerfile 文件并构建镜像,然后编写 docker-compose.yml 构建部署,启动运行。每次代码变更后都需重新手动打包、构建、推送。 一个简单的例子: 前端: 项目名:kubemanagement-web 技术栈:Vue 后端: 项目名:kubemanagement 技术栈:

    2024年02月13日
    浏览(46)
  • Jenkins+GitLab+Docker搭建前端自动化构建镜像容器部署

    前言 🚀 需提前安装环境及知识点: 1、Docker搭建及基础操作 2、DockerFile文件描述 3、Jenkins搭建及基础点 🚀 目的: 将我们的前端项目打包成一个镜像容器并自动发布部署,可供随时pull访问 1、在当前项目的根目录创建Dockerfile文件并写入如下代码: 代码片段详细描述: 注意

    2024年02月05日
    浏览(74)
  • 在 CI/CD流水线中运行自动化单元测试的4个原因

    目录 什么是单元测试? C#中的单元测试示例 我需要在CI/CD 流水线中运行自动化测试吗? 开发人员代码验证反馈循环 预验证 步步为营 减少“另一个开发人员写了这段代码”的问题 单元测试 什么是单元测试? 单元测试是一小段代码,用于测试应用程序编写的代码的逻辑。单

    2024年02月16日
    浏览(103)
  • 基于Docker构建CI/CD工具链(七)使用Jmeter进行自动化压测

    上一篇文章中,我们详细介绍了构建 Apifox Cli 的 Docker 镜像的步骤,并通过简单的示例演示了如何利用 GitLab 的 CI/CD 功能,将构建好的镜像利用在自动化测试作业中。在今天的文章中,我们将重点讨论如何构建 JMeter 的 Docker 镜像,并演示如何在 GitLab 的 CI/CD 作业中利用该镜像

    2024年04月16日
    浏览(56)
  • 前端项目打包和自动化部署(jenkins+gitee+nginx)

    1. 传统的开发模式 在传统的开发模式中,开发的整个过程是按部就班就行: 但是这种模式存在很大的弊端: 工作的不协调:开发人员在开发阶段,测试和运维人员其实是处于等待的状态。等到测试阶段,开发人员等待测试反馈bug,也会处于等待状态。 线上bug的隐患:项目准

    2024年02月01日
    浏览(47)
  • Jenkins+GitLab+Docker搭建前端自动化构建镜像容器部署(无本地证书,映射证书)

    前言 🚀 需提前安装环境及知识点: 1、Docker搭建及基础操作 2、DockerFile文件描述 3、Jenkins搭建及基础点 🚀 目的: 将我们的前端项目打包成一个镜像容器并自动发布部署,可供随时pull访问 1、在当前项目的根目录创建Dockerfile文件并写入如下代码: 代码片段详细描述: 注意

    2024年02月15日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包