在windows环境下，用TeamCity部署vue项目

起了山
610 阅读3分钟

1. TeamCity下载和安装

直接去TeamCity官网下载，永久免费的，www.jetbrains.com/zh-cn/teamc…

image.png

因为是windows环境，直接下载exe文件安装即可。

安装时需要设置TeamCity服务端口号，默认8111，可根据自己需要修改

image.png

接下来配置构建代理，其中serverUrl就是安装TeamCity服务的ip，端口是上一步中设置的端口，红框内的表格说明了各个属性的作用

image.png

点击save，提示代理属性配置保存的路径，确定即可

image.png

安装完成并且服务启动成功后会在浏览器看到如下界面，此时设置的文件夹是用来存放TeamCity服务的配置、缓存、构建结果等文件，尽量不要设置为c盘

image.png

接下来选择数据库，这个数据库用来存放构建历史等信息，我们按官方建议，直接选择默认的内部数据库，这样最简单方便，不需要额外配置

image.png

创建账号

image.png

2. 创建项目

此时终于进入了TeamCity的工作界面，点击创建第一个项目

image.png

选择从仓库url创建，填入项目的git仓库地址，并输入git账号密码

image.png

设置构建名称，项目名称，分支等信息

image.png

3. 配置构建步骤

vue项目构建应该是基于node环境，运行 npm run build进行构建，但可能有新的依赖加入，所以第一步应运行npm install将依赖安装到最新

image.png

构建步骤的详细设置：

image.png

4. 更新WSL2 Linux内核和安装Docker

配置好两个步骤后点击 run，发现提示没有合适的构建代理可以执行我们的构建步骤，点击链接查看具体问题

image.png

在这个页面说明了构建代理需要一个docker环境，且docker需要运行在linux环境下，所以需要下载docker desktop（桌面开发环境） image.png

安装了Docker之后，提示要安装WSL2 Linux内核，根据提示的链接，点击下载

image.png

内核更新完后，去微软商店下载linux分发版 image.png

都安装完成后，重启Docker桌面版

5.再次尝试运行构建

这时候再次点击右上角的 run，如果仍然提示没有合适的代理，尝试刷新页面和重启Docker，顺利的话，构建就开始运行了

image.png

构建成功，可以在TeamCity对应的目录看到项目和生成的dist文件夹

image.png

6. 将构建结果（dist文件夹）上传服务器

因为服务器也是windows环境，所以我选择在服务器安装FileZilla服务端，通过Ftp上传

在FileZilla管理界面设置账户信息并设置共享文件夹

image.png

image.png

注意把共享文件夹的读写权限都设置上

回到TeamCity增加一个构建步骤，选择FTP Upload

image.png

目标host填服务器地址，其中ftp的默认端口是 21，然后输入账号密码。 因为我们要上传dist文件夹到服务器某个地方（例如服务器共享文件夹下的test1文件夹），所以Paths to sources 填写为 dist => /test1

image.png

保存并点击 run 运行

运行到第三步进行ftp上传时有个小插曲，就是ftp服务端报错：421 Could not create socket 经过搜索，发现在构建步骤配置中将FTP mode修改为 Active（主动模式） 即可

image.png

至此，vue项目通过TeamCity自动打包构建，并发布到服务器，大功告成。

avatar
文章
阅读
粉丝