《大前端进阶 Node.js》系列 P6必备脚手架/CI构建能力（下）

时间  2020-04-05
标签 大前端进阶 Node.js 系列 p6 必备 脚手架 构建 能力 栏目 Node.js 繁體版
原文   原文链接

前言

Coding 应当是一辈子的事业，而不只仅是 30 岁的青春🍚
本文已收录 Github https://github.com/ponkans/F2E，欢迎 Star，持续更新💧javascript

P6 前端必备脚手架 /CI 构建能力，顺着怪怪的思路往下看，而后获取文章末尾的源码，跟着源码操做一遍，就是一个完整的前端脚手架构建、发布、部署工程化项目。css

本文中 cli 已发布至 npm 仓库，以下：html

每篇文章都但愿你能收获到东西，这篇是前端项目的自动化构建部署，但愿你看完，可以有这些收获：前端

  • CLI 建立远端仓库
  • CLI 打包
  • Nginx 部署
  • Webhook 触发 Jenkins 打包部署服务
  • Jenkins 打包部署
  • CI 构建

架构图

下图中左边部分的项目初始化、模板拉取、项目运行部分，在《大前端进阶 Node.js》系列 P6 必备脚手架/CI 构建能力（上）中，已经实现了。java

今天实现右边部分，也就是 CI 部分（你们平时常常用的前端项目发布系统，大体就是这么个东西）。node

完整架构
完整架构

前期准备

GitHub 帐号

项目若是只是存储在本地很容易由于一些意外状况（好比咖啡倒了、和媳妇吵架电脑摔了等等）致使代码丢失，并且不方便多人合做开发维护，因此咱们都是须要远端仓库存储项目的，本文使用的是 GitHub 仓库，若是你们想要跟踪实践，要先准备好 GitHub 帐号。webpack

server

为了让用户能够经过网络浏览器之类的客户端在因特网上访问咱们的网页，咱们须要一台 server 来部署项目，这样用户就能够经过公网 IP 访问咱们的网页了。nginx

本文用的是 aliyun server，有条件的话也能够准备一个，固然没条件也不要慌，咱们电脑也是一台 server，有它在手四海八荒均可以走一朝。git

server 部署

  • 安装 Nginxgithub

  • 安装 node

  • 安装 yum

    PS：yum 是一个 Shell 前端软件包管理器。基于 RPM 包管理，可以从指定的 server 自动下载 RPM 包而且安装，能够自动处理依赖性关系，而且一次安装全部依赖的软体包，无须繁琐地一次次下载、安装。

    好比，Jenkins 使用 yum 安装就很方便快捷。

CLI 建立远端仓库

命令行建立仓库

有时候为了将本地的项目仓库同步到 Github，咱们还得打开浏览器去本身的 Github 帐户下建立一个空仓库，打断了本身的工做流，若是咱们能够经过命令行的形式建立 Github 仓库并关联本地项目岂不是完美，而且命令行还能够集成到咱们的 CLI 工具里，只要想不到没有作不到的，下面咱们就介绍下如何经过命令行建立仓库。

首先在你的 Github 上建立一个 token 建立地址，在命令行建立项目的时候须要这个 token 作校验

（select scopes 我所有勾上了，毕竟加班加点赶文章，来不及仔细研究，见谅见谅）

必定要把生成的 personal access token 保存下来，只会显示一遍，不记下来之后就找不到了

经过命令行建立 Github 仓库
curl -u "$username:$token" https://api.github.com/user/repos -d '{"name":"$repo_name"}'
复制代码

这里须要把上述 username 和 token 分别换成实际的用户名和刚才记住的 personal access token，把 repo_name 换成任何想要的仓库名。

将命令行建立 Github 仓库的功能集成到 CLI 工具里

咱们上期文章有介绍到 CLI 有个初始化的功能，接下来咱们将命令行建立 Github 仓库的功能补充到初始化命令里，先列 yi 一下 CLI 初始化要作的事情：

  • Git 初始化
  • 建立 Github 仓库
  • 关联 Github 仓库
  • 更新 package.json 的 repository 配置
  • 提交代码到 Github 仓库
  • 安装依赖

相关代码在 little-bird-cli/src/init.js 

try {
  await loadCmd(`git init`, 'git初始化');
  if (username === '' || token === '') {
    console.log(symbol.warning, chalk.yellow('缺乏入参没法建立远端仓库'));
  } else {
    const projectName = process.cwd().split('/').slice(-1)[0];

    await loadCmd(`curl -u "${username}:${token}" https://api.github.com/user/repos -d '{"name": "${projectName}"}'`, 'Github仓库建立')
    await loadCmd(`git remote add origin https://github.com/${username}/${projectName}.git`, '关联远端仓库')
    let loading = ora();
    loading.start(`package.json更新repository: 命令执行中...`);
    await updateJsonFile('package.json', {
      "repository": {
        "type": "git",
        "url": `https://github.com/${username}/${projectName}.git`
      }
    }).then(() => {
      loading.succeed(`package.json更新repository: 命令执行完成`);
    });

    await loadCmd(`git add .`, '执行git add')
    await loadCmd(`git commit -a -m 'init'`, '执行git commit')
    await loadCmd(`git push --set-upstream origin master`, '执行git push')
  }
  await loadCmd(`npm install`, '安装依赖')
} catch (err) {
  console.log(symbol.error, chalk.red('初始化失败'));
  console.log(symbol.error, chalk.red(err));
  process.exit(1);
}
复制代码

为了方便你们体验，我这里是把 username 和 token 做为命令行入参传进来的，若是是你本身的项目，能够将其直接写死在代码里，在你的项目目录下执行 lbc init -u username -t ​token 若是获得如下结果，那么恭喜你成功啦，快去 Github 远程仓库查看你的项目代码

image-20200330133928513

至此，你们就能够直接跨越千山和万水，开始 Coding 啦，两耳不闻窗外事，一心只用写代码，果真是很爽

手动打包 & 部署

打包

打包能够理解为上线发布时的预处理工做， 会将浏览器不能识别的语法作预处理转换，把全部的 js 文件, css 文件都分别压缩合并为一个 All in One 的 .js 和 .css 文件。

这样浏览器就能够经过少许的 HTTP 请求获取到所须要的前端资源了, 节省流量, 加快页面加载速度，目前比较流行的打包工具备 Gulp, Grunt, Webpack 等。

咱们的 CLI 工具已经引入了 webpack，因此打包这一步仍是使用 webpack 来实现。

lbc build

在little-bird-cli/src/main.js命令管理文件里增长打包命令lbc build

webpack.build.js

增长 webpack 打包配置文件webpack.build.js，它和咱们的本地项目启动 webpack 配置文件的主要区别是增长了打包输出，减小一些不须要的方法好比监听。

output: {
  filename:'[name].[hash].js',
  path: process.cwd() + '/dist',
  publicPath: '/',
}
复制代码
执行脚本

增长 build 执行脚本文件 little-bird-cli/src/build.js

let build = () => {
    webpack(config, (error) => {
        if (error !== null){
            console.log(symbol.error, chalk.red(error));
        } else {
            console.log(symbol.success, chalk.green('打包完成'));
        }
        process.exit(1);
    });
}
复制代码

在项目目录下执行lbc build，查看 dist 目录就能够看到打包生成的 html/js 文件了

部署

在开始自动打包部署以前咱们先来体验下手动打包部署，正好能够校验下咱们的 CLI 打包命令在 server 端 是否能够正常使用。

接下来的操做都是在 server 环境哦~😯

登陆

登陆你的 server，将项目代码 clone 到你的 server（ clone 后别忘了安装依赖npm install）

安装脚手架 npm 包

全局安装 CLI 包 npm i -g little-bird-cli@latest

lbc build 打包

在项目目录执行 lbc build 打包命令，查看在你 clone 的项目的 dist 目录是否是生成了 html/js 文件，若是有的话表明 CLI 打包功能在服务端正常运转。

Nginx

修改 Nginx 配置，打开配置文件vim /etc/nginx/nginx.conf，root 为你 clone 项目的 dist 目录

启动 Nginx 服务，重启 Nginx 服务 nginx -s reload，经过 ip:80 端口就能够访问你的页面了

虽然经过手动操做也可以提供咱们的项目网页给用户使用，可是每次有代码更新的时候，都须要本地 push 代码到远端仓库， 而后登陆 server pull 代码再打包代码，重复性的工做能省则省，工具都是懒人发明的😆，下面懒人法宝就要登场了，一劳永逸 ~

不少公司有本身的一套前端发布系统，并非自动部署滴，须要手动去触发打包、部署

自动打包 & 部署基础建设

接下咱们经过使用 Jenkins+Github+Webhook 自动打包部署项目，实现 master 分支进行提交的时候，自动执行脚本进行打包部署操做。

你们可能会疑问 Jenkins 是什么

Jenkins 是一款开源 CI 软件，用于自动化各类任务，包括构建、测试和部署软件。想了解更多你们能够去官网查看。

Webhook 又是什么呢

一般称其为钩子（不是 React Hook，hhhh~~），经过定制 Webhook 来检查 Github 上的各类事件，最多见的就是 push 事件了。

若是你设置了一个监听 push 事件的 Webhook，每次你的项目有任何提交，这个 Webhook 都会被触发，这时 Github 会发送一个 HTTP POST 请求到你配置好的地址。

概念先简单了解下（具体的自行 Google），接下来咱们要正式开始了哦~

部署 server

咱们第一步先来部署 server，首先要登陆你的 server（我好像废话了，哈哈😝）。

接下来为你的 server 安装 Jenkins。由于 jenkins 的运行须要 JDK 环境，因此咱们还须要在本身的 server 上安装 java 运行环境。

安装 java 运行环境

查看你的 server 是否安装了 JDK 

java -version
复制代码

若是出现以上信息则表示没有按照 JDK。能够经过 yum 安装，步骤以下

执行命令 yum -y list java* 查看可安装 java 版本

选择一个 java 版本进行安装 yum install java-1.8.0-openjdk-devel.x86_64，根据提示完成安装。

输入java -version 查看是否安装成功

安装 Jenkins

yum 的 repos 中默认是没有 Jenkins 的，须要先将 Jenkins 存储添加到 yum repos

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
复制代码

执行 yum install jenkins 安装 Jenkins

修改 Jenkins 配置

默认状况下 Jenkins 是使用 Jenkins 用户启动的，可是这个用户目前系统是没有赋予权限的，因此咱们将启动用户改成 root，另外 Jenkins 默认端口 8080，若是你没有其余服务占用 8080 端口能够不修改。

vim /etc/sysconfig/jenkins
复制代码

修改配置

JENKINS_USER = 'root'
JENKINS_PORT = '8001'
复制代码

执行 service jenkins start 启动 Jenkins 服务

出现上述信息表示 Jenkins 启动成功，在浏览器输入*ip:8001访问 Jenkins 登陆页面。

然而~然而~一直在转圈圈，访问不了，我是谁我在哪发生了什么❓

懵逼 1 秒钟，开始排查问题

首先确认下 Jenkins 是否真的启动成功了，执行 systemctl status jenkins 查看 Jenkins 状态

Jenkins 运行正常，为什么没法访问呢，噢！！！

再来检测下防火墙，执行systemctl status firewalld查看防火墙状态

防火墙未启动，好的， 没问题，让咱们来启动它 systemctl start firewalld

防火墙已启动，让咱们来查看防火墙有没有开放咱们设置的 Jenkins 端口，执行 firewall-cmd --list-ports 发现没有 Jenkins 的端口，没有也没问题咱们开启就行了

firewall-cmd --permanent --zone=public --add-port=80/tcp  // 开启已配置好的Jenkins端口
systemctl reload firewalld // 重启防火墙，重启上一步才会生效
复制代码

当我满怀但愿， 信誓旦旦去访问时，又心痛了~~~

接着查看 aliyun 防火墙，aliyun server 自带防火墙，默认只开发 80 端口，咱们用了其余端口须要去 aliyun 防火墙开放端口才行

再试试，泪目~~ 总算能够访问了

配置 Jenkins

Jenkins 给咱们提供了网页配置界面 爱了 爱了

进入登陆页面后，Jenkins 提示咱们须要输入超级管理员密码进行解锁。根据提示，咱们能够在/var/lib/jenkins/secrets/initialAdminPassword文件里找到密码。

tail /var/lib/jenkins/secrets/initialAdminPassword
复制代码

找到密码后，复制密码，粘贴到 Jenkins 解锁页面，点击Continue继续初始化配置。短暂的等待后，进入插件安装页面。

这里咱们点击的 Install suggested plugins，安装默认插件，固然你也能够点击另外一个按钮安装指定的插件。点击后，页面进入了插件下载安装页面。

所有安装完成后，页面自动进入管理员帐户注册页面。

输完信息点击 save and finish，进入 Jenkins 欢迎页（此图省了），而后点击 start using Jenkins，进入 Jenkins 主页面。

至此，Jenkins 基本配置完成，你们不要慌~不要慌~，还有事情要作，接下来咱们还要对 Jenkins 全局作些其余配置。

在 Github 插件的配置中，点击“高级”按钮，启用 Hook URL，并将 Hook URL 复制出来，并保存刚才的设置，这样他让它能够接受 Github 的请求。

配置 Github 仓库

由于 Github 常常有代码处理动做，须要配置 Github 项目仓库在处理这些动做的同时会发送信号至 Jenkins，才能触发 Jenkins 自动构建。

在"Webhooks"选项卡中，点击"Add webhook"，将在 Jenkins 生成的 Hook URL 填入至 Payload URL 中，另外，选择自主事件，events 里选择了 pushes，当 Github 收到了客户端有 Push 动做时，会触发一个 Hook

image-20200326180636869
image-20200326180636869

配置完成后，展现以下

自动打包部署实战

前期准备已经差很少了，实战开始，先送上自动打包 CI 架构图

其实就是文章开头架构图中的**右边 CI 部分的详细版😝~

建立

建立 Jenkins 项目，选择 freestyle project

配置

配置项目，点击 Configure 进入配置页面，进行相关配置

配置 Github 项目的项目 URL: https://github.com/xxxxx/test

配置 Git 仓库地址：https://github.com/xxxxx/test.git

配置构建触发事件

配置构建脚本

保存以后，serve r 里就有了咱们的仓库代码了,能够去/var/lib/jenkins/workspace 目录下里查看,或者网页的 workspace 查看，网页查看至少须要构建一次才有。

执行构建

构建完成后，能够去 workspace 里查看 dist 里是否有打包文件

修改 nginx 配置文件，手动打包的时候咱们已经配过 nginx 了，指向目录是咱们手动 clone 项目的 dist 目录。

接下来咱们把 root 指向地址换成 jenkins 建立的项目 dist 目录 /var/lib/jenkins/workspace/hello/dist，从新启动 nginx，访问的就是咱们 jenkins 服务建立的项目了

好啦，该写的都写了，该作的也都作了，下面见证奇迹的时刻到了，修改你的代码 =》git push =》 稍等一下，刷新页面看是否成功更新。哇偶~

总结

本文已收录 Github https://github.com/ponkans/F2E（怪怪整理了大前端知识技能树在 GitHub），欢迎 Star，持续更新💧

✨ 怪怪我人懒话很少，本期代码和图有点多，小伙伴们能够直接获取源代码，对照着源代码，本身理一遍思路，实现一遍。

相信正在看文章的多数小伙伴，天天都会用脚手架去作项目，去打包，发布。怪怪以为了解并本身实现整个前端工程化的流程，是十分必要而且极具意义的一件事~~

近期原创传送门，biubiubiu~~~

喜欢的小伙伴麻烦加个关注，点个赞哦，感恩💕😊

联系我 / 公众号

本文脚手架 /CI 构建源代码，公众号回复【脚手架】便可获取，若是有兴趣参与脚手架后期共建，请微信私聊怪怪~

微信搜索【接水怪】或扫描下面二维码回复”加群“，我会拉你进技术交流群。讲真的，在这个群，哪怕您不说话，光看聊天记录也是一种成长。（阿里技术专家、敖丙做者、Java3y、蘑菇街资深前端、蚂蚁金服安全专家、各路大牛都在）。

接水怪也会按期原创，按期跟小伙伴进行经验交流或帮忙看简历。加关注，不迷路，有机会一块儿跑个步🏃 ↓↓↓

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程