Jenkins部署GitHub上的前端项目

简介: Jenkins部署GitHub上的前端项目

请先阅读前两篇

Docker安装Jenkins并配置GitHub

Jenkins+GitHub报错hudson.plugins.git.GitException: Failed to fetch from GitHub 443

前提-Jenkins配置node环境

1.配置node插件

系统配置-插件管理-可选插件,搜索nodejs,直接安装

image.png

2. 配置node版本image.png

General

可以直接全部选择不填,但是建议勾选丢弃旧的构建

这里丢弃旧的构建是指 丢弃之前的构建记录。

如下图,这是Jenkins的构建记录,可以选择保留的天数以及保留的条数。

image.png

image.png

源码管理

image.png

这里为了解决GitHub使用https,经常报443的问题,使用ssh方式,进行代码的管理。

点击 添加按钮,添加私钥,具体请查看另一篇文章。

如果你不希望使用ssh,那么请直接选择

image.png

用户名密码凭证

image.png

直接选择GitHub hook trigger for GITScm polling

image.png

构建环境

image.png

构建

选择执行shell,这里请安装cnpm,构建速度快,且容易报错。

echo $PATH
node -v
npm -v
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
npm run build
# 如果部署到服务器的话,建议打包
cd dist
tar -zcvf dist.tar.gz *

image.png

构建后步骤,发布到远程服务器

这里我们时使用docker安装的Jenkins, 如果你部署的服务器就是jenkins服务器,那可以直接通过宿主机-容器共享卷的方式部署。因为比较简单,这里简单的说一下:

  1. 找到jenkins构建后的目录
  2. 做一个共享卷的操作,是的构建结束之后,宿主机直接拥有打包后的文件,所以最好的方式可以把宿主机的目录设置为nginx的web目录

但是,会存在发布到远程服务器的情况,下面着重介绍一下:

1、安装Publish Over SSH插件

首页 -> 点击系统管理 -> 管理插件 ->可选插件 -> 过滤:ssh -> 选择Publish Over SSH插件,点击直接安装

image.png

2、配置SSH

系统管理 -> 系统设置 -> 下拉,找到Publish over SSH

image.png

下面有一个test configuration 按钮,点击测试,sussess表示连接成功。

image.png

  1. 构建后步骤

image.png

1. cd  /home/share/blog/www
2. tar -zxvf dist.tar.gz
3. rm -f  dist.tar.gz

image.png

远程服务器配置的nginx进行访问

1、下载镜像

docker pull nginx

2、启动nginx容器

docker run -d -p 9999:80 --name nginx  nginx
# 这里将容器的80端口映射到9999端口,访问ip:9999 即可
# -d 后台运行

image.png

3、找到容器中nginx的位置image.png

3、在宿主机和nginx容器之间建立数据卷

nginx.conf 配置文件

logs 日志文件

www 源代码部署文件

!!! 如果直接执行下面的命令的话,可能会报错,Are you trying to mount a directory onto a file or vice-versa,因为不能挂载文件,只能挂载文件夹,所以先在容器中复制一份配置文件。

第一步已经启动了一个nginx,所以可以直接拷贝

mkdir -p /home/share/blog/conf  /home/share/blog/logs
拷贝配置文件到工作目录
docker cp -a nginx:/etc/nginx/nginx.conf /home/share/blog/conf

宿主机(自己决定)

容器(容器启动后自动生成的)

/home/share/blog/www /usr/share/nginx/html

/home/share/blog/conf/nginx.conf

/etc/nginx/nginx.conf
/home/share/blog/logs /var/log/nginx
首先停止之前的容器并删除
1. docker stop nginx
2. docker rm nginx
重新启动容器并挂载工作目录
docker run -d --restart always -p 9999:80 -v /home/share/blog/www:/usr/share/nginx/html -v  /home/share/blog/conf/nginx.conf:/etc/nginx/nginx.conf -v  /home/share/blog/logs:/var/log/nginx --name nginx nginx
// --restart always                                 
// 表示docker重启时会自动重启该容器

访问-成功

image.png


相关文章
|
28天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
30 0
|
13天前
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
使用VitePress创建个人网站并部署到GitHub
|
13天前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
22天前
|
JavaScript 前端开发 Java
SpringBoot + Vue 前端后分离项目精进版本
这篇文章详细介绍了一个基于SpringBoot + Vue的前后端分离项目的搭建过程,包括前端Vue项目的初始化、依赖安装、页面创建和路由配置,以及后端SpringBoot项目的依赖添加、配置文件修改、代码实现和跨域问题的解决,最后展示了项目运行效果。
SpringBoot + Vue 前端后分离项目精进版本
|
27天前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
84 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
17天前
|
前端开发 应用服务中间件 nginx
前端服务器部署方式
【8月更文挑战第25天】前端服务器部署方式
23 1
|
28天前
|
负载均衡 前端开发 应用服务中间件
使用Nginx配置SSL以及部署前端项目
本文介绍了如何使用Nginx配置SSL证书以启用HTTPS,并展示了如何通过Nginx部署前端项目,包括配置SSL证书、设置代理和负载均衡的示例。
62 2
|
28天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!
26 0
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
|
11天前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
28 0
|
12天前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
32 0