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

淡淡的烟草味﹌ 2022-06-06 06:59 109阅读 0赞

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][Linux_Unicode]。

## TeamCity配置 ##

### 创建项目 ###

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

![创建项目][1240]

### 创建构建步骤 ###

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

![构建过程][1240 1]

#### 安装npm包 ####

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

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

![安装npm包][npm]

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

#### 打包项目 ####

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

![打包项目][1240 2]

#### 上传dist文件夹 ####

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

![上传项目][1240 3]

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

[Linux_Unicode]: https://segmentfault.com/q/1010000011763603/a-1020000011764367
[1240]: /images/20220606/b85db21d4cd9441ea2deeec12e678acd.png
[1240 1]: /images/20220606/bf946dade2f34bfca892514238946339.png
[npm]: /images/20220606/fa05f999399d40c38f9587151c959d6b.png
[1240 2]: /images/20220606/0440150c9b8c461a8753d99dab0bcb56.png
[1240 3]: /images/20220606/1ed7f27245bc4c74938241e27665c3bb.png