前言：

本文描述了如何采用teamcity将项目部署在docker容器中，完成前端项目（例子为vue，其他项目理论上也适用，各框架下完成项目打包即可）自动部署的具体方式，思路及步骤如下：
1.配置项目的docker-compose编排，保证项目通过docker-compose就可以运行
2.推送代码时，Teamcity按照条件触发自动拉取项目代码，将从配置好的git地址拉取代码到临时工作空间
2.在临时工作空间的目录下，Teamcity将执行配置好的BuildStep进行服务的打包，部署，发布等动作。

这样一个自动部署就完成了，代码提交后就会自动部署项目到目标服务器上，日积累月下来，节省非常多的人力和时间。

而我们主要做的就是配置项目的编排和配置Teamcity的自动发布。
观看本文则假定你已经至少具备以下条件：
0.是一位有耐心的程序员，至少是入门级别。
1.在服务运行的目标主机已经安装好了docker和docker-compose。
2.有一个可以正常打包运行的VUE或其他前端项目。
3.在某个可以访问自己项目源代码的服务器上安装了Teamcity。

以下是详细实现步骤，各位看官慢用之

一、自定义nginx配置和Dockerfile

项目需要基于web容器来启动，此处选择常用的nginx

1.项目根目录创建nginx.conf文件，内容:

server { 
    listen 80; server_name localhost; # 开启 gzip gzip on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version 1.1; gzip_comp_level 9; gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; client_max_body_size 50M; location / { 
    # 根目录
        root   /usr/share/nginx/html;
        index  index.html index.htm; # 解决HTML5 History 模式 try_files $uri $uri/ /index.html; } } 

2.项目根目录创建Dockerfile文件，完成对项目的打包和将打包后的静态文件放到nginx，内容：

讯享网#构建 FROM node:10-alpine as builder LABEL maintainer="kamjin" # env set ENV EVA_ENTRYPOINT=/api WORKDIR /code ADD package.json /code # 安装git 否则npm安装git+类型协议的库会失败 RUN apk add --no-cache bash git openssh # 此步将可以充分利用 node_modules 的缓存 RUN npm install --strict-ssl=false --registry=https://registry.npm.taobao.org RUN npm i @vue/cli-service --strict-ssl=false --registry=https://registry.npm.taobao.org ADD . /code RUN npm run build:prod #nginx作为运行容器 FROM nginx # set timezone RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc/timezone COPY --from=builder code/dist /usr/share/nginx/html/
COPY --from=builder code/nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 

3.根项目创建docker-compose.yaml文件，用来编排docker容器，内容：

version: "3.7" services: web: privileged: true stdin_open: true tty: true user: root restart: always image: myproject/mywebapp-h5 container_name: "mywebapp-h5" volumes: - ./public/static/config.json:/usr/share/nginx/html/static/config.json
    ports: - "8000:80" build: context: ./ dockerfile: Dockerfile 

注意： image和container_name需要根据自己的项目起名字，镜像将存储在服务器上本地的registry，volumes可以映射容器内文件至宿主机文件，根据自己项目需求自行映射，这里我的项目有一个配置文件需要映射出来以方便在宿主机上修改，port指定了该容器服务需要在宿主机的哪个端口运行

二、配置Teamcity

项目git仓库地址的配置及其他基本操作比较简单，可以查看官方文档，此文篇幅原因不在赘述，有不明白的地方也可以在评论区留言。

1.BuildStep配置

打开BuildStep配置，点击add build step创建，也可以点auto-detect build steps自动读取，可以点击Reorder build steps对buildStep进行拖动排序，此处我们只需要一个Command Line类型的buildStep，如下图：

讯享网
创建后点击该buildStep进行编辑，在Custom script: 位置填入内容，其中-p参数后面按照自己的服务名称填写，此处我的服务名称为mywebapp-h5：

讯享网docker-compose -p mywebapp-h5 up -d --build 

如下图：
保存即可。

2.Build Features配置

因为网络原因，需要打开Build Features配置一下npm registry为https://registry.npm.taobao.org或者其他，目的是加块npm包下载的速度，配置的方式如图：

3.配置Trigger
Trigger选项是用来设定什么条件下会自动部署，比如dev分支有新的代码提交时，将会触发当前项目的Triggers进行打包，默认的Triggers如下:

这个vcs trigger表示了只要有代码提交，不管是任何分支的任何文件，都会触发自动部署，实际也可根据项目的需求来更改trigger的触发条件，比如设置只有dev环境自动触发，那就是更改该trigger设置里的Branch Filter为：+:dev

至此，大功告成，此时可以试一下提交任意服务代码触发自动发布。

注:
如果在发布期间一直卡住不动，可以在buildStep的docker运行参数设置中添加dns解决，具体做法是在上图的Additional docker run arguments添加：--dns 8.8.8.8 --dns 8.8.4.4 ，参考这里

其他选项无特殊需求无需改动。

三、查看日志和容器运行情况：

完成了所有配置，可以试着点右上角的run来手动触发部署，将会执行配置好的buildstep。

接着点击顶栏选项卡的Agent，再点击BuildLog来查看执行日志

其中某个步骤如果出错了这里可以查看详细问题，根据提示做出调整解决问题即可。

查看docker容器的运行情况：docker ps -a
其他有可视化界面的话可以用可视化界面查看，比如Portainer.io

额外内容：

这里放出在docker-compose.yaml中对Portainer.io的编排配置：

services: portainer: privileged: true stdin_open: true tty: true container_name: "portainer-test" volumes: - portainer:/data - /var/run/docker.sock:/var/run/docker.sock restart: always image: portainer/portainer:latest ports: - "9000:9000" #其他服务 ...... volumes: portainer:{ 
   } 

可以加在项目的docker-compose.yaml中，届时Portainer.io将自动部署在9000端口供访问

结语：

感谢观文，写文不易，麻烦点个赞加个关注，如果有不懂的地方可以评论区留言，后面看情况更新相关的文章~~