用TeamCity实现npm项目的自动部署

TeamCity是Jetbrains的持续集成工具,免费使用的话可以设置20个构建脚本,对于我们个人来说基本上是够用了。当然假如以后超过限制了,可以考虑使用另一个著名的持续集成工具Jenkins。当然很早以前我就安装了TeamCity,不过一直没机会用。这几天正好随便写了一个个人小项目,就用它来测试一下TeamCity的持续集成功能吧。

先来说下我的条件,我的TeamCity是部署在自己的电脑上,自己的电脑上当然还有其他一些开发软件。另外我还有一台服务器,安装着Nginx等软件,并开启了FTP。现在要做的就是设置一个持续集成,每当我提交Vue项目的时候,TeamCity自动打包项目,然后上传到FTP目录,让服务器更新文件。这个过程说起来好像挺复杂,其实倒是挺简单的。

服务器配置

我用的FTP软件是vsftpd,这是一个比较安全的FTP服务器端,一般Linux上都是用它。这个软件的缺点就是当你登录的时候,FTP文件夹只能是用户主目录,不能自定义修改为其他目录。而Nginx默认的文件目录一般在/var/www/html或者/usr/share/nginx/html之类的。因此nginx需要将HTML文件目录配置修改为用户主目录。

当然一般情况下不会将整个用户主目录暴露在Web服务器下,而是只暴露一个子文件夹。所以nginx配置文件可以这么写。

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /home/yitian/html/my-website;
....

当然这么配置的话,访问nginx只会得到403错误。这个问题困扰了我整整一个晚上的时间。最后终于找到了解决办法。Linux下软件对权限非常敏感。如果nginx要访问用户主目录下的文件夹的话,该文件夹下所有文件必须对所有人可读,该文件夹下的所有子文件夹必须对所有人开放可执行权限,用户主目录也必须对所有人可读。所以对于我来说,需要对用户主目录和Web文件目录施加701和755权限,或者直接将用户主目录设置为755也可以。当然我觉得用户主目录的权限还是小一点好。

chmod 701 /home/yitian
chmod 755 -R /home/yitian/html/my-website

另外再说一句,很多人管理VPS喜欢使用root账户管理,这样做的好处是不需要频繁输入管理员密码。但是一直用最高权限可能有安全隐患,而且使用root账户创建的各种文件和文件夹的权限也比较高。我已开始使用的就是root账户创建的my-website文件夹,然后发现FTP无法向其中传文件,因为权限不够。重新使用普通账户创建该文件夹之后,FTP服务才可以正常访问文件。

最后在说一点,如果你传入的文件夹含有中文文件名的话,服务器需要将locale设置为中文(zh_CN.UTF-8),否则中文文件名会显示成??。Ubuntu等操作系统可能还需要安装中文支持。这个问题可以参考为什么我的Linux服务器不支持Unicode

TeamCity配置

创建项目

我的这个项目是使用Vue脚手架搭建的一个基于WebPack的npm项目,并上传到了Git仓库。在下图中填写项目所需各种信息即可。确定之后,TeamCity会自动拉取项目并尝试进行构建。当然这个尝试90%情况下都会失败,需要我们手动设置构建步骤。这也是TeamCity免费版20个构建步骤的限制原因所在。

创建构建步骤

这个地方就是本文的核心所在,当理解了TeamCity的构建设置过程之后,我们就可以自由的组合出比较复杂的构建过程。

安装npm包

对于一个项目来说,第一步做的事情肯定就是拉取依赖包,然后尝试编译运行。对于我这种npm项目来说,TeamCity没有预设的选项,所以需要选择命令行类型。由于npm包在国内访问不太通畅,所以在填写命令行的时候,使用了淘宝的镜像。

npm install --registry=https://registry.npm.taobao.org

本来在这一步我还直接在自定义脚本那里填写了npm run build这一行代码,但是结果发现TeamCity好像并没有执行这一行,所以只能讲这个添加为单独的构建步骤。另外本来我是准备使用淘宝封装的cnpm命令,但是结果发现这个命令在这里并不可见,强行使用的话只会提示找不到该命令,所以只能采用这种折中办法。

打包项目

了解了第一个步骤,那么打包项目这个步骤就很容易理解了。

上传dist文件夹

这一步就是这个持续集成最关键的一步了,它涉及到服务器的FTP配置。不过做起来也不算难。首先前面的FTP服务端需要配置好,服务器端nginx也要设置好。然后在这里设置FTP的用户名和密码。这里最关键的一步就是Path to sources的设置了。这是一个箭头分隔的字符串,左面是项目中需要上传的文件夹,右面是FTP服务器中要上传的文件夹。这里还可以使用***通配符。详细配置介绍可以点击下面的小问号按钮(图里没截到)查看官方文档。

设置完成之后,点击项目右上角的run按钮,开始执行构建过程。如果所有配置都正确的话,稍等片刻就会出现构建成功的提示,然后访问服务器,就会发现nginx也正常的显示了打包之后的项目。这样一来就大功告成了。等到下次开发好项目并提交的时候,TeamCity就会自动检测到变化并执行构建、提交到服务器。这个过程是完全自动化的,我们要做的就是等待片刻就可以看到服务器上的实时变化,是不是很爽呢?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

汇总:Linux文件管理的50个命令

文 | 糖豆 图 | 来源网络 糖豆贴心提醒,本文阅读时间6分钟,文末有秘密! Linux cat命令 cat 命令用于连接文件并打印到标准输出设备上...

55260
来自专栏云计算教程系列

如何使用Node.js和Github Webhooks保持远程项目同步

在处理具有多个开发人员的项目时,当一个人推送到存储库然后另一个人开始对过时版本的代码进行更改时,这可能会令人沮丧。像这些花费时间的错误,这使得设置脚本以保持您的...

45030
来自专栏世界第一语言是java

linux下tengine2.2.0编译安装、开机启动、反向代理配置及健康检查

42730
来自专栏黑白安全

web攻击方法及防御总结

根本原因:web的隐式身份验证机制 解决办法: 为每一个提交的表单生成一个随机token, 存储在session中,每次验证表单token,检查token是否正...

15530
来自专栏小樱的经验随笔

使用Windows Server 2003搭建一个asp+access网站

鼠标右键->新建->网站->下一步->描述(随便给一个,这里我以test为例) ->下一步->下一步->输入主目录的路径,默认路径下是C:\Inetpub\ww...

51950
来自专栏IT笔记

Linux下JProfiler 9安装部署及使用

JProfiler[1] 是一个商业授权的Java剖析工具,由EJ技术有限公司,针对的Java EE和Java SE应用程序开发的。 它把CPU、执行绪和内存的...

50890
来自专栏狂码一生

CentOS-7下搭建配置SVN服务器

1、安装svn:     >yum -y install subversion     //svn默认安装目录:/bin/svnserve 2、查看svn版本...

461150
来自专栏北京马哥教育

图解CentOS系统启动流程

? 作者 | Linux运维之路 来源 | 51CTO博客 ? 云豆贴心提醒,本文阅读时间6分钟,文末有秘密! 当我们按下开机键后,系统背后的秘密我们...

46880
来自专栏SpringBoot 核心技术

SpringCloud组件:Eureka服务注册是采用主机名还是IP地址?

我们一直在使用Eureka进行注册服务,然而你有可能很少关心服务在注册到Eureka Server时是采用的主机名的方式?还是IP地址的方式?

37310
来自专栏LanceToBigData

IntelliJ IDEA 17和Maven构建javaWeb项目

前言   电脑又断电了,眼看着写好的东西就没有了,这是第二次犯这个错误了。很难受呀!还是回到正题吧,我们来使用IDEA和Maven构建一个JavaWeb项目  ...

25280

扫码关注云+社区

领取腾讯云代金券