jenkins+gitlab+nginx部署前端应用实现

相关依赖安装

docker

由于国内安装太慢,所以可以使用 https://docs.docker.com/desktop/ 进行加速下载。
具体的下载过程就不再阐述。
镜像源:"http://hub-mirror.c.163.com"

docker安装jenkins

# 拉取jenkins镜像
docker pull jenkins/jenkins

# 在后台运行一个 名为 jk,对外端口号为3080,链接数据卷为 ~/docker/jenkins 的服务

docker run -d --name jk -p 3080:8080 -v ~/docker/jenkins:/var/jenkins_home jenkins/jenkins

命令执行完成后,即可启动一个端口号为 3080 的http服务,打开浏览器,

  • 输入 http://localhost:3080/ ,等待初始化完成后(可能会比较漫长),此时需要管理员密码,cat ~/docker/jenkins/secrets/initialAdminPassword 即可获取管理员密码。
  • 再下一步就是安装插件了,建议第一个选项,推荐的插件(这个安装也会比较慢,耐心等待)
  • 创建第一个管理员账户

docker安装gitlab

docker pull gitlab/gitlab-ce

docker run -d --name gitlab -p 443:443 -p 9001:80 -p 222:22 -v ~/docker/gl/config:/etc/gitlab:Z -v ~/docker/gl/logs:/var/logs/gitlab:Z -v ~/docker/gl/data:/var/opt/gitlab:Z gitlab/gitlab-ce
  • 初始化过程需要的时间可能会比较长,运行 docker logs -f gitlab可查看进度。
  • 输入 http://localhost:9001,首次进入会输入密码,待完成后输入用户名密码即可进入(默认的用户名为root)
  • 设置 https 和 ssh 方式克隆项目的地址。
# 配置http协议所使用的访问地址,不加端口号默认为80
external_url 'http://192.168.1.2:9001'

# 配置ssh协议所使用的访问地址和端口
gitlab_rails['gitlab_ssh_host'] = '192.168.1.2'
gitlab_rails['gitlab_shell_ssh_port'] = 222 # 此端口是run时22端口映射的222端口

# nginx 监听80端口,否则默认会使用 external_url 的端口号,导致端口映射不成功
nginx['listen_port'] = 80
:wq #保存配置文件并退出,重启容器

如果 ssh 方式不成功,多半是因为 服务端的 key文件权限不正确。docker exec -it gitlab sh进入容器,查看 /etc/gitlab目录下的 ssh_host_ecdsa_key、ssh_host_ed25519_key、ssh_host_rsa_key 3个文件的用户名和群组是否为 git(chown 修改 所属用户,chgrp修改所属群组),文件权限是否为600(chmod命令可修改).

docker 安装 nginx

docker pull nginx
docker run -d --name nginx -p 80:80 -v ~/nginx/html:/usr/share/nginx/html nginx

小结

  • localhost:3080,访问jenkins(应运行于用于构建的服务器)
  • localhost:9001,访问gitlab(应运行于放置源码的服务器)
  • localhost, 访问nginx(应运行于服务器)

配置

1. 安装 gitlab 相关插件

首页->系统管理->插件管理

然后 切换到 可选插件,搜索gitlab,选中 gitlab plugin(我已经安装了,所以此处没有展示),然后选中左下角的按钮,等待安装完成

2. 首页->系统管理->系统配置

Credentials 那里,添加的时候必须是 GitLabAPI token,

GitLabAPI token 的获取方式如下图,生成的token刷新后就会隐藏,从而保证安全性。

配置填写完成以后,最好点击一下 test connection 按钮,确保配置填写正确。

3. 新建一个 job

4. 输入任务名称,并选择自由风格

5. 配置相关构建选项

1. General 配置
选中之前系统配置里面填写的选项即可,如果不选的话,构建的状态将无法回传到 gitlab

2. 源码管理

URL只能 http 格式的,所以下方的 Credentials 就需要使用username with password,选错的话将无法拉取代码。

下方的配置,表示只在 master 和 以 ci 开头的分支进行构建。具体的规则可点击右方的问号自行了解。

3. 构建触发器
勾选 Build when a change is pushed to GitLab.,右侧有适用于 gitlab 的webhook URL, 下方则是一些触发构建的时机选项(需要和 gitlab 那边的配置互相配合)。

jenkins 插件提供的 webhooj URL 是无法直接使用的,因为 jenkins 是需要登录的,对外提供的API也需要登录,否则就会返回 HTTP 401, 好在这种登录用HTTP基本认证就可以搞定。
点击 用户名 -> 设置 -> API Token -> 添加新Token -> 输入名称 -> 生成,然后复制该 Token,与之前的 webhook URL拼接即可。拼接规则为 <scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>。最终即可得到 http://ma1:11d4aca0aa206fc89d703879749fa7@192.168.1.2:3080/project/gl

此时可以先保存一下。然后去 gitlab 进行配置。

4. gitlab 配置 webhook URL
gitlab默认是不允许使用 本机URL的,所以要么使用公网域名,要么修改gitlab的隐私设置(如下图所示)

随后打开需要部署的项目 -> settings -> webhooks,填入上一步拼接URL,选择对应的事件,点击 Add即可。添加成功以后,可以点击 Test 测试一下 hooks 是否畅通()。

5. 构建环境
前端构建免不了要使用 node,所以这里一定要勾选 Provide Node & npm bin/ folder to PATH(如果没有的话,就去插件中心安装)

6. 构建

去插件中心安装一个名为 Publish Over SSH 的插件,主要是用于将生成的文件发送到远程服务器。

需要在 -> 系统管理 -> 系统配置中,进行该插件的配置。

2.构建tab,增加构建步骤,选择执行shell
gl替换为对应的项目名即可

# 删除之前的文件
rm -rf /tmp/html.tar.gz

# 运行测试
npm run test
# npm构建,打包脚本
npm run bd

# 切换到该工程目录
cd /var/jenkins_home/workspace/gl
# 将目标文件夹打包为 压缩文件
tar -zcvf /tmp/html.tar.gz --exclude .git -C ./dist .
# 一定要把压缩文件放到工程目录下,所以 publish over ssh无法访问
mv /tmp/html.tar.gz ./

构建tab,增加构建步骤,选择Send files or execute commonads over SSH

# 先删除/tmp/html,再新建。防止报错
rm -rf /tmp/html
mkdir /tmp/html

# 将压缩文件解压到 /tmp/html,然后删除压缩文件
tar -xvf ~/html/html.tar.gz -C /tmp/html
rm -rf  ~/html/html.tar.gz

# 将解压出来的文件,复制到 ~/nginx/html(之前docker nginx映射的本地路径)
cd /tmp/html
cp -R /tmp/html/* ~/nginx/html

7. 构建后步骤
点击 增加构建后操作步骤,选择Publish build status to Gitlab,这样jenkins构建完成后,在 gitlab 的 CI/CD 也能看到此次构建的状态。

6. 推送代码,触发构建
推送代码后,如果顺利的话,就会在这里看到构建历史,否则检查配置即可。

7. 浏览网站

推送代码后,只是静态文件部署,所以nginx不需要重启即可看到新内容。

总结

  • 推送代码时,gitlab 通过 webhook URL 通知 jenkins
  • jenkins 收到 POST请求后,触发构建,包括测试打包等,完成后发送文件到远程服务器,并执行相应命令,如解压缩文件、复制到nginx相关目录等。如果是 nodejs 应用,还需要 执行 node脚本
  • 远程服务器需提前安装好 docker 和 nginx 容器,并运行 nginx 服务于后台。
  • 如果需要 nodejs + nginx,可以使用 docker-compose简化命令运行,然后在 publish over ssh的exec command加入对应命令即可。

到此这篇关于jenkins+gitlab+nginx部署前端应用实现的文章就介绍到这了,更多相关jenkins gitlab nginx 部署 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点

    上一篇分享了 Nginx + Tomcat 反向代理 负载均衡 集群 部署指南,感觉还是相当实用型的,但是一般集群部署是基于大访问量的,可能有的企业用不到,类似一些企业官网,访问量并不是很大,基于这个新需求,今天专门为大家分享一下 Nginx + Tomcat 反向代理 如何在一台服务器部署多个站点,节省服务器开支,就在这篇文章了. 首先我们需要安装好Nginx.jdk.Tomcat,安装方法已经在 上一篇 说过了,本篇不再赘述. 下来看一下我们的需求,我这里有三个网站项目工程需要部署(依次对应

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 使用 Nginx 部署静态页面的方法

    Nginx 介绍 Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器, Nginx,它的发音为 " engine X ",是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/ POP3/ SMTP 代理服务器.Nginx 是由俄罗斯人 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了.Igor Sysoev 在建立的项目时,使用基于 BSD 许可. 英文主页:http://nginx.net. Ngi

  • linux上nginx安装部署及使用过程详解

    1.下载 官网下载地址 2.部署 2.1安装前提 在linux下安装需要安装一下组件 1. gcc && g++ yum install gcc-c++ 2. pcre yum install -y pcre pcre-devel 3. zlib yum install -y zlib zlib-devel 4. openssl yum install -y openssl openssl-devel 2.2 安装 1. 解压nginx文件 tar -zxvf nginx-1.17.5.t

  • 部署前后端分离式nginx配置的完整步骤

    前言 老生常谈了,这里谈谈我的理解的前后端分离,简单的分离无非是将原来mvc的view层剥离出来,独立一个成为Servlet服务,Servlet之间依靠http连通.这里的view Servlet容器可以是任意一种服务端服务,Tomcat.Apache.Nginx.IIS,都可以.这里以常用的Nginx为例子做简单的介绍. 需求分析 先来一波需求分析. 单项目 单项目指的是一台服务器部署一个前端服务,使www.xxx.com => index.html的单一指向. 多项目 多项目指的是一台服务器

  • nginx下部署vue项目的方法步骤

    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放的文件夹下 运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了: 然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf 点击进去然后找到一个ngi

  • jenkins+gitlab+nginx部署前端应用实现

    相关依赖安装 docker 由于国内安装太慢,所以可以使用 https://docs.docker.com/desktop/ 进行加速下载. 具体的下载过程就不再阐述. 镜像源:"http://hub-mirror.c.163.com" docker安装jenkins # 拉取jenkins镜像 docker pull jenkins/jenkins # 在后台运行一个 名为 jk,对外端口号为3080,链接数据卷为 -/docker/jenkins 的服务 docker run -d

  • 一篇文章快速掌握Nginx部署前端项目(Nginx安装配置及部署都非常详细!)

    目录 前言: Nginx的三个作用: 负载均衡: 反向代理: 动静分离: Nginx的下载安装(Linux环境下) Nginx的使用 三.部署前端项目 总结 前言: 之前在Linux系统中部署了后端项目,今天继续来给大家分享如何部署前端项目. 涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目 Nginx是一个轻量级的反向代理web服务器,在当今应用地非常广泛,特别是前后端分离的情况下. Nginx的三个作用: 负载均衡: 当我们的单个项目访问量达到了单个tomcat无

  • docker+Nginx部署前端项目的详细过程记录

    目录 相关配置安装 创建配置文件 项目打包与部署 一个相关报错: 总结 相关配置安装 安装Docker yum install docker 启动服务 start docker systemctl start docker Docker中拉取nginx镜像 docker pull nginx 创建配置文件 我们需要在根目录下创建Dockerfile文件和default.conf文件. 其中default.conf文件的名称是什么无所谓,只要在配置文件中注意使用相同名称即可. Dokcerfile

  • jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    目录 前提: 思路: 步骤: 配置nodejs工具 git代码文件目录如下 Dockerfile的文件内容 nginx.conf主配置文件的内容 最近比较闲,尝试了一下docker部署业务测试环境的前端vue项目,作此记录 这里我的环境是Jenkins+docker+harbor+nginx部署,但是由于此项目以节点形式加入jenkins,构建和部署都在一台,所以没有用到harbor,但是生产环境可能部署和构建不在一台,会需要先推送到harbor,也有详细步骤. 前提: 1安装好了jenkins

  • 详解Docker+Jenkins+Gitlab+Django应用部署实践

    一.背景介绍 在互联网应用快速更新迭代的大背景下,传统的人工手动或简单脚本已经不能适应此变化,此时Devops为我们提供了良好的解决方案,应用好CI/CD可以大大的方便我们的日常工作,自动化快速的持续集成/持续交付为我们带来了应用开放的更快速度.更好的稳定性和更强的可靠性. 二.拓扑环境 2.1 架构拓扑 如上图实例,简单花了下流程拓扑: 当研发push本地代码到gitlab-server后,webhook自动触发jenkins构建应用 在docker host上部署应用git clone来自g

  • nginx部署多前端项目的几种方法

    个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置 基于端口配置 基于location配置 在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件 可以看到图中的:include /usr/nginx/modules/*.conf,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件. 所以,平时我们为了方便管理,可以在此目录下面定义自己的

  • docker安装nginx并部署前端项目的全过程

    目录 1.简介 2.操作 3. 总结 1.简介 本文主要介绍如何使用docker安装nginx,以及如何将前端打包好的vue项目部署到nginx上. 2.操作 (1)拉取nginx镜像: docker pull nginx (2)咱们先把docker镜像跑起来: docker run --name myNginx -p 80:80 -v /home/nginx/dist:/usr/share/nginx/html -d nginx ## --name:容器名字 ## -d: 要启动的镜像的名字

  • 如何使用docker部署前端应用的方法步骤

    docker 变得越来越流行,它可以轻便灵活地隔离环境,进行扩容,方便运维管理.对开发者也更方便开发,测试与部署. 最重要的是, 当你面对一个陌生的项目,你可以照着 Dockerfile,甚至不看文档(文档也不一定全,全也不一定对)就可以很快让它在本地跑起来. 现在很强调 devops 的理念,我把 devops 五个大字放在电脑桌面上,格物致知了一天.豁然开朗,devops 的意思就是写一个 Dockerfile 去跑应用(开玩笑. 这里介绍如何使用 Docker 部署前端应用.千里之行,始于

  • vue.js项目nginx部署教程

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 开发环境搭建完成. 二.编译部署 1.项目路径下demo输入命令npm run build 编译完成后会发现在demo文件夹下多出一个dist文件夹这里面就是编译好的文件了. 2.网上下载nginx,下载地址http://nginx.org/en/download.html,解压下载的ngin

随机推荐