DevUI是一支兼具设计视角和工程视角的团队,服务于华为云 DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。
官方网站: devui.design
Ng组件库: ng-devui(欢迎Star)
官方交流:添加DevUI小助手(devui-official)
DevUIHelper插件:DevUIHelper-LSP(欢迎Star)
本文以DevUI组件库网站为例,介绍如何自动化部署一个前端应用。html
本文能够认为是《手把手教你搭建本身的Angular组件库》的续集。前端
本机开发完代码,并push到远程代码仓库,还须要部署到服务器上,用户才能访问到。node
所以为了部署你的应用,第一步你须要购买一台服务器,为了节省成本,通常都会购买按需使用的云服务器,如何申请云服务器就不介绍了,下面介绍如何在Linux服务器搭建Nginx服务。nginx
Web应用一般都会使用Nginx做为反向代理。git
为了让用户能够访问咱们的应用,须要在服务器安装Nginx应用。github
咱们使用源码编译方式安装最新版本的Nginx,主要分红如下步骤:shell
先在Nginx官网下载页找到Linux版本的Nginx源码包地址,而后使用wget命令下载Nginx源码安装包。npm
wget http://nginx.org/download/nginx-1.18.0.tar.gz
使用tar命令进行解压。segmentfault
tar -zxvf nginx-1.18.0.tar.gz
先进入nginx源码的根目录,而后执行configure配置脚本,这里只配置了nginx的安装目录。浏览器
cd nginx-1.18.0 ./configure --prefix=/usr/local/nginx
执行完发现报错了,原来是缺乏依赖库。
[root@ecs-kagol nginx-1.18.0]# ./configure --prefix=/usr/local/nginx checking for OS + Linux 3.10.0-862.14.1.5.h428.eulerosv2r7.x86_64 x86_64 checking for C compiler ... found + using GNU C compiler + gcc version: 4.8.5 20150623 (EulerOS 4.8.5-28) (GCC) checking for gcc -pipe switch ... found ... checking for PCRE library in /usr/local/ ... not found checking for PCRE library in /usr/include/pcre/ ... not found checking for PCRE library in /usr/pkg/ ... not found checking for PCRE library in /opt/local/ ... not found ./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the module by using --without-http_rewrite_module option, or install the PCRE library into the system, or build the PCRE library statically from the source with nginx by using --with-pcre=<path> option.
主要须要安装pcre/zlib/openssl三个依赖库,咱们使用yum包管理工具(相似Node的npm包管理工具)来安装。
yum -y install pcre-devel zlib-devel openssl-devel
安装完依赖库以后再次执行configure脚本,Nginx配置成功,配置结果以下:
... checking for getaddrinfo() ... found checking for PCRE library ... found checking for PCRE JIT support ... found checking for zlib library ... found creating objs/Makefile Configuration summary + using system PCRE library + OpenSSL library is not used + using system zlib library nginx path prefix: "/usr/local/nginx" nginx binary file: "/usr/local/nginx/sbin/nginx" nginx modules path: "/usr/local/nginx/modules" nginx configuration prefix: "/usr/local/nginx/conf" nginx configuration file: "/usr/local/nginx/conf/nginx.conf" nginx pid file: "/usr/local/nginx/logs/nginx.pid" nginx error log file: "/usr/local/nginx/logs/error.log" nginx http access log file: "/usr/local/nginx/logs/access.log" nginx http client request body temporary files: "client_body_temp" nginx http proxy temporary files: "proxy_temp" nginx http fastcgi temporary files: "fastcgi_temp" nginx http uwsgi temporary files: "uwsgi_temp" nginx http scgi temporary files: "scgi_temp"
咱们注意到执行完configure配置脚本以后,生成了一个Makefile文件,该文件就是用来编译Nginx源码的。
相比配置,编译的步骤就简单多了,只须要执行make命令便可。
make
编译完以后就是安装了,这一步才会真正在/usr/local/nginx目录下生成相应的文件。
make install
安装完以后,在/usr/local/nginx目录下已经生成了运行Nginx应用须要的全部文件。
执行nginx目录下的sbin/nginx就能够直接启动Nginx啦。
/usr/local/nginx/sbin/nginx
在本机浏览器中输入服务器的公网IP地址,便可访问Nginx应用。
这里显示了Nginx的欢迎页面,等咱们部署好本身的Web应用以后,这个网页将显示咱们本身的网站首页。
咱们在本机开发完DevUI网站的代码以后,执行npn run build,这时将在dist目录获得DevUI网站的全部静态资源文件,能够先在本地用anywhere看下效果。
为了将其部署到服务器,并经过Nginx服务器访问,咱们须要将这些文件上传到服务器的nginx目录,一个一个文件传确定不现实,须要将其压缩打包,而后上传到服务器,最后解压到nginx的html目录就算部署完成。
Step 1: 压缩打包 tar
Step 2: 解压部署 deploy
npm run build构建出来的静态资源都存放在dist目录下,只须要执行如下命令便可生成tar压缩包:
tar czvf devui.tar.gz ./dist
登陆服务器,使用rz命令将上一步生成的tar包上传到Linux服务器,而后使用tar命令解压到nginx的html目录便可完成部署。
tar zxvf devui.tar.gz
若是每次开发完都须要手动执行以上步骤,将会很是麻烦,而且很容易出错。
为何不将其自动化呢?
DevCloud是集华为研发实践、前沿研发理念、先进研发工具为一体的软件开发平台,为了实现Web应用的自动化部署,咱们主要须要使用DevCloud的流水线
/编译构建
/发布
/部署
4个服务。
主要分红如下4个步骤:
因为DevCloud全部服务都是经过项目承载的,所以须要先建立下项目,这里建立一个看板项目。
先进入DevCloud首页,按如下步骤便可建立一个看板项目:
项目建立成功以后直接进入该项目首页,点击头部菜单构建&发布
下的流水线
按钮便可进行流水线首页。
在流水线首页的右上角有一个建立流水线的按钮,点击便可进入流水线的建立流程。
建立一条流水线主要分红如下步骤:
为了选择Github代码仓库的源,咱们须要新增一个服务扩展点,得到Github的受权,这样DevCloud流水线这边才能够拉取Github的代码,进行构建、部署等步骤。
新增扩展点的步骤也很简单:
有了扩展点,就能够选择你的Github仓库做为代码源啦。
选完代码源就能够建立你的流水线啦。
能够新建立的流水线包含3个阶段,第一个阶段关联了一个Github的代码仓,第二个阶段是一个空的构建阶段,里面什么任务也没有,第三个阶段是一个不可编辑的发布仓库阶段。
这个流水线目前什么都作不了,咱们须要往里面添加任务才能完成网站的自动化部署。
回顾下以前的手工部署步骤:
所以咱们首先须要在流水线中添加一个构建任务:
在构建阶段添加一个任务,而后在侧滑中选择构建类型,这是该类型下是没有构建任务的,所以无法选择,须要先建立构建任务。
在选择须要调度的任务中点击建立按钮,进入新建构建任务的页面,按照指引建立一个构建任务:
该步骤直接使用默认的构建脚本命令,只须要增长打tar包的命令便可:
... npm install # 安装依赖库 npm run build # 普通的NG CLI生产包构建命令 npm run tar # 新增
tar命令:
"tar": "node scripts/tar.js",
tar.js
const fs = require('fs'); const tar = require('tar'); fs.stat('./result', (error, stats) => { if (error) { fs.mkdirSync('./result'); // 不存在result目录则建立一个空的 } tar.c({ gzip: true }, ['dist']) // 将dist目录下的文件所有打包 .pipe(fs.createWriteStream('./result/devui.tar.gz')); // 将生成的tar包(devui.tar.gz)放到result目录下 });
上一个Npm构建步骤已经将压缩包建立好了,这个任务的目的是将这个tar包上传到发布库,也就是以前流水线中的第3个阶段,方便部署时下载tar包到目标服务器。
该步骤主要须要填写构建包路径:
./result/devui.tar.gz
发布版本号和包名不要写死,从部署参数里拿,格式以下:
${releaseVersion}
其中releaseVersion
就是下一步须要配置的构建参数。
codeBranch是默认的参数,咱们须要增长releaseVersion和serviceName两个构建参数,一个用于每次构建时的版本号,另外一个就是服务名。
回到流水线,就能够选择上一步建立好的流水线,保存便可。
至此构建的步骤已经搞定了,咱们能够跑一下试试。
跑完流水线咱们就能在发布仓库看到咱们的tar构建包:
有了构建包咱们就能够拿它去服务器部署啦,固然咱们确定不会选择手工的方式部署,而是在流水线中建立一个部署任务,让全部过程自动化进行。
在流水线中添加部署任务和添加构建任务差很少,只须要如下3步便可:
和建立构建任务相似:
关键是须要选择主机组
,填写软件包
和部署目录
。
软件包就是以前发布仓库的软件包,直接从/devui/${releaseVersion}
取便可,其中${releaseVersion}
是部署参数,和以前的构建参数相似。
部署目录是要将tar压缩包上传到目标机器中的目录,咱们传到/devui
目录中。
主机组须要新建,选择主机组旁边的新建
按钮,进入建立主机组页面,只须要如下步骤便可建立一个主机组:
添加主机须要填写的信息:
执行shell命令是当你已经把tar软件包上传到目标服务器以后,但愿执行的shell命令,咱们固然是但愿将tar包解压出来喽。
执行如下shell便可:
rm -rf /usr/local/nginx/html/* # 删除以前部署过的静态资源 tar zxvf /devui/${serviceName}.tar.gz -C /usr/local/nginx/html # 解压tar包到nginx的html目录 mv /usr/local/nginx/html/dist/* /usr/local/nginx/html/
这里的部署参数和构建参数的配置方式是同样的,再也不赘述。
搭建完流水线,咱们能够配置一个定时任务,天天或每周自动用制定分支跑流水线,彻底不用人工干预。
为了保障版本质量,咱们也能够在配置灰度部署策略,添加拨测任务,保障每一次部署现网都不出问题。
限于篇幅就不一一介绍了,感兴趣的小伙伴能够关注DevCloud官网,里面详细地介绍了从需求规划到研发、测试、运维整套DevOps流程的玩法。
本文详细地介绍如何将一个网站的Github仓库源码自动化部署到服务器。
先介绍申请服务器和搭建服务器环境,重点介绍在Linux服务器搭建Nginx服务的步骤;
而后简单介绍了手动部署流程;
最后详细介绍了如何利用DevCloud流水线工具,实现自动化部署。
咱们是DevUI团队,欢迎来这里和咱们一块儿打造优雅高效的人机设计/研发体系。招聘邮箱:muyang2@huawei.com。
文/DevUI Kagol
往期文章推荐