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


相关文章
|
9天前
|
人工智能 JavaScript Docker
Github 2024-11-11 开源项目周报 Top15
本周GitHub热门项目涵盖多领域:Python与TypeScript领跑,包括屏幕截图转代码、本地文件共享、PDF处理、AI开发代理等。亮点项目如screenshot-to-code、LocalSend、OpenHands及Diagrams,兼具创新与实用性,广受开发者关注。
85 13
|
9天前
|
人工智能 JavaScript 前端开发
Github 2024-11-04 开源项目周报 Top14
本周GitHub热门项目涵盖屏幕截图转代码、网页监控、低代码开发等。Python与TypeScript主导,亮点项目包括AI生成代码工具、开源社交应用Bluesky及机器人框架LeRobot,展现AI与自动化技术的快速发展趋势。
68 15
|
9天前
|
人工智能 JavaScript 前端开发
Github 2024-10-28 开源项目周报 Top15
本周GitHub热门项目涵盖Svelte、Open Interpreter、PowerShell等,涉及Web开发、AI助手、自动化工具等领域,Python、JavaScript为主流语言,展现开源技术活跃生态。(239字)
157 19
|
9天前
|
人工智能 算法 JavaScript
Github 2024-10-14 开源项目周报 Top14
本周GitHub热门项目共14个,Python项目占7席。涵盖算法实现、生成式AI、金融分析、目标检测等领域,包括TheAlgorithms系列、OpenBB金融平台、Ultralytics YOLO11、Manim动画框架等,展现开源技术多元发展态势。
42 8
|
9天前
|
人工智能 Rust JavaScript
Github 2024-10-07 开源项目周报 Top15
本周GitHub热门项目共15个,Python项目占比最高达7个。榜首为Python算法实现集合TheAlgorithms/Python,Star数超17万;其他亮点包括Godot游戏引擎、OpenBB金融平台、ToolJet低代码框架及新兴AI相关项目如Crawl4AI、Llama Stack等,涵盖游戏、金融、AI、理财等多个领域。
42 4
|
9天前
|
人工智能 Rust 算法
Github 2024-09-30 开源项目周报 Top15
本周GitHub热门项目揭晓:Python主导,AutoGPT居首,涵盖AI、编程、数学动画等领域,助力开发者探索前沿技术。
59 4
|
9天前
|
人工智能 JavaScript 前端开发
Github 2024-09-16 开源项目周报 Top14
本周GitHub热门项目涵盖Python、TypeScript、Go等语言,React居首。亮点包括微软PowerToys、Node版本管理器、AI证件照工具HivisionIDPhotos及端侧大模型MiniCPM等。
37 2
|
9天前
|
Rust JavaScript 安全
Github 2024-09-02 开源项目周报 Top13
本周GitHub热门项目涵盖AI、开发工具与开源替代品。包括Notion替代AppFlowy、Airtable替代NocoDB、云平台Coolify及可观察性平台OpenObserve等,涉及Python、TypeScript、Rust等语言,聚焦效率、隐私与自动化。
41 1
存储 jenkins 持续交付
182 2
|
18天前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
61 13

推荐镜像

更多