Jenkins自动化部署前端Vue项目

  • 前言
  • 安装NodeJs
    • 下载NodeJs
    • 安装NodeJs
    • npm配置
  • Jenkins配置NodeJs
    • 安装NodeJs插件
    • 配置NodeJs
    • 新建及配置任务
    • 构建测试
  • 使用docker部署nginx访问项目
    • 创建Nginx容器
    • 修改Jenkins构建配置
  • Jenkins自动触发构建

前言

基于Linux服务器已安装Jenkins条件下，并且会基本配置与基本使用，则可使用Jenkins自动化部署前端Vue项目。

Jenkins安装参考：Jenkins的四种安装部署方式以及Jenkins的基本配置与基本使用

安装NodeJs

在Linux服务器上首先安装NodeJs环境

下载NodeJs

访问中文官网:http://nodejs.cn/download/

Linux服务器使用wget命令下载NodeJs

wget https://cdn.npmmirror.com/binaries/node/v16.15.0/node-v16.15.0-linux-x64.tar.xz

安装NodeJs

将tar.xz解压成tar文件

xz -d node-v16.15.0-linux-x64.tar.xz

将tar文件解压成文件夹

tar -xvf node-v16.15.0-linux-x64.tar

配置环境变量vim /etc/profile，同时修改后执行source /etc/profile命令使配置生效

export PATH=$PATH:/usr/local/node/bin

验证

[root@bp-centos-0 node]# node -v
v16.15.0
[root@bp-centos-0 node]# npm -v
8.5.5

npm配置

设置包路径

mkdir node_global
mkdir node_cachenpm config set prefix '/usr/local/node/node_global'npm  config set cache  '/usr/local/node/node_cache'

修改Npm镜像

npm config set registry https://registry.npm.taobao.org

查看npm配置信息

[root@bp-centos-0 node]# npm config ls
; "user" config from /root/.npmrccache = "/usr/local/node/node_cache"
prefix = "/usr/local/node/node_global"
registry = "https://registry.npm.taobao.org/" ; node bin location = /usr/local/node/bin/node
; cwd = /usr/local/node
; HOME = /root
; Run `npm config ls -l` to show all defaults.

Jenkins配置NodeJs

安装NodeJs插件


配置NodeJs

在系统管理=>全局工具配置配置NodeJs

新建及配置任务

创建任务工程

在源码管理项中，配置远程仓库地址以及凭证配置

在构建环境项中勾选如下项

在构建操作中配置Sehll命令

cd web node -v
npm install rm -rf ./dist/*
npm run build:prod  rm -rf /usr/local/nginx/html/*
cp -rf ./dist/* /usr/local/nginx/html

注意：可能出现目录无权情况导致Jenkins执行失败，如果遇到需要进行目录授权

chmod 777 /usr/local/nginx/html

构建测试

执行立即构建进行测试


执行日志如下：

16:03:50 [dataGenerateTool] $ /bin/sh -xe /tmp/jenkins3511927723852280710.sh
16:03:50 + cd web
16:03:50 + node -v
16:03:50 v16.15.0
16:03:50 + npm install
16:05:11 npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
16:05:11 npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
16:05:11 npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
16:05:13 npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
16:05:18 npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
16:05:18 npm WARN deprecated har-validator@5.1.5: this library is no longer supported
16:05:21 npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
16:05:23 npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
16:05:24 npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
16:05:30 npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
16:05:33 npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
16:05:34 npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
16:05:40 npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
16:05:42 npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
16:05:42 npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
16:05:45 npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
16:05:48 npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
16:05:49 npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
16:05:49 npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
16:05:57 npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
16:06:00 npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
16:06:00 npm WARN deprecated axios@0.18.1: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
16:06:03 npm WARN deprecated svgo@1.2.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
16:06:12 npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
16:06:14
16:06:14 added 1796 packages in 2m
16:06:14 + rm -rf './dist/*'
16:06:14 + npm run build:prod
16:06:15
16:06:15 > vue-admin-template@4.4.0 build:prod
16:06:15 > vue-cli-service build
16:06:15
16:06:16
16:06:16 -  Building for production...
16:06:56  WARNING  Compiled with 2 warnings08:06:55
16:06:56
16:06:56  warning
16:06:56
16:06:56 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
16:06:56 This can impact web performance.
16:06:56 Assets:
16:06:56   static/js/chunk-elementUI.ae962d56.js (654 KiB)
16:06:56   static/js/chunk-libs.78f35a5f.js (370 KiB)
16:06:56
16:06:56  warning
16:06:56
16:06:56 entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
16:06:56 Entrypoints:
16:06:56   app (1.27 MiB)
16:06:56       static/css/chunk-elementUI.68c70ad5.css
16:06:56       static/js/chunk-elementUI.ae962d56.js
16:06:56       static/css/chunk-libs.3dfb7769.css
16:06:56       static/js/chunk-libs.78f35a5f.js
16:06:56       static/css/app.b7cb370e.css
16:06:56       static/js/app.cf17c994.js
16:06:56
16:06:56
16:06:56   File                                      Size             Gzipped
16:06:56
16:06:56   dist/static/js/chunk-elementUI.ae962d5    654.28 KiB       160.36 KiB
16:06:56   6.js
16:06:56   dist/static/js/chunk-libs.78f35a5f.js     370.44 KiB       129.20 KiB
16:06:56   dist/static/js/app.cf17c994.js            37.66 KiB        13.39 KiB
16:06:56   dist/static/js/chunk-ab3ed656.7c7bac0f    3.08 KiB         1.26 KiB
16:06:56   .js
16:06:56   dist/static/js/chunk-2d0b3279.e32b9501    2.82 KiB         1.18 KiB
16:06:56   .js
16:06:56   dist/static/js/chunk-2d0e4b0c.7527bf1c    2.03 KiB         0.82 KiB
16:06:56   .js
16:06:56   dist/static/js/chunk-238c903c.ece32453    1.74 KiB         0.73 KiB
16:06:56   .js
16:06:56   dist/static/js/chunk-a0b6aa88.37b28b96    0.56 KiB         0.36 KiB
16:06:56   .js
16:06:56   dist/static/css/chunk-elementUI.68c70a    227.82 KiB       34.54 KiB
16:06:56   d5.css
16:06:56   dist/static/css/app.b7cb370e.css          9.62 KiB         2.36 KiB
16:06:56   dist/static/css/chunk-238c903c.3c7f5ad    4.64 KiB         0.83 KiB
16:06:56   9.css
16:06:56   dist/static/css/chunk-libs.3dfb7769.cs    3.48 KiB         1.25 KiB
16:06:56   s
16:06:56   dist/static/css/chunk-ab3ed656.94702ff    1.59 KiB         0.62 KiB
16:06:56   7.css
16:06:56   dist/static/css/chunk-a0b6aa88.a3e3da5    0.11 KiB         0.10 KiB
16:06:56   8.css
16:06:56
16:06:56   Images and other types of assets omitted.
16:06:56
16:06:56  DONE  Build complete. The dist directory is ready to be deployed.
16:06:56  INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
16:06:56
16:06:57 + rm -rf /usr/local/nginx/html/favicon.ico /usr/local/nginx/html/index.html /usr/local/nginx/html/static
16:06:57 + cp -rf ./dist/favicon.ico ./dist/index.html ./dist/static /usr/local/nginx/html
16:06:57 Finished: SUCCESS

查看服务器是否生成相应文件：

[root@bp-centos-0 html]# ls
favicon.ico  index.html  static

最后访问Linux服务器IP:端口查看实际效果

使用docker部署nginx访问项目

创建Nginx容器

首先/usr/local/nginx为本Linux服务器的Nginx安装目录，也是Jenkins构建dist文件输出目录

使用docker创建Nginx容器，指定容器名称、映射端口、挂载资源路径、主配置文件、默认配置文件、日志文件等信息

docker run -it -d --name vue-nginx -p 8082:80
-v /usr/local/nginx/html:/usr/share/nginx/html
-v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
-v /usr/local/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf
-v /usr/local/nginx/logs:/var/log/nginx nginx

注意：若服务器未安装Nginx，可先创建Nginx容器，复制其中配置文件作为参考

# 拷贝配置文件
docker run --name nginx-conf -d nginx:latest
#把容器中的nginx.conf文件复制到conf目录下
docker cp nginx-conf:/etc/nginx/nginx.conf  /usr/local/nginx/conf
#把容器中的default.conf文件复制到conf目录下
docker cp nginx-conf:/etc/nginx/conf.d/default.conf  /usr/local/nginx/conf
#删除镜像
docker rm -f nginx-conf

修改Jenkins构建配置

修改Jenkins任务工程中的构建操作中的Sehll命令

cd web node -v
npm install rm -rf ./dist/*
npm run build:prod  rm -rf /usr/local/nginx/html/*
cp -rf ./dist/* /usr/local/nginx/htmldocker rm -f vue-nginxdocker run -it -d --name vue-nginx -p 8082:80 -v /usr/local/nginx/html:/usr/share/nginx/html -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf  -v /usr/local/nginx/logs:/var/log/nginx nginx

Jenkins自动触发构建

Jenkins自动触发构建参考：Jenkins结合Gitee、Github、Gitlab、SVN自动构建部署

Jenkins自动化部署前端Vue项目相关推荐

  1. 服务器上部署前端Vue项目代码

    服务器上部署前端Vue项目代码 本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错

  2. 基于Jenkins自动化部署spring boot项目

    1. 使用Jenkins来实现微服务架构下的自动化部署! 在微服务架构中,随着项目拆分越来越细,导致服务越来越多,服务的打包部署就会成为一个相当麻烦的事情.在我之前工作的公司都是本地打包好,上传到服务 ...

  3. Windows服务器部署前端vue项目

    阿里云Windows服务器部署前端vue项目 准备工作 下载node.js(略)http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/downl ...

  4. nginx 部署前端vue项目dist文件

    nginx 部署前端页面 server {listen 8082; server_name localhost;location / {root /usr/local/dist; #前端页面地址ind ...

  5. Jenkins自动化部署-配置项目（下）

    一.新建项目,设置Git地址,账号密码. 多种方式,ssh方式,需要配置私钥. 第1个错误:Git没安装 Linux机器上,先安装Git软件. CentOs系统,yum install git git ...

  6. Jenkins自动化部署Vue项目

    Jenkins自动化部署Vue项目 jenkins介绍 Jenkins是开源的,使用Java编写的持续集成的工具,在Centos上可以通过yum命令行直接安装.Jenkins只是一个平台,真正运作的都 ...

  7. 前端项目jenkins自动化部署

    项目打包和自动化部署 一. 项目部署和DevOps 1.1. 传统的开发模式 在传统的开发模式中,开发的整个过程是按部就班就行: 但是这种模式存在很大的弊端: 工作的不协调:开发人员在开发阶段,测试和 ...

  8. 利用Jenkins自动化部署springboot项目到阿里云服务器（centos8）

    背景: 最近想部署一个springboot项目到阿里云服务器里面.捣鼓了很久,构建了很多次,都失败了!实在是一脸辛酸,有点气馁~ 在此想记录一下构建的过程. 不了解Jenkins之前,觉得Jenkin ...

  9. Jenkins自动化部署入门

    一.简介 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins自动化部署实现原理 ...

最新文章

  1. 迭代和瀑布的最大的差别就在于风险的暴露时间上
  2. java servlet 获取路径问题_Java，JSP，Servlet获取当前工程路径（绝对路径）问题解析...
  3. vc 6.0 显示文件全路径_Linux常用命令大全（非常全！！！）
  4. Linux 下mysql5.7安装搬运 该安装说明坑最少
  5. 微服务网关-Gateway-LoadBalancerClient实现负载均衡讲解
  6. 数据结构杂谈（五）——栈
  7. 从源码分析RocketMQ系列-消息拉取PullMessageProcessor详解
  8. 考英语四级误用六级题 千余考生困教室4个小时
  9. SDWebImage之工具类
  10. Linux学习笔记（PATH，cp，mv，文档查看cat/more/less/head/tail）
  11. java记事本打开功能_Java简易实现记事本的打开与保存
  12. Java将hive数据导入到hdfs_sqoop数据导入到Hdfs 或者hive
  13. 【Proteus仿真8086】并行接口芯片8255
  14. 图像的二维傅里叶变换的频谱图代码实现
  15. postgresql 数据库 update更新慢的原因（已解决）
  16. 中国股市十大风云人物
  17. 高等代数 线性空间(第8章)1 线性空间与子空间
  18. 正六面体染色(java)
  19. 临床血液学综合练习题库【2】
  20. qt程序报错error C2248: “ThreadTest::ThreadTest”: 无法访问 private 成员(在“ThreadTest”类中声明)

热门文章

  1. App上传GooglePlay后，微信登录及Facebook登录异常
  2. c#里namespace是什么意思？
  3. 海信将在柏林IFA推出屏幕发声激光电视
  4. Voron2.2 3D打印机制作-软件篇（1）
  5. 【云原生 · Kubernetes】部署Kubernetes集群
  6. 计算机硬件经常使用十六,[单选,A型题] 桂枝在桂枝加桂汤、桂苓五味甘草汤中的主要作用是（）...
  7. ReactNative之Android绝对布局position:'absolute'问题
  8. tuned-adm性能优化
  9. 怎样通过flash模板安装Facebook专页
  10. pandownload 服务器在维护,pandownload 2021