前端妹子对我提出这种要求,我???

简介: 本文主要介绍 Jenkins部署前端项目

Jenkins前端项目部署


老样子我们画张图来了解下部署的一个大致过程:


网络异常,图片无法展示
|


从图中我们可以看出来我们需要的内容:


  • 两台服务器(一台服务器也行,这样就可以不用进行 SSH 远程调用了)


  • JenkinsNginxNode 三个工具的安装


准备好以上需要的内容,部署前端那就是 手捏把掐


1. Nginx 安装


如果服务器上已经安装了 Nginx ,这一个步骤可以跳过


Nginx下载地址:点击下载


我们将下载好的 nginx-1.9.9.tar.gz 上传到服务器上的 /usr/local

执行以下命令:


# 解压
tar -zxvf nginx-1.9.9.tar.gz
#进入nginx目录
cd nginx-1.9.9
# 配置
./configure --prefix=/usr/local/nginx
# 编译
make && make install


执行以上命令后,我们可以在 /usr/local/nginx中看到以下目录结构:


网络异常,图片无法展示
|


然后我们进入 conf/nginx.conf文件中修改下默认的监听的端口号:


网络异常,图片无法展示
|


然后输入 ./sbin/nginx 进行启动,然后我们在网页上访问http://服务器

IP:8090/,看到以下页面说明 Nginx 启动成功:


网络异常,图片无法展示
|


2. Node 安装


然后我们需要在我们的 Jenkins 所在的服务器上也安装上 NodeJS 工具,步骤如下:


网络异常,图片无法展示
|


  • 下载完我们把安装包放到服务器上的 /usr/local 目录下(存放目录没有要求)


  • 然后输入以下指令


# 解压
tar -xvf node-v14.15.1-linux-x64.tar.xz
# 建立软连接
ln -s /usr/local/node-v14.15.1-linux-x64/bin/node /usr/local/bin/
ln -s /usr/local/node-v14.15.1-linux-x64/bin/npm /usr/local/bin/


  • 测试是否安装成功


node -v
npm -v


  • 网络异常,图片无法展示
    |


3. Jenkins 配置


完成 NginxNode 的安装后,我们就可以进行下一步操作了。我们需要在 Jenkins 中安装上 NodeJS 插件:



网络异常,图片无法展示
|

然后依次点击 Manage Jenkins -> Global Tool Configuration,进行 NodeJS 的配置


网络异常,图片无法展示
|


配置里面选择我们/usr/local/node-v14.15.1-linux-x64/,因为我们已经自己安装了 Node,所以这个自动安装的选项可以取消勾选。


4. 前端部署


以上都是前期的准备工作,到这里我们就完成了前期工作的准备,接下来我们就可以来部署项目了!


  • 首先创建一个前端流水线项目:


网络异常,图片无法展示
|


然后建立Jenkinsfile构建脚本,示例如下:


//gitlab的凭证
def git_auth = "89f2087f-a034-4d39-a9ff-1f776dd3dfa8"
node {
    stage('拉取代码') {
        checkout([$class: 'GitSCM', branches: [[name: '*/master']],
        doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [],
        userRemoteConfigs: [[credentialsId: "${git_auth}", url:
        'git@192.168.66.100:cbuc_group/test_front.git']]])
    }
    stage('打包,部署网站') {
        //使用NodeJS的npm进行打包
        nodejs('nodejs12'){
            sh '''
            npm install
            npm run build
            '''
        }
        //=====以下为远程调用进行项目部署========
        sshPublisher(publishers: [sshPublisherDesc(configName: 'master_server',
        transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '',
        execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes:
        false, patternSeparator: '[, ]+', remoteDirectory: '/usr/local/nginx/html',
        remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')],
        usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
    }
}


保存后我们点击 Build Now,等待一会就可以看到项目已经成功部署上去啦!


目录
相关文章
|
JavaScript 测试技术
|
JavaScript 网络协议 PHP
使用阿里云npm镜像加速
npm(node package manager)是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
3154 0
|
Web App开发 JavaScript 前端开发
前端技术周刊 2018-06-22:Webpack 生存指南
Nodejs 发布了六月安全更新,建议开发者更新到 10.4.1 版本,包含对 HTTP/2 拒绝服务攻击、TLS 拒绝服务等的预防。
2355 0
|
JSON 移动开发 资源调度
复盘node项目中遇到的13+常见问题和解决方案
笔者之前陆陆续续接手过几个nodejs项目, 也参与过几个有点意思的nodejs开源项目, 最近把其中遇到的一些问题和解决方案做一个梳理, 避免大家继续踩坑. 话不多说我们开始吧~
265 0
|
iOS开发 MacOS JavaScript
gitbook
在macOS上安装gitbook 安装nodejs, 在macOS上, 只要安装了Xcode, nodejs就会被默认安装 node -V, 显示当前系统的node版本号 npm install -g npm, 更新当前系统的npm版本 npm install -g gitbook-cli, 安装...
1698 0
|
存储 JavaScript 前端开发
JavaScript 开发人员更喜欢 Deno 的五大原因
NodeJS 的创造人 Ryan Dahl 刚发布了一个新的运行时 Deno,旨在解决 Node 存在的许多缺陷。像大家一样,我一开始也以为这只是又一个 JS 框架。
|
Web App开发 JavaScript 测试技术
教练,我“只”想学`solidity`
教练,我“只”想学solidity Smart Contract(智能合约)才是Dapp(去中心化应用)的核心,不是nodejs。 如果你想要研究Solidity,但沒碰过nodejs,那么本篇是专门为你而写的。
|
NoSQL JavaScript MongoDB
mongoDB报错Cannot find module '../build/Release/bson'
打算用nodejs写一个blog系统,发现nodejs还是存在很多的坑。在使用mongodb时遇到如下报错问题:   [html] view plain copy   { [Error: Cannot find module '.
1235 0