Loading... <p>使用 Jenkins 配合 Github 持续集成 Vue项目，在使用之前需要在 Jenkins 中安装Node.js 的插件，并且在全局工具配置中配置Node.js的环境，具体步骤如下</p> <h4>配置Node.js</h4> <p><strong>1、配置Node.js环境</strong></p> <pre><code class="language-shell"># 在usr中新建node目录 mkdir /usr/local/node # 定位到node目录 cd /usr/local/node # 下载node.js wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz # 解压node tar -xvf node-v10.16.0-linux-x64.tar.xz # 建立连接 sudo ln -s /usr/local/node/node-v10.16.0-linux-x64/bin/node /usr/bin/node sudo ln -s /usr/local/node/node-v10.16.0-linux-x64/bin/npm /usr/bin/npm # 验证安装 node -v # 配置镜像加速 npm config set registry https://registry.npm.taobao.org</code></pre> <p><strong>2、在插件管理中搜索 Node.js 并安装</strong></p> <p><img src="https://img.yuanxz.net/QQ%E6%88%AA%E5%9B%BE20190722104036.png" alt="" /></p> <p><strong>3、全局配置Node</strong></p> <p>打开 <code>系统设置 -> 全局工具配置</code> 找到 Node，取消自动安装的勾选，输入我们安装的路径 <code>/usr/local/node/node-v10.16.0-linux-x64</code></p> <p><img src="https://img.yuanxz.net/QQ%E6%88%AA%E5%9B%BE20190722163641.png" alt="" /></p> <h4>创建任务</h4> <p>返回控制台，创建一个自由风格的项目</p> <p><img src="https://img.yuanxz.net/QQ%E6%88%AA%E5%9B%BE20190722163931.png" alt="" /></p> <p><strong>1、配置代码源</strong></p> <p>在源码管理中的 Repository URL 中输入我们的git仓库地址，并且添加凭证</p> <p><img src="https://img.yuanxz.net/QQ%E6%88%AA%E5%9B%BE20190722164359.png" alt="" /></p> <p><strong>2、配置构建触发器</strong></p> <p><img src="https://img.yuanxz.net/5-5d253c6ab33cf32890.png" alt="file" /></p> <p>这里选择 GitHub hook trigger for GITScm polling，在代码提交后就自动构建，在使用之前需要安装 Github 的插件，由于Jenkins在初始的时候已经默认安装了Git Plugin和相关依赖，因此不需要重复安装（码云与GitLab需要安装插件）</p> <p><strong>3、配置Github服务器</strong></p> <p>打开系统设置页面 -> Github 服务器</p> <p><img src="https://img.yuanxz.net/6-5d25454501c3656769.png" alt="file" /></p> <p>在这里需要添加访问凭证 Secret text</p> <p><img src="https://img.yuanxz.net/7-5d2545a71faee76944.png" alt="file" /></p> <p>获取 Github 的访问凭证，打开 Github 首页，在 settings -> Developer settings -> Personal access tokens -> Generate new token</p> <p><img src="https://img.yuanxz.net/8-5d254663af3a532343.png" alt="file" /></p> <p>将生成的 access tokens 配置到 上一步的 Github 服务器中</p> <p><img src="https://img.yuanxz.net/9-5d2546ef1bda673247.png" alt="file" /></p> <p><strong>4、配置Github Hook</strong></p> <p>打开 Github 中的项目， 在项目的 Settings 中选择 Webhooks -> Add webhook</p> <p><img src="https://img.yuanxz.net/10-5d254a150cbbb27139.png" alt="file" /></p> <p><strong>5、配置构建环境</strong></p> <p>勾选 Use secret text(s) or file(s) 与 Add timestamps to the Console Output</p> <p><img src="https://img.yuanxz.net/5d254b1f133d476263.png" alt="file" /></p> <p><strong>6、编写构建的shell脚本</strong></p> <p>经过上面的步骤后，一旦我们有代码提交，就会自动触发任务，我们现在要做的是编写shell脚本进行自动构建，步骤如下</p> <ol> <li>下载依赖</li> <li>打包</li> <li>覆盖原来的dist文件夹</li> </ol> <p><img src="https://img.yuanxz.net/QQ%E6%88%AA%E5%9B%BE20190722165731.png" alt="" /></p> <pre><code class="language-shell">echo '开始构建项目' DIR=/www/server/eladmin npm install npm run build rm -rf $DIR || echo '文件夹不存在' # 判断路径是否存在，如果不存在则创建路径 if [ ! -d $DIR ];then mkdir -p $DIR fi # 定位到项目路径 cd $DIR mv -f /root/.jenkins/workspace/cloudy-web/dist . echo '项目构建完成'</code></pre> <p>配置完成后，项目就会自动部署，只需要点击构建按钮或者提交代码后，jenkins就会自动拉去最新代码，构建项目。</p> 最后修改：2019 年 10 月 16 日 05 : 05 PM © 允许规范转载